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

user input options

Text

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

Label: This is what will be displayed to the form users
Hint: Add a hint to allow the label to have more instructions
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)
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
  - Note: 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
- Enable Data Lookup: Enable Data Lookup
- Enable Element Lookup: Enable Element Lookup
- Meta Data: Enter JSON above to add custom configuration to this element for your developers to consume.

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
Hint: Add a hint to allow the label to have more instructions
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)
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
  - Note: 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
- Enable Data Lookup: Enable Data Lookup
- Enable Element Lookup: Enable Element Lookup
- Meta Data: Enter JSON above to add custom configuration to this element for your developers to consume.

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
Hint: Add a hint to allow the label to have more instructions
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)
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 min and max 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
  - Note: 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
- Enable Data Lookup: Enable Data Lookup
- Enable Element Lookup: Enable Element Lookup
- Meta Data: Enter JSON above to add custom configuration to this element for your developers to consume.

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
Hint: Add a hint to allow the label to have more instructions
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)
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
  - Note: 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
- Enable Data Lookup: Enable Data Lookup
- Enable Element Lookup: Enable Element Lookup
- Meta Data: Enter JSON above to add custom configuration to this element for your developers to consume.

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
Hint: Add a hint to allow the label to have more instructions
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)
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
  - Note: 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
- Enable Data Lookup: Enable Data Lookup
- Enable Element Lookup: Enable Element Lookup
- Meta Data: Enter JSON above to add custom configuration to this element for your developers to consume.

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
Hint: Add a hint to allow the label to have more instructions
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)
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
  - Note: 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
- Enable Data Lookup: Enable Data Lookup
- Enable Element Lookup: Enable Element Lookup
- Meta Data: Enter JSON above to add custom configuration to this element for your developers to consume.

User Selections

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
Hint: Add a hint to allow the label to have more instructions
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 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:
- Enter My Own: 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
- Use Predefined: Choose from a list of predefined option sets
Advanced:
- Name: This is what the element will be named when submitting data
  - Note: This will not be visible to users
- CSS Classes: Add CSS classes to the element
- Enable Data Lookup: Enable Data Lookup
- Enable Element Lookup: Enable Element Lookup
- Meta Data: Enter JSON above to add custom configuration to this element for your developers to consume.

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
Hint: Add a hint to allow the label to have more instructions
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 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:
- Enter My Own: 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
- Use Predefined: Choose from a list of predefined option sets
Advanced:
- Name: This is what the element will be named when submitting data
  - Note: This will not be visible to users
- CSS Classes: Add CSS classes to the element
- Enable Data Lookup: Enable Data Lookup
- Enable Element Lookup: Enable Element Lookup
- Meta Data: Enter JSON above to add custom configuration to this element for your developers to consume.

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
Hint: Add a hint to allow the label to have more instructions
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)
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:
- Enter My Own: 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
- Use Predefined: Choose from a list of predefined option sets
Advanced:
- Name: This is what the element will be named when submitting data
  - Note: This will not be visible to users
- CSS Classes: Add CSS classes to the element
- Enable Data Lookup: Enable Data Lookup
- Enable Element Lookup: Enable Element Lookup
- Meta Data: Enter JSON above to add custom configuration to this element for your developers to consume.

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
Hint: Add a hint to allow the label to have more instructions
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)
Show Conditionally: This option is used when you want the element to only be shown under a certain condition
Options:
- Enter My Own: Manually create your own options
  - Show Options Conditionally: Choose to filter options by element
  - 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
- Use Predefined: Choose from a list of predefined option sets
- Search Via URL: Enter a Search URL
Advanced:
- Name: This is what the element will be named when submitting data
  - Note: This will not be visible to users
- CSS Classes: Add CSS classes to the element
- Enable Data Lookup: Enable Data Lookup
- Enable Element Lookup: Enable Element Lookup
- Meta Data: Enter JSON above to add custom configuration to this element for your developers to consume.

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
  - Note: This will not be visible to users
- CSS Classes: Add CSS classes to the element
- Enable Data Lookup: Enable Data Lookup
- Enable Element Lookup: Enable Element Lookup
- Meta Data: Enter JSON above to add custom configuration to this element for your developers to consume.

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
Hint: Add a hint to allow the label to have more instructions
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
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)
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
  - Note: This will not be visible to users
- CSS Classes: Add CSS classes to the element
- Enable Data Lookup: Enable Data Lookup
- Enable Element Lookup: Enable Element Lookup
- Meta Data: Enter JSON above to add custom configuration to this element for your developers to consume.

Date and Time

Allow the user to select both the date and time.

Label: This is what will be displayed to the form users
Hint: Add a hint to allow the label to have more instructions
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/time entered into the element must be between a specific start and end date/time
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)
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
  - Note: This will not be visible to users
- CSS Classes: Add CSS classes to the element
- Enable Data Lookup: Enable Data Lookup
- Enable Element Lookup: Enable Element Lookup
- Meta Data: Enter JSON above to add custom configuration to this element for your developers to consume.

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
Hint: Add a hint to allow the label to have more instructions
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)
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
  - Note: This will not be visible to users
- CSS Classes: Add CSS classes to the element
- Enable Data Lookup: Enable Data Lookup
- Enable Element Lookup: Enable Element Lookup
- Meta Data: Enter JSON above to add custom configuration to this element for your developers to consume.

Informational

informational elements

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
  - Note: This will not be visible to users
- CSS Classes: Add CSS classes to the element
- Meta Data: Enter JSON above to add custom configuration to this element for your developers to consume.

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
- Note: 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
  - Note: This will not be visible to users
- CSS Classes: Add CSS classes to the element
- Meta Data: Enter JSON above to add custom configuration to this element for your developers to consume.

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
  - Note: This will not be visible to users
- CSS Classes: Add CSS classes to the element
- Meta Data: Enter JSON above 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
Hint: Add a hint to allow the label to have more instructions
Default Collapsed: Choose to set the default section to be either expanded or collapsed
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
- Meta Data: Enter JSON above to add custom configuration to this element for your developers to consume.

Advanced Elements

advanced elements

Camera

This will allow the user to take a photo using the native camera of their device, or allow you 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
Hint: Add a hint to allow the label to have more instructions
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
  - Note: 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
- Include Timestamp Watermark: Choose to add a timestamp to the image
- Meta Data: Enter JSON above to add custom configuration to this element for your developers to consume.

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
Hint: Add a hint to allow the label to have more instructions
Minimum/Maximum: Specify a minimum or maximum number of sets
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)
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
  - Note: This will not be visible to users
- CSS Classes: Add CSS classes to the element
- Meta Data: Enter JSON above to add custom configuration to this element for your developers to consume.

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
Hint: Add a hint to allow the label to have more instructions
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
  - Note: 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 above to add custom configuration to this element for your developers to consume

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
Hint: Add more instructions to the label
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
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
  - Note: This will not be visible to users
- CSS Classes: Add CSS classes to the element
- Meta Data: Enter JSON above to add custom configuration to this element for your developers to consume.

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
Hint: Add a hint to allow the label to have more instructions
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
  - Note: This will not be visible to users
- CSS Classes: Add CSS classes to the element
- Enable Data Lookup: Enable Data Lookup
- Enable Element Lookup: Enable Element Lookup
- Meta Data: Enter JSON above to add custom configuration to this element for your developers to consume.

Files

The Files element can be used to capture any external files into the form. Files are able to be restricted by type.

Label: This is what will be displayed to users
Hint: Add a hint to allow the label to have more instructions
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)
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
  - Note: 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
- 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 above to add custom configuration to this element for your developers to consume.

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
  - Note: This will not be visible to users
- CSS Classes: Add CSS classes to the element
- Meta Data: Enter JSON above to add custom configuration to this element for your developers to consume.

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
  - Note: This will not be visible to users
- CSS Classes: Add CSS classes to the form
- 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
  - Note: This will not be visible to users
- CSS Classes: Add CSS classes to the element
- Meta Data: Enter JSON above 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
Hint: Add a hint to allow the label to have more instructions
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)
Show Conditionally: This option is used when you want the element to only be shown under a certain condition
Options:
- Enter My Own: 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
- Use Predefined: Choose from a list of predefined option sets
Advanced:
- Name: This is what the element will be named when submitting data
  - Note: 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
- Enable Data Lookup: Enable Data Lookup
- Enable Element Lookup: Enable Element Lookup
- Meta Data: Enter JSON above to add custom configuration to this element for your developers to consume.

Search

Form Element Types