ITS

Information Technology Services
Information Technology Services

Webform Field Types

Date

The date component allows a user to input a date. Customizations available for this field include:

  1. Default value timezone: choose to use either the user's timezone or the website's timezone.
  2. Validation - Start Date and End Date: use these fields to specify the earliest date that may be entered (start date) and the latest date that may be entered (end date).
  3. Display - Enable popup calendar:  If enabled, users can choose to select their date from a calendar, as shown below.
  4. Display - Use a textfield for year: If enabled, users will be prompted to type in a value for year, rather than selecting from a drop-down list.
A webform date component as it appears on a webform, with the popup calendar expanded

E-mail

The e-mail component is used to collect email addresses - it differs from a regular text field in that it requires a value that contains the '@' symbol. If a user enters an email address that does not contain the '@' symbol, they will be prompted with a warning when attempting to submit the form:

An email address component displayed on a webform with incorrect input, prompting the message "Please include an '@' in the email address.'test' is missing an '@'

Fieldset

A fieldset is a styling component for a form (i.e., it can help to add structure but does not accept user input). It can be used to group fields into logical sections. Examples of how the fieldset can be applied are available in the Group Fields Together section of our Add Webform Fields and Layouts tutorial. Two display customizations that are available include the "Collapsible" and "Collapsed by Default" options. If "Collapsible" is enabled, users can choose to collapse fields within the section. The fieldset will be "open" by default. "Collapsed by Default" will set the collapsible section to appear 'closed' by default. Users will need to expand the collapsible in order to view the contents of the section.

A fieldset displaying the heading "Contact Information", grouping fields First Name, Last Name and Email Address

File

The file component allows users to upload files as part of their form submission. This component can be further customized to limit the size and type of a file upload. By default, the "Upload destination" (i.e., where the files will be stored) is set to "Private files". It is strongly recommended that you DO NOT modify this setting. As noted in the field form, uploading to the public file path is dangerous for forms that are available to anonymous and/or untrusted users (i.e., not required to provide sign-in credentials). Files uploaded to the public directory may be accessed by any user aware of the path. 

The file component displayed on a webform. Max file upload size and file types are described

Grid

The grid allows you to format a series of questions and answers (e.g., likert scale) in a table format. Use the "Options" field to specify any choices or criteria that should appear as columns in your grid. This must be added in the format "safe_key|Some readable option", where the "safe_key" is the value that will be stored in the database and "Some readable option" is the text that will appear on your Webform page. Each option must appear on a separate line. 

For example, to have three options, High, Medium and Low, appear along the top of your grid, you would enter the following:

high|High
medium|Medium
low|Low

Similarly, for questions or criteria that should appear as rows in your grid, enter them into the Questions field in the same "safe_key|Some readable option" format. For example:

urgency|Please rate the urgency of receiving this information.
significance|Please rate the significance of the information.
sensitivity|Please rate the sensitivity of the information.

A table displaying the grid details. In the rows, the Questions outlined in the example above are displayed and in the columns, the Options are displayed. Radio buttons are shown in remaining fields

Hidden

A hidden component will not appear on the webform for end users but may be used to gather information that will be visible to users with access to view webform submissions.

Layout Box

A layout box is a styling component for a form (i.e., it can help to add structure but does not accept user input). It can be used to arrange multiple fields on a single row as equal width columns. For more details on applying the layout box, see the Set Multiple Fields to Appear on the Same Line section of our Add Webform Fields and Layouts tutorial

First Name and Last Name fields appearing side-by-side on the same row

Markup

The markup component allows you to add text blocks to your form. For example, to add a Heading 1 value and form description, add a markup component containing this information to the top of your form. The field uses the WYSIWYG editor, so any content that you can add to a basic page, you can add to your form.

Heading 1 value "Sample Webform" and descriptive text "This is a sample webform. This heading and descriptive text were added using a Markup component." appears above other form content

Number

The number component can be used for numeric input, such as a dollar value, employee/student number, etc. This component is not appropriate for phone numbers, as these typically require additional characters (e.g., "-"). Customizations available in the number component include:

  1. Validation - Unique and Integer: If the unique option is enabled, users cannot submit the same value as another submission. The integer option will forbid decimal values.
  2. Validation - Minimum, Maximum, Step: These fields can be used to restrict the values that a user can enter in the field.
  3. Display - Element Type: If "Text field" is selected, users will be prompted to type in a value for the field. If "Select list" is chosen, users will select a number from a drop-down list based on the minimum and maximum values specified.
  4. Display - Decimal Places, Thousands separator, Decimal point: These options allow you to control how many decimal places are allowed, what character you'd like to use to separate thousands (e.g., comma, period, space) and what character you'd like to use to define decimal places (e.g., period or comma).
  5. Analysis - Exclude zero: If this option is enabled, when using the Results > Analysis tab, any submissions with a value of zero will be excluded from calculated averages and standard deviation.
A Number component appearing on a webform. The value -1 has been entered but has a red box around it, indicating the number is invalid

Page Break

The page break component can be used to divide long forms into multiple pages. Note that whatever value is added to the Label field will appear as a step along the top of the form. By default, the navigation buttons between pages will be set to "Next Page > " and "< Prev Page". Use the "Next page button label" and "Previous page button label" field to customize this text.

A sample webform with a page break. A green progress bar appears along the top with steps Start, More Information, Complete

Select Options

The select options field can be used to add radio buttons or checkboxes to your form. Enter the list of selectable values in the Options tab. Each option should be entered on a separate line in the format "safe_key|Some readable option", where the "safe key" is an arbitrary value that will be stored in the database and "Some readable option" is the text that will appear on the form. For example, for a simple yes/no question, enter:

yes|Yes
no|No

By default, the field will add these options as radio buttons. To switch to checkboxes, enable the "Multiple" checkbox. If you'd like users to select options from a drop-down list, check the "Listbox" option in the "Display" section.

Screenshot of the select options displayed in a webform as radio buttons

Example of select options displayed as a listbox on a webform

Example of select options displayed as checkboxes using the multiple option displayed on a webform

Textarea

The textarea component can be used for questions requiring a detailed text response. Use the Display - Width and Height fields to set conditions on the size of the area.

A textarea field labelled "Textarea" displayed on a webform.

Textfield

The textfield is available for questions requiring short, text responses such as first name, last name, phone number, etc.

A textfield labelled "First Name" appearing on a webform

Time

The time field can be used to allow users to add a time value to their submission. Similar to the date field, you can use the user's timezone or the timezone of the website. Under "Validation", you can set restrictions on the earliest Start time and the latest End time that a user can enter. In the "Display" section, choose whether to use a 12-hour or 24-hour time format. If you would like to restrict users to selecting times in specific increments (e.g., 15 minutes, 30 minutes), set the "Minute increments" drop-down accordingly. 

A time component displaying on a webform. Hour drop-down is closed, the minute drop-down is set to 00 and am/pm radio buttons have am selected