Previous Step: Webform Glossary: Element Types
Article Navigation
- Element Settings
- Advanced Elements
- Composite Elements
- Markup Elements
- Options Elements
- Date/Time Elements
- File Upload Elements
- Entity Reference Elements
- Containers
- Payments
- Element Description/Help/More
- Form Display
- Form Validation
Not finding what you are looking for? View additional resources
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 feet's minimum value
- Feet maximum: Specifies the feet's 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
-
Key: A unique and machine-readable name
-
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
-
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
-
Display on: Where the text will display
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
-
Display on: Where the text will display
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 set by the input width by height
- Minimum image resolution: The minimum allowed image size 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 default value. Changeable using JavaScript.
- Readonly: Make this element non-editable with the user-entered value submitted. Useful for displaying 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 entered values for this element is 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.
Comments
Let us know what was helpful or not helpful about the article.0 comments
Please sign in to leave a comment.