Forms Module
This module allows you to easily create and manage forms, utilising a range of input types and options.
Getting started
Open the forum module by selecting the icon from the sidebar. Click the New Webform button to create a new form.
Creating a new webform
Configuration
Once the new form has been created, a new blade will open. You should provide the appropriate information in the settings tab of the new blade. You can also configure your form using additional settings. These can be found by selecting the 'more' icon to the top right of the blade, symbolised by 3 vertical dots, and choosing 'details'.
Settings tabs
Building the form
Select the tab marked 'Fields' for your webform, and then click the 'Add new form field' button.
Adding fields
Input field types
A new dialogue box will open prompting you to choose from a list of form field types. Select the item using the radio buttons to the right and click 'ok'.
Selecting input fields by type
Based on the type of input field you select, you will be presented with a number of options to help you set up the control. Common attributes include the name or title of the field, an id, an initial value which will be preselected when the form loads, layout options, and the ability to mark the field as required to prevent the user from submitting the form until all necessary data is entered. Collections have an additional section for you to add the names as you want them to appear for the user, and the value it's connected to alongside it.
The Settings tab contains extra options to help you customise your forms by setting sizes, adding CSS, and disabling fields.
Here are a few examples of common input types to help you get started.
Example showing how to set up a simple text box. The tick box marked as 'required' indicates that the form cannot be submitted unless the user enters a value.
Example showing how to set up a dropdown menu. The tick box marked as 'required' indicates that the form cannot be submitted unless the user enters a value. The initial value (English in this instance) is preselected for the user.
Example showing how to set up a text area. The tick box marked as 'required' indicates that the form cannot be submitted unless the user enters a value. Placeholder text is included
Previewing the webform
You can see how the form will appear to the user by selecting the preview button from the command menu at the top of the form blade. By default, required fields are marked with an Asterix (*) alongside the field name. As per our example, 'English' is selected in the dropdown list, and we have some placeholder text in the comments text area.
