Structure of a Webform
Webforms are made up of several development layers, each of which allows you to define and shape the webform in different ways:
- The first layer of the webform is the page that contains the webform. This will appear in the content menu and can be edited with a New Draft, like a Page. Any content added to this container will precede the Webform and can provide context or instructions.
- The second layer is the Webform itself. Form elements such as text fields, selection menus, radio buttons, checkboxes, etc., are added and configured here.
- Please note that because the Webform is a separate layer, the Publishing Options visible in the first layer do not affect it. There is no draft mode for the Webform layer, and any changes made there go live immediately.
- Advanced layers to webforms allow for further customization and functionality, and include conditionals, validation, and various settings.
Now that we've reviewed the structure, let's create one! Follow these steps to learn how to create and manage your own webform:
Create the Form Page
First, create the page that the webform will "live" in.
- Open your Administer League Site menu,
- and then select Add Form. You will see a page with the WYSIWYG text editor, just like you see when creating a basic page.
- Content you add here will precede the form. This can be left blank, or can be used to offer context/instructions relevant to the form.
- Once you are happy with your changes to this section of the form, click Save, and then a new tab called Form components will appear on the screen.
- You can access the Form components tab by accessing the Webform tab first.
Alternatively, you can add a webform to a basic page. After saving a newly created page, the Webform tab will appear and you'll follow the same steps below. [NOTE: When adding form components to a basic Page, you won't have the option of adding text or images under the form components. With the creation of a Form, you'll have this option.]
Components are the elements your form will be built out of; most of them collect user input. They will be created and configured one at a time.
- First, add a Label,
- then select a Type,
- and then click Add. This will take you to a new page where you can configure the additional settings for the component you're adding.
- For more details on the different component types and how to configure them, click on this Form Components link.
Configure Form Settings
Form settings are accessed by clicking on Webform, then Form Settings. Full details on form settings and what they do can be found in the Form Settings section.
Configure Email Settings
Webforms can optionally be configured to send emails upon form submissions. This is configured by clicking on the Email tab, entering an address, and clicking Add. Full details are available in the Email Settings section.
Viewing and Downloading Submission Results
- Click the Results tab.
- Click the Download link for a spreadsheet (in Excel or .csv format) of the submission results.
Form Conditionals (For Complex Forms)
Conditionals can be used to create advanced forms that reveal or omit certain questions based on user input. For example, you could ask users at the beginning of the form to indicate if they are staff or faculty, and use a conditional to show different follow-up questions depending on their response.
The following is a simple set of instructions you can follow to set up and use conditionals:
- Click on the Webform tab, then the Conditionals sub-tab.
- Click the + icon next to the text "Add a new condition".
- Use drop-down menus to set up each conditional logic, as described below.
- The basic formatting is as follows:
then [component] [condition] [state]
- As an example, consider the final question of this Sample Form. The question asks about a person's voting status, and depending on the answer, will provide specific information based on the answer the user chooses from a select options component. One of the conditionals will read:
If [Please choose one:] [is] [Non-Voter],
then [How to register to vote] [is] [shown]
- The basic formatting is as follows:
- You can add or remove conditionals, or "if" and "then" statements to an existing conditional, with the + and - icons.
- Click Save conditions to apply your conditionals to the form.
CAPTCHA is a challenge-response test used to help determine whether the user is human and can mitigate the amount of spam your form receives from spambots. CAPTCHA is automatically enabled on all MyLO forms to prompt all anonymous (unauthenticated) users with the test.