Form Element Types

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.

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

 

Go to Article Navigation

 

Text (Multi-line)

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

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

 

Go to Article Navigation

 

Number

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

• 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
• Show Conditionally: This option is used when you want the element to only be shown under a certain condition
• Advanced:
  • 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
  • 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

 

Go to Article Navigation

 

Email

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

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

 

Email Example

 

Go to Article Navigation

 

Phone Number

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

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

 

Go to Article Navigation

 

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.

• 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:
  • 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
  • Restrict Bar Codes: Choose the types of barcodes you scan
  • 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.

 

Barcode Element Example

 

Go to Article Navigation

 

User Selections

Radio Buttons

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

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

 

Go to Article Navigation

 

Checkboxes

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

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

 

Go to Article Navigation

 

Select

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

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

 

Select Element Example

 

Go to Article Navigation

 

Autocomplete

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

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

 

Autocomplete Element Example

 

Go to Article Navigation

 

Switch

Allow the user to toggle elements on and off to verify the information.

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

 

Go to Article Navigation

 

Date & Time

Date

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

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

 

Date Element Example

 

Go to Article Navigation

 

Date and Time

Allow the user to select both the date and time.

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

 

Date and Time Element Example

 

Go to Article Navigation

 

Time

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

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

 

Time Element Example

 

Go to Article Navigation

 

Informational

Heading

This option allows you to add headings to your form.

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

 

Go to Article Navigation

 

Information

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

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

 

Go to Article Navigation

 

Image

The Image element can be used to add images to the form.

• Label: This is what will be displayed to users
  • Note: The label will be utilized as alternative (alt) text for accessibility. Utilize this 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: 
  • 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.

 

Go to Article Navigation

 

Section

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

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

 

Go to Article Navigation

 

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.

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

 

Go to Article Navigation

 

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.

• 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
  
• Add Label: Label for adding a set
• Remove Label: Label for removing a set
• 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: 
  • 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

 

Go to Article Navigation

 

Signature

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

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

 

Go to Article Navigation

 

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. 

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

 

Go to Article Navigation

 

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.

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

 

Go to Article 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.

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

 

Go to Article Navigation

 

Not a Robot

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

• Label: This is what will be displayed to users
• 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
  • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

 

Not a Robot Example

 

Go to Article Navigation

 

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: 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: Expand the menu to access the following fields:
  • 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

 

Go to Article Navigation

 

Summary

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

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

 

Go to Article Navigation

 

Checklist

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

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

 

Go to Article Navigation

 

Integration Elements

Google Address

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

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

 

Go to Article Navigation

 

ESRI ArcGIS Web Map

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

• Label: Add a name for the element
• Web Map ID: Enter the public web map identification number
• Show Layer Panel By Default: Enable to show a layer panel for the map
• 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: 
  • 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

 

Go to Article Navigation

 

In-Article Glossary

• CSS: Cascading Style Sheets