Webform Field Elements
Webform elements, a.k.a., "field types," allow you to add capabilities to your web form. There are several field types available, and each field type can be customized to perform a specific task.
On this page:
Element Types
Basic Elements
Checkbox
Form element for a single checkbox.
Hidden
Hidden fields are used for adding tokens to customize the form more dynamically. These fields are not visible to the user.
Text Area
Provides a large area allowing the user to add comments. You can limit the number of characters in a textfield, and set up how large the text box will appear when viewing the page.
Textfield
Used for shorter content such as the users name.
Advanced Elements
Autocomplete
Auto completion.
CodeMirror
Editing code in a number of programming languages and markup.
Email
Although the email field may, or may not, be selected as a required field, the complete email address is required when filling out the form. If it is missing the "@," the user will not be able to submit the form, and an alert will indicate to include an "@."
In the email properties, you can select the Multiple Email Address option that allows more than one email address to be submitted. You can also customize the email address field to include the name and email address.
Email confirm
Double-input of email addresses.
Email multiple
Multiple email addresses can be added, separated by commas.
Height (feet/inches)
Provides a form element to collect height in feet and inches.
Number
numeric input, with special numeric validation.
Range
Input of a number within a specific range using a slider.
Rating
Rate something using an attractive voting widget.
Same as…
Syncing the value of two elements.
Scale
Input of a numeric scale.
Telephone
Entering a telephone number.
Terms of service
Terms of service element
URL
Input of a URL.
Composite Elements
Basic address
Collect address information (street, city, state, zip).
Contact
Collect contact information (name, address, phone, email).
Custom composite
Create custom composites using a grid/table layout.
Link
Display a link.
Name
Collect a person's full name.
Telephone advanced
Display a telephone number with type and extension.
Markup Elements
Advanced HTML/Text
Render advanced HTML markup and processed text.
Basic HTML
Render basic HTML markup.
Horizontal rule
Horizontal rule element.
Label
Displaying the label for a form element.
Message
Render custom, dismissible, inline status messages.
Options Elements
Checkboxes
Set of checkboxes.
Checkboxes other
Set of checkboxes, with the ability to enter a custom value.
Likert
Users can respond to multiple questions using a Likert scale.
Radios
Set of radio buttons.
Radios other
Set of radio buttons, with the ability to enter a custom value.
Select
Drop-down menu or scrolling selection box.
Select other
Drop-down menu or scrolling selection box, with the ability to enter a custom value.
Computed Elements
Computed token
Display computed webform submission values using tokens.
Containers
Container
Wraps child elements in a container.
Details
Interactive element that a user can open and close.
Fieldset
Group of form elements.
Flexbox layout
Flex(ible) box container used to layout elements in multiple columns.
Item
Display-only form element with an optional title and description.
Section
Display-only form element with an optional title and description.
Date/Time Elements
Date
Date selection.
Date/time
Date & time selection.
Date list
Date & time selection using select menus and text fields.
Time
Time selection.
Entity Reference Elements
Term checkboxes
Select a single or multiple terms displayed as hierarchical tree or as breadcrumbs using checkboxes.
Term select
Select a single or multiple terms displayed as hierarchical tree or as breadcrumbs using a select menu.
Buttons
Submit button(s)
Contains a Webform's submit, draft, wizard, and/or preview buttons.
Preview Element Types
In the form elements dialogue window, you have the option to show the list of element types, or show a preview of each element type.
- Click the "Show preview" button to expand and preview the function of the element types.
- Click the "Hide preview" button to close the preview and return to the list.
