Previous Step: Webform Glossary: Element Types
Note:
Some, not all, of these fields will be present depending on the Element Type.
Element Settings
Type: The chosen Element Type
Title: A descriptive label when displaying this webform element
Key: A unique element key that can only contain lowercase letters, numbers, and underscores
Default value: The default value of the webform element
Allowed number of values
Limited: Limit the number of values to a maximum of the entered number
Unlimited: Do not limit the number of values
Advanced Elements
CAPTCHA Settings
Challenge type: The type of CAPTCHA challenge that will appear on the webform
Question title: The question that will be for the CAPTCHA
Question description: The description for the CAPTCHA
Admin mode: An on or off toggle to presolve the CAPTCHA for debugging and preview purposes
Email Confirm Settings
Email confirm title: Title of the email confirm
Email confirm description: Description of the email confirm
Email confirm placeholder: Placeholder text for the email confirm
Use Flexbox: Use or do not use Flexbox
Note:
If 'Automatic' is selected Flexbox layout will only be used if a 'Flexbox layout' element is included in the web form
Height Settings
Height element type: The height input method
Height suffix format: How the height is formatted and displayed
Feet minimum: Specifies the minimum value
Feet maximum: Specifies the maximum value
Number Settings
Minimum: Specifies the minimum value.
Maximum: Specifies the maximum value.
Steps: Specifies the legal number intervals. Leave blank to support any number interval. Decimals are supported.
Range Settings
Minimum: Specifies the minimum value.
Maximum: Specifies the maximum value.
Steps: Specifies the legal number intervals. Leave blank to support any number interval. Decimals are supported.
Range Output Settings
Output the range's value
Output prefix: Text or code that is placed directly in front of the output. This can be used to prefix an output with a constant string. Examples include $, #, and -.
Output suffix: Text or code that is placed directly after the output. This can be used to add a unit to an output. Examples include lb, kg, and %.
Output CSS classes: Apply classes to the element. Select 'custom…' to enter custom classes.
Output CSS style: Apply custom styles to the element.
Output custom attributes (YAML): Enter additional attributes to be added to the element.
Rating Settings
Minimum: Specifies the minimum value.
Maximum: Specifies the maximum value.
Steps: Specifies the legal number intervals. Leave blank to support any number interval. Decimals are supported.
Star size: Specifies the size of the star rating icon.
Show reset button: If checked, a reset button will be placed before the rating element.
Scale Settings
Minimum: Specifies the minimum value.
Maximum: Specifies the maximum value.
Minimum label: Label for the minimum value in the scale.
Maximum label: Label for the maximum value in the scale.
Scale size: Specifies the size of the scale icon in pixels.
Scale type: Specifies the shape of the scale icon.
Scale text: Specifies the placement of the minimum and maximum labels.
Telephone Settings
Enhance support for international phone numbers: Enhance the telephone element's international support using the jQuery International Telephone Input plugin.
Initial country: Specify the country that is automatically chosen.
Preferred countries: Specify the countries to appear at the top of the list.
Composite Elements
Basic Address Settings
Visible: Toggle if the address group is visible or hidden
Labels
Placeholder: The placeholder will be shown in the element until the user starts entering a value
Help text: A tooltip that is displayed after the title
Description: A short description of the element used as a help for the user when they use the web form
Title display: Where the tooltip is displayed after the title
Settings
Required: Check this option if the user must enter a value
Use Flexbox: If 'Automatic' is selected, Flexbox layout will only be used if a 'Flexbox layout' element is included in the web form
Select2: Replace the select element with a jQuery Select2 select box
Contact Settings
Visible: Toggle if the contact group is visible or hidden
Labels
Placeholder: The placeholder will be shown in the element until the user starts entering a value
Help text: A tooltip that is displayed after the title
Description: A short description of the element used as a help for the user when they use the web form
Title display: Where the tooltip is displayed after the title
Settings
Required: Check this option if the user must enter a value
Use Flexbox: If 'Automatic' is selected, Flexbox layout will only be used if a 'Flexbox layout' element is included in the web form
Select2: Replace the select element with a jQuery Select2 select box
Custom Composite Settings
Settings
Key: A unique and machine-readable name
Note:
Can only contain lowercase letters, numbers, and underscores
Type: The type of element that is displayed
Required: An on or off toggle that requires the user must enter a value
Labels
Title: A descriptive label for the webform element
Description: A short description of the element
Help Text: A tooltip that is displayed after the title
Add: Add more items to the element
Select2: Replace the select element with a jQuery Select2 select box
Link Settings
Visible: Toggle if the section is visible or hidden
Labels
Title
Link Title: The title of the link
Placeholder: The placeholder will be shown in the element until the user starts entering a value
Help text: A tooltip that is displayed after the title
Description: A short description of the element used as a help for the user when they use the web form
Title display: Where the tooltip is displayed after the title
URL
Link URL: The URL of the link
Placeholder: The placeholder will be shown in the element until the user starts entering a value
Help text: A tooltip that is displayed after the title
Description: A short description of the element used as a help for the user when they use the web form
Title display: Where the tooltip is displayed after the title
Settings
Required: Check this option if the user must enter a value
Use Flexbox: If 'Automatic' is selected, Flexbox layout will only be used if a 'Flexbox layout' element is included in the web form
Select2: Replace the select element with a jQuery Select2 select box
Name Settings
Visible: Toggle if the section is visible or hidden
Labels
Key: The machine-readable name (such as title, first, or last)
Link Title: The title of the link
Placeholder: The placeholder will be shown in the element until the user starts entering a value
Help text: A tooltip that is displayed after the title
Description: A short description of the element used as a help for the user when they use the web form
Title display: Where the tooltip is displayed after the title
Settings
Required: Check this option if the user must enter a value
Use Flexbox: If 'Automatic' is selected, Flexbox layout will only be used if a 'Flexbox layout' element is included in the web form
Select2: Replace the select element with a jQuery Select2 select box
Markup Elements
Advanced HTML/Text
Processed Text Settings
Display on: Where the text will display
form only
viewed submission only
both form and viewed submission
Text field: The desired text
Text format: The format of the text
Basic HTML
Markup Settings
Display on: Where the text will display
form only
viewed submission only
both form and viewed submission
HTML markup: Enter custom HTML into the webform
Options Elements
Checkboxes
Options: A predefined option
Option Value: A unique value
Option Text / Description
Text: Text to be displayed on the form
Description: A description to be displayed on the form
Options display: How the element displays on the form
Options description display: How the element description displays on the form
Randomize options: Randomize the order of options when displayed on the form
Include 'All of the above' option: Include a checkbox for All of the above
Include 'None of the above' option: Include a checkbox for None of the above
Checkboxes Other
Options: A predefined option
Option Value: A unique value
Option Text / Description
Text: Text to be displayed on the form
Description: A description to be displayed on the form
Options display: How the element displays on the form
Options description display: How the element description displays on the form
Randomize options: Randomize the order of options when displayed on the form
Include 'None of the above' option: Include a checkbox for None of the above
Other Option Settings
Other type: The appearance of the 'other' option
Other title: The title of the 'other' option
Other placeholder: Placeholder text for the 'other' option
Other description: The description of the option
Other field prefix: The text or code placed directly in front of the input
Other field suffix: The text or code that is placed directly after the input
Other size: The size of the other option
Other maxlength: The maxlength of the other option
Other count: Determines if the maximum number is in characters or words
Likert
Questions
Question Value: A unique value
Question Text / Description
Text: Text to be displayed on the form
Description: A description to be displayed on the form
Questions description display: How the element description displays on the form
Randomize questions: A toggle to randomize the questions
Answers
Custom answers: A predefined answer
Answer Value: A unique value
Answer Text / Description
Text: Text to be displayed on the form
Description: A description to be displayed on the form
Answers description display: How the answer displays on the form
Allow N/A answer: A toggle to display a 'N/A' answer
Enable Drupal-style "sticky" table headers (JavaScript): A toggle to allow answers to float at the top of the page as the user scrolls
Radios
Options: A predefined option
Option Value: A unique value
Option Text / Description
Text: Text to be displayed on the form
Description: A description to be displayed on the form
Options display: How the element displays on the form
Options description display: How the element description displays on the form
Randomize options: Randomize the order of options when displayed on the form
Radios Other
Options: A predefined option
Option Value: A unique value
Option Text / Description
Text: Text to be displayed on the form
Description: A description to be displayed on the form
Options display: How the element displays on the form
Options description display: How the element description displays on the form
Randomize options: Randomize the order of options when displayed on the form
Other Option Settings
Other type: The appearance of the 'other' option
Other option label: The label of the 'other' option
Other title: The title of the 'other' option
Other placeholder: Placeholder text for the 'other' option
Other description: The description of the option
Other field prefix: The text or code placed directly in front of the input
Other field suffix: The text or code that is placed directly after the input
Other size: The size of the other option
Other maxlength: The maxlength of the other option
Other count: Determines if the maximum number is in characters or words
Select
Element Options
Options: A predefined option
Option Value: A unique value
Option Text: The text displayed on the form
Empty option label: The label displayed when no option is selected
Example: "- Select -" when no option is chosen in a drop-down menu
Empty option value: The value displayed when no option is selected
Sort options: Toggle to sort options by their label
Randomize options: Toggle to randomize the order of options
Select2: Replace the select element with a jQuery Select2 select box
Select Other
Element Options
Options: A predefined option
Option Value: A unique value
Option Text: The text displayed on the form
Empty option label: The label displayed when no option is selected
Example: "- Select -" when no option is chosen in a drop-down menu
Empty option value: The value displayed when no option is selected
Sort options: Toggle to sort options by their label
Randomize options: Toggle to randomize the order of options
Select2: Replace the select element with a jQuery Select2 select box
Other Option Settings
Other type: The appearance of the 'other' option
Other option label: The label of the 'other' option
Other title: The title of the 'other' option
Other placeholder: Placeholder text for the 'other' option
Other description: The description of the option
Other field prefix: The text or code placed directly in front of the input
Other field suffix: The text or code that is placed directly after the input
Other size: The size of the other option
Other maxlength: The maxlength of the other option
Other count: Determines if the maximum number is in characters or words
Date/Time Elements
Date
Date minimum: Specifies the minimum date
Date maximum: Specifies the maximum date
Date days of the week: Toggle the day or days of the week to appear as options
Date/time
Date Settings
Date element: How the date element is displayed on the webform
Date year range: The range of years allowed
Date minimum: Specifies the minimum date
Date maximum: Specifies the maximum date
Date days of the week: Toggle the day or days of the week to appear as options
Time Settings
Time element: How the time element is displayed on the webform
Time minimum: Specifies the minimum time
Time maximum: Specifies the maximum time
Time step: Specifies the minute intervals
Time
Use time picker: Replace the time element with a jQuery UI timepicker
Time format: How the time is displayed on the webform
Minimum: Specifies the minimum time
Maximum: Specifies the maximum time
Step: Specifies the minute intervals
File Upload Elements
Document File
File Settings
File upload destination: Where the files will be stored
File upload help display: The placement of the help text
File upload placeholder: The placeholder shown before a file is uploaded
File upload preview (Authenticated users only): How the uploaded file is previewed
Maximum file size: The maximum file size a user may upload
Allowed file extensions: The file types that a user may upload
Note:
Separate extensions with a space or comma, and do not include the dot in the file extension
Rename files: Toggle to rename uploaded files
Sanitize file name: Toggle to sanitize uploaded file names
Replace file upload input with an upload button: Toggle to replace the upload input with a clickable label styled as a button
File
File Settings
File upload destination: Where the files will be stored
File upload help display: The placement of the help text
File upload placeholder: The placeholder shown before a file is uploaded
File upload preview (Authenticated users only): How the uploaded file is previewed
Maximum file size: The maximum file size a user may upload
Allowed file extensions: The file types that a user may upload
Note:
Separate extensions with a space or comma, and do not include the dot in the file extension
Rename files: Toggle to rename uploaded files
Sanitize file name: Toggle to sanitize uploaded file names
Replace file upload input with an upload button: Toggle to replace the upload input with a clickable label styled as a button
Image file
File Settings
File upload destination: Where the files will be stored
File upload help display: The placement of the help text
File upload placeholder: The placeholder shown before a file is uploaded
File upload preview (Authenticated users only): How the uploaded file is previewed
Maximum file size: The maximum file size a user may upload
Allowed file extensions: The file types that a user may upload
Note:
Separate extensions with a space or comma, and do not include the dot in the file extension
Rename files: Toggle to rename uploaded files
Sanitize file name: Toggle to sanitize uploaded file names
Replace file upload input with an upload button: Toggle to replace the upload input with a clickable label styled as a button
Image Settings
Maximum image resolution: The maximum allowed image size is set by the input width by height
Minimum image resolution: The minimum allowed image size is set by the input width by height
Attachment image style: Select the image style used when sending files as attachments
Entity Reference Elements
Entity Checkboxes
Entity Reference Settings
Type of item to reference: The target type
Reference method: The reference method
Content type: Toggles to select one or multiple content types
Sort by: Choose how to sort the displayed information
Sort direction: Select to sort in ascending or descending order
Element Options
Options display: How the option is displayed on the webform
Randomize options: Toggle to randomize the order of options
Include 'All of the above' option: Include an option to select All of the above
Entity Select
Entity Reference Settings
Type of item to reference: The target type
Reference method: The reference method
Content type: Toggles to select one or multiple content types
Sort by: Choose how to sort the displayed information
Sort direction: Select to sort in ascending or descending order
Element Options
Options display: How the option is displayed on the webform
Randomize options: Toggle to randomize the order of options
Include 'All of the above' option: Include an option to select All of the above
Containers
Fieldset
This element has no unique option sets.
Flexbox Layout
Flexbox Settings
Align items: The alignment of the flexbox
Section
This element has no unique option sets.
Payments
Payment Information
Payment Information Settings
Visible: Toggle if the section is visible or hidden
Labels
Name: The label for the first or last name, address, city, state or province, or similar field.
Placeholder: The placeholder will be shown in the element until the user starts entering a value
Help text: A tooltip that is displayed after the title
Description: A short description of the element used as a help for the user when they use the web form
Title display: Where the tooltip is displayed after the title
Settings
Required: Check this option if the user must enter a value
Use Flexbox: If 'Automatic' is selected, Flexbox layout will only be used if a 'Flexbox layout' element is included in the web form
Select2: Replace the select element with a jQuery Select2 select box
Payment Total
Convenience Fees: A toggle to automatically include a convenience fee
Tax Rate: A toggle to automatically include a tax rate
Product
Price: The price of the product
Element Description/Help/More
Description: A short description of the element used as help for the user when they use the webform.
Help
Help title: The text displayed in the Help tooltip after the element's title.
Help text: The text displayed in the Help tooltip after the element's title.
More
More title: The clickable label used to open and close more text.
More text: A long description of the element that provides additional information, which can be opened and closed.
Form Display
Title display: Determines the placement of the title.
Description display: Determines the placement of the description.
Help display: Determines the placement of the Help tooltip.
Field prefix: 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 include $, #, and -.
Field suffix: Text or code that is placed directly after the input. This can be used to add a unit to an input. Examples include lb, kg, and %.
Minlength: The element may still be empty unless it is required.
Maxlength: Leaving blank will use the default max length.
Size: Leaving blank will use the default size.
Placeholder: The placeholder will be shown in the element until the user starts entering a value
Autocomplete: Setting autocomplete to off will disable autocompletion for this element. Select 'Autofill' to use semantic attribute values for collecting certain types of user information.
Input masks:
Input hiding: Hide the input of the element when the input is not being focused.
Disabled: Make this element non-editable with the user-entered value ignored. Useful for displaying a default value. Changeable using JavaScript.
Readonly: Make this element non-editable with the user-entered value submitted. Useful for displaying a default value. Changeable using JavaScript.
Prepopulate: Allow elements to be populated using query string parameters.
Form Validation
Required: Check this option if the user must enter a value.
Required message: If set, this message will be used when a required webform element is empty, instead of the default "Field x is required" message.
Unique: Check that all entered values for this element are unique.
Unique per entity: Check that the entered values for this element are unique for the current source entity.
Unique per user: Check that entered values for this element are unique for the current user.
Unique message: If set, this message will be used when an element's value is 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.
Pattern: A regular expression that the element's value is checked against.
Pattern regular expression: Enter a regular expression that the element's value should match
Pattern message: 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.