Element settings
Email
A unique element key. Can only contain lowercase letters, numbers, and underscores.
 
This is used as a descriptive label when displaying this webform element.
A short description of the element used as help for the user when they use the webform.
Displays a help tooltip after the element's title.
The text displayed in help tooltip after the element's title.Defaults to the element's title
The text displayed in help tooltip after the element's title.
Displays a read more hide/show widget below the element's description.
The click-able label used to open and close more text.Defaults to: More
A long description of the element that provides form additional information which can opened and closed.
Determines the placement of the title.
Determines the placement of the description.
Determines the placement of the help tooltip.
Text or code that is placed directly in front of the input. This can be used to prefix an input with a constant string. Examples: $, #, -.
Text or code that is placed directly after the input. This can be used to add a unit to an input. Examples: lb, kg, %.
The element may still be empty unless it is required.
Leaving blank will use the default maxlength.
Leaving blank will use the default size.
The placeholder will be shown in the element until the user starts entering a value.
Autocomplete
Browsers sometimes have features for helping users fill forms in, for example prefilling the user's address based on earlier user input. The autocomplete (autofill) attribute can be used to hint to the user agent how to, or indeed whether to, provide such a feature.
Setting autocomplete to off will disable autocompletion for this element. Select 'Autofill' to use semantic attribute values for collecting certain types of user information.
Hide the input of the element when the input is not being focused.
Make this element non-editable with the user entered (e.g. via developer tools) value ignored. Useful for displaying default value. Changeable via JavaScript.
Make this element non-editable with the user entered (e.g. via developer tools) value submitted. Useful for displaying default value. Changeable via JavaScript.
Allow element to be populated using query string parameters.
Check this option if the user must enter a value.
If set, this message will be used when a required webform element is empty, instead of the default "Field x is required." message.
Check that all entered values for this element are unique.
Check that entered values for this element is unique for the current source entity.
Check that entered values for this element are unique for the current user.
If set, this message will be used when an element's value are not unique, instead of the default "The value %value has already been submitted once for the %name element. You may have already submitted this webform, or you need to use a different value." message.
A regular expression that the element's value is checked against.
Enter a regular expression that the element's value should match.
If set, this message will be used when a pattern is not matched, instead of the default "%name field is not in the right format." message.
Conditional logic
State Element Trigger/Value Operations
if of the following is met:
Enter a number range (1:100)
When this element is hidden, this element's value will be cleared.
The default value of the webform element. For multiple options, use commas to separate multiple defaults.
This is used as the table header for this webform element when displaying multiple values.
This is used by the add/remove (+/-) icons.
This is used when there are no items entered.
Minimum items defaults to 0 for optional elements and 1 for required elements.
If unchecked, the elements will no longer be sortable.
If unchecked, the add/remove (+/x) buttons will be removed from each table row.
If unchecked, the add button will be removed from each table row.
If unchecked, the remove button will be removed from each table row.
If checked, an add more input will be added below the multiple values.
If checked, users will be able to input the number of items to be added.
This is used as the add more items button label for this webform element when displaying multiple values.
This is used as the add more items input label for this webform element when displaying multiple values.
Wrapper CSS classes
Apply classes to the element's wrapper around both the field and its label. Select 'custom…' to enter custom classes.
Apply custom styles to the element's wrapper around both the field and its label.
Enter additional attributes to be added to the element's wrapper.
Element CSS classes
Apply classes to the element. Select 'custom…' to enter custom classes.
Apply custom styles to the element.
Enter additional attributes to be added the element.
Apply classes to the element's label.
Apply custom styles to the element's label.
Enter additional attributes to be added to the element's label.
Single item
Select how a single value is displayed.
Multiple items
Select how multiple values are displayed.
Display CSS classes
Apply classes to the element's display wrapper. Select 'custom…' to enter custom classes.
Apply custom styles to the element's display wrapper.
Enter additional attributes to be added to the element's display wrapper.
The admin title will always be displayed when managing elements and viewing & downloading submissions.If an element's title is hidden, the element's admin title will be displayed when viewing a submission.
Admin notes/comments are display next to the element title in the form builder and visible in the form's YAML source
Private elements are shown only to users with results access.