ITS

Information Technology Services
Information Technology Services

Add Webform Fields and Layouts


Add a Field to a Webform

  1. Once you've created your webform, select the "Webform" tab.

  1. Add the name of the field to the "New component name" textbox.
  2. From the "Type" drop-down, select the data type of the field.
  3. If you would like to make the field mandatory for submissions, check the "Required" checkbox.
  4. Click "Add".

Screenshot of the "Webform" tab with field values entered and ready to be added

  1. Depending on the data type that you selected, a corresponding form will appear. Ensure that all required fields are typed in and make any necessary customizations to the field. Most data types will allow you to enter values for the following categories:
    1. Label - this is the descriptive label that will appear to the user when displaying the field and is a required field.
    2. Default Value - optionally, a field can have a preset value. This value can be edited by the individual submitting the form but otherwise, this value will be submitted.
    3. Description - A description appears below the field unless otherwise specified and should provide help or instructions regarding the field.
    4. Validation - the options available in the validation section will vary by data type but will generally allow you to specify if the field should be required, if only unique values should be allowed, maximum length, etc.
    5. Display - the display section will also vary depending on the data type. It will usually allow you to set things like placeholder text (i.e., example text that shows in the field until the user starts entering a value), where the label appears relative to the field (e.g., above, inline), etc.
  2. Once complete, click "Save component". 
  3. You will be taken back to the "Webform" tab, where the field will now appear. You will have the options to edit, copy or delete the field in the 'operations' column. To view the appearance of the field in your form, click the "View Draft" tab. 

Screenshot of the "Webform" tab after the First Name field has been successfully added

Screnshot of the "View draft" tab after a "First Name" field has been added

Modify the Layout of Webform Fields

Add a Heading and Introductory Text

  1. Navigate to the Webform tab.
  2. Add a new component (e.g., Contact Us Webform Header. Note that this is not the text that will appear on the webform) of type "Markup".

Screenshot of the webform tab with a new field of type 'markup' ready to be added

  1. After clicking 'Add' for the component, in the Value field, add the header text and format it as "Heading 1". Add any other descriptive text that you'd like to appear at the top of the form.
  2. In the "Display" section, ensure that the "Display on" drop-down is set to "form only". Click "Save".

Screenshot of the "Edit component" page for a markup content type

  1. Use the crosshairs next to the new component to drag it to the top of your component list.

Screenshot of the new component appearing at the top of the component list of the webform tab

  1. Click Save. Now when you go "View Draft" the header text and description will appear at the top of the page.

Screenshot of the view draft page of a webform with a heading and introduction

Set Multiple Fields to Appear on the Same Line

  1. Ensure that you have at least two fields in your webform that you'd like to appear inline.
  2. Navigate to the webform tab.
  3. Add a new component (e.g., First and Last Name Layout. Note that this is not the text that will appear on the webform) of type "Layout Box".

screenshot of the webform tab with a new layout box component ready to be created

  1. After you click Add, the component will automatically appear in the webform component list. Use the cross-hairs to drag-and-drop the fields that you'd like to appear in line so that they appear as children below the layout box field.
  2. Click "Save".

Screenshot of the webform page with 'First Name' and 'Last Name' fields appearing as children of a layout box

  1. Next to the layout box component, click "Edit".
  2. Under "Display", ensure that the "Alignment" drop-down is set to "Equal Width" and click "Save component".

Screenshot of the edit component page for a layout box with the alignment field set to equal width

  1. When you go to "View draft" for the page, the two fields will now appear in the same line.

Screenshot of a webform with two fields set on the same line

Group Fields Together

  1. Ensure that you have at least two fields that you'd like grouped together.
  2. Navigate to the Webform tab.
  3. Add a new component (e.g., Contact Information) of type "Fieldset".

Screenshot of the webform tab with a new fieldset component ready to be added

  1. In the page that appears, you can choose to add a description. Within the "Display" field, you can specify criteria such as whether or not the fieldset should be collapsible, if you'd like the label to appear, etc. Once complete, click "Save component".
  2. Use the crosshairs to drag-and-drop the component above the fields that you'd like grouped together. Ensure that they appear as children of the component.

Screenshot of the webform page with fields appearing as children of the fieldset field

  1. Click "Save". Now when you go to "View draft" for the page, the fields will be grouped within a fieldset.

Screenshot of webform with fields grouped together under a fieldset

Add Conditions to a Webform

When building a webform, there may be cases where you only want certain fields to appear based on the end user's response to a different question. For example, in our sample "Contact Us" form below, we may want the question "How did you find our form?" to only appear if the user answers "yes" to the question just before: "Is this your first time contacting us?". We can achieve this by adding conditions to our webform.

Screenshot of a webform with no conditional statement applied

  1. Ensure that you have at least two fields created in your webform that will be used for the condition.
  2. Navigate to the Webform tab.
  3. Along top right side of the tab, select the "Conditionals" button.

Screenshot of the conditionals page of the Webform tab and the "+" button to add condition highlighted

  1. Next to the statement "There are no conditional actions on this form. Add a new condition", click the "+" button.
  2. The conditional statements operate on simple "if, then..." logic. The "if" statement defines the criteria and the "then" statement defines the action that will occur when the criteria is met. Next to the if statement, select the field that the criteria should be based on. In our example above, we would select "Contact Information: Is this your first time contacting us?". We only want the second question to appear if the answer to this question is yes, so the second drop-down will be set to "is" and the last drop-down will be set to "yes". Similarly, define the resulting action. In our example, we set the field to "Contact Us Webform Header" , "is" and "shown". 

Screenshot of the webform conditional page set with the conditional statement in the example below

  1. Continue adding any other conditions. Once complete, click "Save conditions".
  2. Now, if we navigate to "View draft" of the page, the question "How did you find our form" no longer appears. The question will not appear unless we answer "yes" the question "is this your first time contacting us?".

Screenshot of the webform page after conditional has been applied (yes not selected)

Screenshot of a webform after conditional statement has been added (yes selected)