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
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
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
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
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.
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:
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
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:
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
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
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
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 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.
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
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
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
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
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
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
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
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.
.png?sv=2022-11-02&spr=https&st=2025-11-19T01%3A29%3A08Z&se=2025-11-19T02%3A13%3A08Z&sr=c&sp=r&sig=3LTHjFxB4te3gcJIVVy5V%2FzypIOkxiYhTFCRGq4jSD4%3D)
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:
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.
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.
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
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
Lookup Button
Form builders can use the Lookup Button element to configure a lookup to run only when multiple elements are completed.
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
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.
Lookup Button Example
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
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.
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:
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