Skip to main content
Important Support System Updates Are Underway | Learn More...

Search

We are excited to announce the launch of updated product names, logos, and headers within our user interfaces as part of the CivicPlus® Solution Rebranding initiative. These changes mark the first step toward creating a cohesive and seamless user experience across all solutions in our portfolio. As part of this transition, users may notice minor design updates. While the functionality you rely on remains unchanged, we are in the process of updating screenshots and other resources on our Help Centers to reflect the new branding. We appreciate your patience and understanding as we work to complete these updates.

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
  • 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

 

Go to Article Navigation

 

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

 

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: How the height is formatted and displayed
  • 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

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

 

Go to Article Navigation

 

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

 

Go to Article Navigation

 

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

 

Go to Article Navigation

 

  • 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

 

Go to Article Navigation

 

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

 

Go to Article Navigation

 

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

 

Go to Article Navigation

 

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

 

Go to Article Navigation

 

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

 

Go to Article Navigation

 

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

 

Go to Article Navigation

 

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 

 

Go to Article Navigation

 

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

 

Go to Article Navigation

 

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

 

Go to Article Navigation

 

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

 

Go to Article Navigation

 

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

 

Go to Article Navigation

 

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

 

Go to Article Navigation

 

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

 

Go to Article Navigation

 

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

 

Go to Article Navigation

 

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

 

Go to Article Navigation

 

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

 

Go to Article Navigation

 

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

 

Go to Article Navigation

 

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

 

Go to Article Navigation

 

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

 

Go to Article Navigation

 

Containers

Fieldset

This element has no unique option sets.

 

Go to Article Navigation

 

Flexbox layout

  • Flexbox Settings
    • Align items: The alignment of the flexbox

 

Go to Article Navigation

 

Section

This element has no unique option sets.

 

Go to Article Navigation

 

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

 

Go to Article Navigation

 

Payment Total

  • Convenience Fees: A toggle to automatically include a convenience fee
  • Tax Rate: A toggle to automatically include a tax rate

 

Go to Article Navigation

 

Product

  • Price: The price of the product

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.