Form Element Types

Prev Next

The following element types are available to add as fields when creating a form. View the Form Element Best Practices article for additional information.

User Inputs

Text

Allows a user to enter a single line of free-form text.

Text element details form with options for label, placeholder, and character limits.

  • Label: This is what will be displayed to the form users

  • Placeholder: Enter placeholder text that will display in the form's field before being edited by the user

  • Minimum/Maximum number of characters: Specify the number of characters, if desired

  • Default Value: Add default data that will populate the field unless changed by the user before submitting

  • Required: Make a field required for submission

  • Read Only: Set a field to "read-only" (not requiring user input)

  • Display a Hint: Add a hint to allow the label to have more instructions. You can choose to have the hint displayed as a tooltip or below the element label.

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Advanced:
    Text element advanced fields.

    • Name: This is what the element will be named when submitting data. This will not be visible to users.

    • Regular Expression (Regex) Pattern Validation: You can add specific Regex validation patterns to the element and choose a flag from the drop-down

    • CSS Classes: Add CSS classes to the element

    • Autocomplete Attributes: Add HTML autocomplete attributes to allow the user to take advantage of autofill and assistive technologies for this element. View common autocomplete element attributes.

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Enable Data Lookup: Enable Data Lookup

    • Enable Element Lookup: Enable Element Lookup

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

Text Element Example

Input field for entering a pet's name, marked with an asterisk for required information.

Text (Multi-line)

Allows a user to enter multiple lines of free-form text.

Form element details including label, placeholder, and character limits for input fields.

  • Label: This is what will be displayed to the form users

  • Placeholder: Enter placeholder text that will display in the form's field before being edited by the user

  • Minimum/Maximum number of characters: Specify the number of characters, if desired

  • Default Value: Add default data that will populate in the field unless changed by the user before submitting

  • Required: Make a field required for submission

  • Read Only: Set a field to "read-only" (not requiring user input)

  • Display a Hint: Add a hint to allow the label to have more instructions. You can choose to have the hint displayed as a tooltip or below the element label.

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Advanced:
    Text multi-line element type advanced fields.

    • Name: This is what the element will be named when submitting data. This will not be visible to users.

    • Regular Expression Pattern Validation: You can add specific Regex validation patterns to the element and choose a flag from the drop-down

    • CSS Classes: Add CSS classes to the element

    • Autocomplete Attributes: Add HTML autocomplete attributes to allow the user to take advantage of autofill and assistive technologies for this element. View common autocomplete element attributes.

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Enable Data Lookup: Enable Data Lookup

    • Enable Element Lookup: Enable Element Lookup

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

Text Multi-Line Example

Text box for user comments with an asterisk indicating required field.

Number

Allow the user to add numbers. This will display the numerical keypad to the user for ease of use.

Form fields for number element details including label, placeholder, and default value options.

  • Label: This is what will be displayed to the form users

  • Placeholder: Enter placeholder text that will display in the form's field before being edited by the user

  • Minimum/Maximum number of characters: Specify the number of characters, if desired

  • Default Value: Add default data that will populate in the field unless changed by the user before submitting

  • Required: Make a field required for submission

  • Read Only: Set a field to "read-only" (not requiring user input)

  • Display a Hint: Add a hint to allow the label to have more instructions. You can choose to have the hint displayed as a tooltip or below the element label.

  • Only allow whole numbers: Choose to only allow a user to input whole numbers

  • Display as Slider: You are able to make the number element appear as a slider. This will make the minimum and maximum inputs required.

  • Display as Currency: You can choose to show the number as currency.

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Advanced:
    Advanced fields on the Number element type.

    • Name: This is what the element will be named when submitting data. This will not be visible to users.

    • Regular Expression Pattern Validation: You can add specific Regex validation patterns to the element and choose a flag from the drop-down

    • CSS Classes: Add CSS classes to the element

    • Autocomplete Attributes: Add HTML autocomplete attributes to allow the user to take advantage of autofill and assistive technologies for this element. View common autocomplete element attributes.

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Enable Data Lookup: Enable Data Lookup

    • Enable Element Lookup: Enable Element Lookup

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

Number Element Example

Input field for entering a license number, marked with an asterisk for required.

Email

The Email element type is used exclusively for email inputs, including a custom keyboard and email validation.

Email element details with options for required, read-only, and conditional display settings.

  • Label: This is what will be displayed to the form users

  • Placeholder: Enter placeholder text that will display in the form's field before being edited by the user

  • Default Value: Add default data that will populate in the field unless changed by the user before submitting

  • Required: Make a field required for submission

  • Read Only: Set a field to "read-only" (not requiring user input)

  • Display a Hint: Add a hint to allow the label to have more instructions. You can choose to have the hint displayed as a tooltip or below the element label.

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Advanced:
    Advanced fields for the Email element type.

    • Name: This is what the element will be named when submitting data. This will not be visible to users.

    • Regular Expression Pattern Validation: You can add specific Regex validation patterns to the element and choose a flag from the drop-down

    • CSS Classes: Add CSS classes to the element

    • Autocomplete Attributes: Add HTML autocomplete attributes to allow the user to take advantage of autofill and assistive technologies for this element. View common autocomplete element attributes.

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Requires Confirmation: Toggle on to require a user to enter their email twice to confirm they entered the correct address

    • Enable Data Lookup: Enable Data Lookup

    • Enable Element Lookup: Enable Element Lookup

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

Email Example

Input field for entering an email address with a submit button.

Phone Number

The Phone Number element type is used exclusively for phone inputs, including a custom keyboard and phone validation.

Phone number element details with options for required, read-only, and conditional display.

  • Label: This is what will be displayed to the form users

  • Placeholder: Enter placeholder text that will display in the form's field before being edited by the user

  • Default Value: Add default data that will populate in the field unless changed by the user before submitting

  • Required: Make a field required for submission

  • Read Only: Set a field to "read-only" (not requiring user input)

  • Display a Hint: Add a hint to allow the label to have more instructions. You can choose to have the hint displayed as a tooltip or below the element label.

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Advanced:
    Advanced fields on the Phone element type.

    • Name: This is what the element will be named when submitting data. This will not be visible to users.

    • Regular Expression Pattern Validation: You can add specific Regex validation patterns to the element and choose a flag from the drop-down

    • CSS Classes: Add CSS classes to the element

    • Autocomplete Attributes: Add HTML autocomplete attributes to allow the user to take advantage of autofill and assistive technologies for this element. View common autocomplete element attributes.

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Enable Data Lookup: Enable Data Lookup

    • Enable Element Lookup: Enable Element Lookup

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

Phone Element Example

Input field for entering a phone number with a placeholder text.

Barcode Scanner

This element turns your device's camera into a barcode scanner, you can even restrict the specific types of barcodes you are scanning against.

Barcode scanner element details with options for label, placeholder, and default value settings.

  • Label: This is what will be displayed to the form users

  • Placeholder: Enter placeholder text that will display in the form's field before being edited by the user

  • Default Value: Add default data that will populate in the field unless changed by the user before submitting

  • Required: Make a field required for submission

  • Read Only: Set a field to "read-only" (not requiring user input)

  • Display a Hint: Add a hint to allow the label to have more instructions. You can choose to have the hint displayed as a tooltip or below the element label.

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Advanced:
    Advanced fields for the Barcode element type.

    • Name: This is what the element will be named when submitting data. This will not be visible to users.

    • Regular Expression Pattern Validation: You can add specific Regex validation patterns to the element and choose a flag from the drop-down

    • CSS Classes: Add CSS classes to the element

    • Autocomplete Attributes: Add HTML autocomplete attributes to allow the user to take advantage of autofill and assistive technologies for this element. View common autocomplete element attributes.

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Restrict Bar Codes: Choose the types of barcodes you scan

    • Enable Data Lookup: Enable Data Lookup

    • Enable Element Lookup: Enable Element Lookup

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

Barcode Element Example

Interface displaying a barcode scanning option and input field for card scanning.


User Selections

Radio Buttons

Allow the user to select one item from a list of options.

Radio buttons element details with options for customization and conditional display settings.

  • Label: This is what will be displayed to the form users

  • Default Value: Add default data that will populate in the field unless changed by the user before submitting

  • Required: Make a field required for submission

  • Read Only: Set a field to "read-only" (not requiring user input)

  • Display a Hint: Add a hint to allow the label to have more instructions. You can choose to have the hint displayed as a tooltip or below the element label.

  • Display as Buttons: Will display the radio buttons as buttons instead of circles (recommended)

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Options:

    • Custom: Manually create your own options Options for displaying elements conditionally in a user interface settings panel.

      • Show Options Conditionally: Choose to filter options by an existing form element

      • Button Color / Image: If you enabled the "Display as Buttons" feature you can choose a color or upload an image to display on the button

      • Label: The text that will be displayed next to the radio buttons

      • Value: The value that will be submitted, use the default if you’re not sure what this is

    • List: Choose from predefined lists Dropdown menu showing options for selecting playgrounds in a custom list.

  • Advanced:

    • Name: This is what the element will be named when submitting data. This will not be visible to users.

    • CSS Classes: Add CSS classes to the element

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Enable Data Lookup: Enable Data Lookup

    • Enable Element Lookup: Enable Element Lookup

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

Radio Buttons Example

Payment method options include Card, Checking, and Pay Later selections.

Checkboxes

These will allow the user to tick multiple options from a list of options

Checkboxes element details with options for required fields and display settings.

  • Label: This is what will be displayed to the form users

  • Default Value: Add default data that will populate in the field unless changed by the user before submitting

  • Required: Make a field optional, require one or more options to be selected, or require all options

  • Read Only: Set a field to "read-only" (not requiring user input)

  • Display a Hint: Add a hint to allow the label to have more instructions. You can choose to have the hint displayed as a tooltip or below the element label.

  • Display as Buttons: Will display the radio buttons as buttons instead of circles (recommended)

  • Enable Toggle All: Enables a "Select All / Deselect All" button for the element

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Options:

    • Custom: Manually create your own options Options for displaying elements conditionally in a user interface settings panel.

      • Show Options Conditionally: Choose to filter options by an existing form element

      • Button Color / Image: If you enabled the "Display as Buttons" feature you can choose a color or upload an image to display on the button

      • Label: The text that will be displayed next to the checkboxes

      • Value: The value that will be submitted, use the default if you’re not sure what this is

    • List: Choose from predefined lists Dropdown menu showing options for selecting playgrounds in a custom list.

  • Advanced:
    Advanced fields for the Checkboxes element type.

    • Name: This is what the element will be named when submitting data. This will not be visible to users.

    • CSS Classes: Add CSS classes to the element

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Enable Data Lookup: Enable Data Lookup

    • Enable Element Lookup: Enable Element Lookup

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

Checkboxes Element Example

Survey options for preferred methods of receiving information from the City.

Select

Show a drop-down select box that will allow the user to choose from a list of options.

Form element details with options for required, read-only, and multiple selections.

  • Label: This is what will be displayed to the form users

  • Default Value: Add default data that will populate in the field unless changed by the user before submitting

  • Required: Make a field required for submission

  • Read Only: Set a field to "read-only" (not requiring user input)

  • Display a Hint: Add a hint to allow the label to have more instructions. You can choose to have the hint displayed as a tooltip or below the element label.

  • Allow Multiple Selections: Will display the radio buttons as buttons instead of circles

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Options:

    • Custom: Manually create your own options

      • Label: What will be displayed next to the checkboxes

      • Value: The value that will be submitted, use the default if you’re not sure what this is

    • List: Choose from predefined lists

  • Advanced:
    Advanced fields for the Select element type.

    • Name: This is what the element will be named when submitting data. This will not be visible to users.

    • CSS Classes: Add CSS classes to the element

    • Autocomplete Attributes: Add HTML autocomplete attributes to allow the user to take advantage of autofill and assistive technologies for this element. View common autocomplete element attributes.

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Enable Data Lookup: Enable Data Lookup

    • Enable Element Lookup: Enable Element Lookup

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

Select Element Example

Dropdown menu for selecting pet type with options like Bird, Cat, Dog, and Rabbit.

Autocomplete

Autocomplete contains an option set; when a user starts typing in the input, the options are filtered down based on the typed value.

Settings for autocomplete element details including label, placeholder, and options.

  • Label: This is what will be displayed to the form users

  • Placeholder: Enter placeholder text that will display in the form's field before being edited by the user

  • Default Value: Add default data that will populate in the field unless changed by the user before submitting

  • Required: Make a field required for submission

  • Read Only: Set a field to "read-only" (not requiring user input)

  • Display a Hint: Add a hint to allow the label to have more instructions. You can choose to have the hint displayed as a tooltip or below the element label.

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Options:

    • Custom: Manually create your own options

      • Show Options Conditionally: Choose to filter options by element

      • Allow Always Display Options: Toggle on to choose an option that is always displayed

      • Label: What will be displayed next to the checkboxes

      • Value: The value that will be submitted, use the default if you’re not sure what this is

    • List: Choose from predefined lists

  • Advanced:
    Advanced fields for the Autocomplete element type.

    • Name: This is what the element will be named when submitting data. This will not be visible to users.

    • CSS Classes: Add CSS classes to the element

    • Autocomplete Attributes: Add HTML autocomplete attributes to allow the user to take advantage of autofill and assistive technologies for this element. View common autocomplete element attributes.

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Enable Data Lookup: Enable Data Lookup

    • Enable Element Lookup: Enable Element Lookup

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

Autocomplete Element Example

Dropdown menu showing playground options, highlighting Bulwinkel Park and Burnett Park.

Switch

Allow the user to toggle elements on and off to verify the information.Settings for a switch element including options for default, required, and conditional display.

  • Label: This is what will be displayed to the form users

  • Default On: Toggle the switch on unless changed by the user before submitting

  • Required: Make a field required for submission

  • Read Only: Set a field to "read-only" (not requiring user input)

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Advanced:
    Advanced fields for the Switch element type.

    • Name: This is what the element will be named when submitting data. This will not be visible to users.

    • CSS Classes: Add CSS classes to the element

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Enable Data Lookup: Enable Data Lookup

    • Enable Element Lookup: Enable Element Lookup

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

Switch Element Example

A button labeled 'Contact Me' for user interaction on a webpage.


Date & Time

Date

Allow the user to select a date. On a mobile device, this will display the native date picker.

Form fields for date selection with options for required and conditional display settings.

  • Label: This is what will be displayed to the form users

  • Placeholder: Enter placeholder text that will display in the form's field before being edited by the user

  • Date From/Date To: You can specify that the date entered into the element must be between a specific start and end date. You can also require the date to be validated against another date/date and time element, or set the date to a specific number of days before/after the form is viewed.

  • Default Value: Choose to set the default value to the date or time the form is viewed or enter a custom date

  • Required: Make a field required for submission

  • Read Only: Set a field to "read-only" (not requiring user input)

  • Display a Hint: Add a hint to allow the label to have more instructions. You can choose to have the hint displayed as a tooltip or below the element label.

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Advanced:
    Advanced fields for the Date element type.

    • Name: This is what the element will be named when submitting data. This will not be visible to users.

    • CSS Classes: Add CSS classes to the element

    • Autocomplete Attributes: Add HTML autocomplete attributes to allow the user to take advantage of autofill and assistive technologies for this element. View common autocomplete element attributes.

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Enable Data Lookup: Enable Data Lookup

    • Enable Element Lookup: Enable Element Lookup

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

Date Element Example

Calendar interface showing a date selection for cleanup in August 2023.

Date and Time

Allow the user to select both the date and time.

Form fields for date and time input with options for required and conditional display.

  • Label: This is what will be displayed to the form users

  • Placeholder: Enter placeholder text that will display in the form's field before being edited by the user

  • Date From/Date To: You can specify that the date entered into the element must be between a specific start and end date. You can also require the date to be validated against another date/date and time element, or set the date to a specific number of days before/after the form is viewed.

  • Default Value: Choose to set the default value to the date or time the form is viewed or enter a custom date/time

  • Required: Make a field required for submission

  • Read Only: Set a field to "read-only" (not requiring user input)

  • Display a Hint: Add a hint to allow the label to have more instructions. You can choose to have the hint displayed as a tooltip or below the element label.

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Advanced:
    Advanced fields for the Date and Time element type.

    • Name: This is what the element will be named when submitting data. This will not be visible to users.

    • CSS Classes: Add CSS classes to the element

    • Autocomplete Attributes: Add HTML autocomplete attributes to allow the user to take advantage of autofill and assistive technologies for this element. View common autocomplete element attributes.

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Enable Data Lookup: Enable Data Lookup

    • Enable Element Lookup: Enable Element Lookup

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

Date and Time Element Example

Date and time selection interface showing August 21, 2023, at 12:55 PM.

Time

Allow the user to select a time. On a mobile device, this will display the native time picker.

Form fields for time element details including label, placeholder, and default time options.

  • Label: This is what will be displayed to the form users

  • Placeholder: Enter placeholder text that will display in the form's field before being edited by the user

  • Default Value: Choose to set the default value to the time the form is viewed or enter a custom time

  • Required: Make a field required for submission

  • Read Only: Set a field to "read-only" (not requiring user input)

  • Display a Hint: Add a hint to allow the label to have more instructions. You can choose to have the hint displayed as a tooltip or below the element label.

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Advanced:
    Advanced fields for the Time element type.

    • Name: This is what the element will be named when submitting data. This will not be visible to users.

    • CSS Classes: Add CSS classes to the element

    • Autocomplete Attributes: Add HTML autocomplete attributes to allow the user to take advantage of autofill and assistive technologies for this element. View common autocomplete element attributes.

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Enable Data Lookup: Enable Data Lookup

    • Enable Element Lookup: Enable Element Lookup

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

Time Element Example

Input field for selecting event start time with dropdown options for hours and minutes.


Informational

Heading

This option allows you to add headings to your form.Form fields for heading element details including label, size, and CSS classes.

  • Label: This is what will be displayed to form users

  • Size: You may select multiple size options: Title (h1), Large (h2), Medium (h3), Small (h4), Normal (h5)

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Advanced:
    Advanced fields for the Heading element type.

    • Name: This is what the element will be named when submitting data. This will not be visible to users.

    • CSS Classes: Add CSS classes to the element

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

Heading Element Example

Survey title for Emerald City residents, inviting participation in community feedback.

Information

This can be used to add informative text to a form, for example, terms and conditions.

Information element details section with fields for label, content, and advanced options.

  • Label: This is what will be displayed to form users

  • Content: Add content using the editor box. All external links within the form should open in a new window.

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Advanced:
    Advanced fields for the Information element type.

    • Name: This is what the element will be named when submitting data. This will not be visible to users.

    • CSS Classes: Add CSS classes to the element

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

Information Element Example

Emerald City Resident Survey aims to improve community living, working, and recreational spaces.

Image

The Image element can be used to add images to the form. Users can crop and annotate their uploaded image before submitting the form.

Image element details section for uploading images with various input fields displayed.

  • Label: This is what will be displayed to users

    Note:

    The label will be utilized as alternative (alt) text for accessibility. Utilize a guide for guidance on writing effective alt-text descriptions.

  • Add Image: Drag an image or click to upload

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Advanced:
    Advanced fields on the Image element type.

    • Name: This is what the element will be named when submitting data. This will not be visible to users

    • CSS Classes: Add CSS classes to the element

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

Section

This adds a section to the form that can be expanded or collapsed as needed

Settings options for section elements including display hints and conditional visibility.

  • Label: This is what will be displayed to users

  • Default Collapsed: Choose to set the default section to be either expanded or collapsed

  • Display a Hint: Add a hint to allow the label to have more instructions. You can choose to have the hint displayed as a tooltip or below the element label.

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Advanced:
    Advanced fields on the Section element type.

    • CSS Classes: Add CSS classes to the element

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

Section Element Example

Disclaimer about business license information and contact details for corrections.


Advanced Elements

Camera

This will allow the user to take a photo using the native camera of their device, or allow them to upload a photo. The Camera element also allows users to annotate the image after it has been taken.

Camera element details with options for required, read-only, and conditional display settings.

  • Label: This is what will be displayed to users

  • Required: Make a field required for submission

  • Read Only: Set a field to "read-only" (not requiring user input)

  • Display a Hint: Add a hint to allow the label to have more instructions. You can choose to have the hint displayed as a tooltip or below the element label.

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Advanced:
    Advanced fields on the Camera element type.

    • Name: This is what the element will be named when submitting data. This will not be visible to users.

    • Storage Type: Types of storage offered for files

      • Private: Photos uploaded by users will be stored securely and only accessible to those with access

      • Public: Photos uploaded by users can be publicly accessible

    • CSS Classes: Add CSS classes to the element

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Include Timestamp Watermark: Choose to add a timestamp to the image

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

Camera Element Example

Button to open the camera for capturing images or videos on the interface.

Repeatable Set

Create a repeatable set of form elements, these can be added and removed with a + (plus) and bin button.

You are also able to have multiple nested repeatable sets. To represent when an element is inside a repeatable set, the element will be indented in the builder. In the form itself, the repeatable sets will be distinguished by alternating colors.

Repeatable set element details.

  • Label: This is what will be displayed to users

  • Minimum/Maximum: Specify a minimum or maximum number of sets or set to the value of another form element Configure minimum and maximum field.

  • Add Entry Label: Label for adding a set

  • Remove Entry Label: Label for removing a set

  • Add Entry Button Layout:

    • Single Add Button: Displays a single add button at the end of the repeatable set. Displays the delete button at the top of each entry.

    • Multiple Add Buttons: Displays an add button between each entry. Displays the delete button at the bottom of each entry.

  • Entry Summary: Optional summary for each entry, which is only shown when referenced in a Hint or Information element.

  • Required: The element will be required if a value has been entered in the Minimum field

  • Read Only: Set a field to "read-only" (not requiring user input)

  • Display a Hint: Add a hint to allow the label to have more instructions. You can choose to have the hint displayed as a tooltip or below the element label.

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Advanced:
    Advanced fields for the Heading element type.

    • Name: This is what the element will be named when submitting data. This will not be visible to users.

    • CSS Classes: Add CSS classes to the element

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

Repeatable Set Example

Form for reporting damaged equipment with fields for name and photo upload.

Signature

This element allows the user to sign the form using the touch screen or mouse of the device.

Settings for signature element details including required, read-only, and conditional display options.

  • Label: This is what will be displayed to users

  • Required: Make a field required for submission

  • Read Only: Set a field to "read-only" (not requiring user input)

  • Display a Hint: Add a hint to allow the label to have more instructions. You can choose to have the hint displayed as a tooltip or below the element label.

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Advanced:
    Advanced fields for the Signature element.

    • Name: This is what the element will be named when submitting data. This will not be visible to users.

    • Storage Type: Types of storage offered for files

      • Private: Files uploaded by users will be stored securely and only accessible to those with access

      • Public: Files uploaded by users can be publicly accessible

    • CSS Classes: Add CSS classes to the element

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume

Signature Element Example

Signature input area with options to clear or save the signature.

Calculation

The Calculation element allows you to take the input and values of numbers, checkboxes, single select, and other calculation elements and create complicated calculations with them.

Calculation element details with options for numeric operations and display settings.

  • Label: This is what will be displayed to users

  • Calculation: This is where the calculation for the element will be done

  • Calculation Content: This is what will be displayed once the calculation has been completed

  • Pre-calculation Content: This is what will be displayed before the calculation is completed

  • Display as Currency: Select to have any results display as a price

  • Display a Hint: Add a hint to allow the label to have more instructions. You can choose to have the hint displayed as a tooltip or below the element label.

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Advanced:
    Advanced fields for the Heading element type.

    • Name: This is what the element will be named when submitting data. This will not be visible to users.

    • CSS Classes: Add CSS classes to the element

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

Calculation Element Example

Summary of pet license fees including total amount due and taxes.

Location

The location element will display a map with the user’s current position. The user can zoom in and out, and move the pin to update their location if needed.

Settings for location element details including required and conditional display options.

  • Label: This is what will be displayed to users

  • Required: Make a field required for submission

  • Read Only: Set a field to "read-only" (not requiring user input)

  • Display a Hint: Add a hint to allow the label to have more instructions. You can choose to have the hint displayed as a tooltip or below the element label.

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Advanced:
    Advanced fields for the Location element.

    • Name: This is what the element will be named when submitting data. This will not be visible to users.

    • CSS Classes: Add CSS classes to the element

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Enable Data Lookup: Enable Data Lookup

    • Enable Element Lookup: Enable Element Lookup

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

Location Element Example

Map of Manhattan highlighting City Park Playground and nearby locations for navigation.

Files

The Files element can be used to capture any external files into the form. Files are able to be restricted by type. Learn about the File Upload Size Restrictions.

Form fields for file uploads with options for required and conditional display settings.

  • Label: This is what will be displayed to users

  • Minimum/Maximum: Specify a minimum and maximum number of files

  • Required: The element will be required if a value has been entered in the Minimum field

  • Read Only: Set a field to "read-only" (not requiring user input)

  • Display a Hint: Add a hint to allow the label to have more instructions. You can choose to have the hint displayed as a tooltip or below the element label.

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Advanced:
    Advanced fields on the Files element.

    • Name: This is what the element will be named when submitting data. This will not be visible to users.

    • Storage Type: Types of storage offered for files

      • Private: Files uploaded by users will be stored securely and only accessible to those with access

      • Public: Files uploaded by users can be publicly accessible

    • CSS Classes: Add CSS classes to the element

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Allow Extensionless Attachments: Allow users to upload files without extensions

    • Restrict File Types: Choose to specify the types of files allowed

    • Restrict File Size: Set a maximum file size (MB) that users can upload to the form

    • Enable Data Lookup: Enable Data Lookup

    • Enable Element Lookup: Enable Element Lookup

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

Files Element Example

Interface for uploading a license with a plus sign icon for adding files.

Not a Robot

This is a CAPTCHA element to add an extra layer of security for your public-facing forms.

Form fields for a 'Not a Robot' element with labels and metadata sections.

  • Label: This is what will be displayed to users

  • Advanced:
    Advanced fields on the Not a Robot element.

    • Name: This is what the element will be named when submitting data. This will not be visible to users.

    • CSS Classes: Add CSS classes to the element

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

Not a Robot Example

A reCAPTCHA verification box prompting users to confirm they are not robots.

Form

The Form element allows you to place an existing form inside another form. This can be extremely useful when you have a series of elements that repeat throughout multiple forms. You are not able to link to the same form more than once in one form.

Form Element Details fields.

  • Form: Select the existing form you wish to embed

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Advanced:
    Advanced fields for the Heading element type.

    • Name: This is what the element will be named when submitting data. This will not be visible to users.

    • CSS Classes: Add CSS classes to the form

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume

Summary

The Summary element can display the inputs of other elements elsewhere in the form.

Summary element details interface with fields for label, name, and CSS classes.

  • Label: This is what will be displayed to users

  • Elements to Summarise: Choose elements from the list

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Advanced:
    Advanced fields for the Heading element type.

    • Name: This is what the element will be named when submitting data. This will not be visible to users.

    • CSS Classes: Add CSS classes to the element

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

Checklist

The Checklist element is similar to the radio button element but includes a “Notes” (Text Multi-line) and “Media” (Files) input.

Checklist element details with options for required, read-only, and conditional display settings.

  • Label: This is what will be displayed to the form users

  • Default Value: Add default data that will populate in the field unless changed by the user before submitting

  • Required: Make a field required for submission

  • Read Only: Set a field to "read-only" (not requiring user input)

  • Display a Hint: Add a hint to allow the label to have more instructions. You can choose to have the hint displayed as a tooltip or below the element label.

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Options:

    • Custom: Manually create your own options

      • Show Options Conditionally: This option is used when you want the element to only be shown under a certain condition

      • Label: What will be displayed next to the checkboxes

      • Value: The value that will be submitted, use the default if you’re not sure what this is

    • List: Choose from predefined lists

  • Advanced:
    Advanced fields for the Checklist element type.

    • Name: This is what the element will be named when submitting data. This will not be visible to users.

    • Storage Type: Types of storage offered for files

      • Private: Media uploaded by users will be stored securely and only accessible to those with access

      • Public: Media uploaded by users can be publicly accessible

    • CSS Classes: Add CSS classes to the element

    • Autocomplete Attributes: Add HTML autocomplete attributes to allow the user to take advantage of autofill and assistive technologies for this element. View common autocomplete element attributes.

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Enable Data Lookup: Enable Data Lookup

    • Enable Element Lookup: Enable Element Lookup

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

Checklist Element Example

Trail cleanup checklist with options for different trails and sections for notes and media.

Lookup Button

Form builders can use the Lookup Button element to configure a lookup to run only when multiple elements are completed.

Lookup button customization options with toggle switches for data and element lookup settings.

  • Label: This is what will be displayed to the form users

  • Dependencies: Select the form elements that you wish to use in the lookup

  • Enable Data Lookup: Enabling data lookup will place a button adjacent to this element on the form and call the configured API below when clicked to return form data

  • Enable Element Lookup: Enabling element lookup will place a button adjacent to this element on the form and call the configured API below when clicked to return form elements

  • Is the lookup required?

    • Based on dependencies: The lookup will be required if any of its dependencies are required.

    • Optional: The user does not need to run the lookup when completing the form.

    • Required: The user must run the lookup when completing the form.

  • Display a Hint: Add a hint to allow the label to have more instructions. You can choose to have the hint displayed as a tooltip or below the element label.

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Advanced:
    Advanced fields for the Heading element type.

    • Name: This is what the element will be named when submitting data. This will not be visible to users.

    • CSS Classes: Add CSS classes to the element

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

Lookup Button Example

An example of the Lookup button on the front-end of a form.


Integration Elements

Google Address

The Google Address element allows you to integrate a Google map into your form.

Google Address Element settings with options for label, placeholder, and attributes.

  • Label: Add a name for the element

  • Placeholder: Enter placeholder text that will display in the form's field before being edited by the user

  • Required: Make a field required for submission

  • Read Only: Set a field to "read-only" (not requiring user input)

  • Display a hint: Add a hint to allow the label to have more instructions. You can choose to have the hint displayed as a tooltip or below the element label.

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Advanced:
    Advanced fields on the Google Address element type.

    • Name: This is what the element will be named when submitting data (not visible to users)

    • CSS Classes: Add CSS classes to the element

    • Autocomplete Attributes: Add HTML autocomplete attributes to allow the user to take advantage of autofill and assistive technologies for this element. View common autocomplete element attributes.

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Enable Data Lookup: Enable Data Lookup

    • Enable Element Lookup: Enable Element Lookup

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume

ESRI ArcGIS Web Map

The Esri ArcGIS Web Map element allows you to integrate an ESRI map into your form.

The ESRI ArcGIS Web Map Element Details fields

  • Label: Add a name for the element

  • Web Map ID: Enter the public web map identification number or leave empty to use a generic map

  • Basemap ID: Enter the identification number for your basemap

  • Allowed Drawing Tools: Select the tool(s) you want to allow users to use to draw on the map

    • Edit Graphic Button Attributes: Configure graphic attribute options for individual drawing tools

  • Show Layer Panel By Default: Enable to show a layer panel for the map

  • Show Address Search Widget: Toggle on to show the search widget on the map

  • Show Home Widget: Toggle on to show the home widget on the map

  • Show Measurement Details: Enable dimensions on polyline and polygon drawings

  • Required: Make the element required for submitting the form

  • Read Only: Set the field to "read-only" (not allowing user input)

  • Display a hint: Add a hint to allow the label to have more instructions. You can choose to have the hint displayed as a tooltip or below the element label.

  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

  • Advanced:
    Advanced fields on the Esri element type.

    • Name: This is what the element will be named when submitting data (not visible to users)

    • CSS Classes: Add CSS classes to the element

    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.

    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume