Skip to main content
Drupal 10 is coming! View the Web Open Updates article for more information...

Search

Webform Glossary: Element Type Fields

  • Updated:
Previous Step: Webform Glossary: Element Types

Article Navigation

 

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.
  • Default value: 
  • 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.

 

Go to Article Navigation

 

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.

 

Go to Article Navigation

 

Height Settings

  • Height element type: The height input method.
  • Height suffix format: The way in which height is formatted.
  • Feet minimum: Specifies the feet's minimum value.
  • Feet maximum: Specifies the feet's maximum value.

 

Go to Article Navigation

 

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.

 

Go to Article Navigation

 

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.

 

Go to Article Navigation

 

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.

 

Go to Article Navigation

 

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.

 

Go to Article Navigation

 

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.

 

Go to Article Navigation

 

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.

 

Go to Article Navigation

 

Basic Address Settings

  • Visible: Specifies 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 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: A tooltip 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 jQuery Select2 select box.

 

Go to Article Navigation

 

Element Description/Help/More

  • Description: A short description of the element used as help for the user when they use the webform.

 

Go to Article Navigation

 

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.

 

Go to Article Navigation

 

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.

 

Go to Article Navigation

 

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.

 

Go to Article Navigation

 

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.

 

Go to Article Navigation

Comments

Let us know what was helpful or not helpful about the article.

0 comments

Please sign in to leave a comment.