Skip to main content

Search

Form Element Types

Clara Siegele
  • Updated

The following element types are available to add as fields when creating a form. 

 

User Inputs

user input options 

Text

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

text element detail fields

  • Label: This is what will be displayed to the form users
  • Name: This is what the element will be named when submitting data
    • Note: This will not be visible to users
  • Hint: Add a hint to allow the label to have more instructions
  • 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
  • Placeholder Value: Enter placeholder text that will display in the form's field before being edited by the user
  • Read Only: Set a field to "read-only" (not requiring user input) 
  • Required: Make a field required for submission
  • Enable Data Lookup: Enable Data Lookup
  • Enable Element Lookup: Enable Element Lookup
  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

 

Text (Multi-line)

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

multi-line text detail fields

  • Label: This is what will be displayed to the form users
  • Name: This is what the element will be named when submitting data
    • Note: This will not be visible to users
  • Hint: Add a hint to allow the label to have more instructions
  • 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
  • Placeholder Value: Enter placeholder text that will display in the form's field before being edited by the user
  • Read Only: Set a field to "read-only" (not requiring user input) 
  • Required: Make a field required for submission
  • Enable Data Lookup: Enable Data Lookup
  • Enable Element Lookup: Enable Element Lookup
  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

 

Number

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

number detail fields

  • Label: This is what will be displayed to the form users
  • Name: This is what the element will be named when submitting data
    • Note: This will not be visible to users
  • Hint: Add a hint to allow the label to have more instructions
  • Minimum/Maximum: You are able to set a minimum and maximum numbers
  • Default Value: Add default data that will populate in the field unless changed by the user before submitting
  • Placeholder Value: Enter placeholder text that will display in the form's field before being edited by the user
  • Read Only: Set a field to "read-only" (not requiring user input) 
  • Required: Make a field required for submission
  • Display as Slider - You are able to make the number element appear as a slider, this will make the min and max inputs required
  • Enable Data Lookup: Enable Data Lookup
  • Enable Element Lookup: Enable Element Lookup
  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

 

Email

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

email detail fields

  • Label: This is what will be displayed to the form users
  • Name: This is what the element will be named when submitting data
    • Note: This will not be visible to 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
  • Placeholder Value: Enter placeholder text that will display in the form's field before being edited by the user 
  • Read Only: Set a field to "read-only" (not requiring user input) 
  • Required: Make a field required for submission
  • Enable Data Lookup: Enable Data Lookup
  • Enable Element Lookup: Enable Element Lookup
  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

 

Phone Number

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

phone number detail fields

  • Label: This is what will be displayed to the form users
  • Name: This is what the element will be named when submitting data
    • Note: This will not be visible to 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
  • Placeholder Value: Enter placeholder text that will display in the form's field before being edited by the user
  • Read Only: Set a field to "read-only" (not requiring user input) 
  • Required: Make a field required for submission
  • Enable Data Lookup: Enable Data Lookup
  • Enable Element Lookup: Enable Element Lookup
  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

 

Barcode Scanner

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

barcode scanner detail fields

  • Label: This is what will be displayed to the form users
  • Name: This is what the element will be named when submitting data
    • Note: This will not be visible to 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
  • Placeholder Value: Enter placeholder text that will display in the form's field before being edited by the user
  • Restrict Bar Codes: Choose the types of barcodes you scan
  • Read Only: Set a field to "read-only" (not requiring user input) 
  • Required: Make a field required for submission
  • Enable Data Lookup: Enable Data Lookup
  • Enable Element Lookup: Enable Element Lookup
  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

 

User Selections

user selection options

 

Radio Buttons

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

radio buttons detail fields

  • Label: This is what will be displayed to the form users
  • Name: This is what the element will be named when submitting data
    • Note: This will not be visible to 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
  • Display as Buttons: Will display the radio buttons as buttons instead of circles
  • Read Only: Set a field to "read-only" (not requiring user input) 
  • Required: Make a field required for submission
  • Enable Data Lookup: Enable Data Lookup
  • Enable Element Lookup: Enable Element Lookup
  • 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

 

Checkboxes

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

checkbox detail fields

  • Label: This is what will be displayed to the form users
  • Name: This is what the element will be named when submitting data
    • Note: This will not be visible to 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
  • Display as Buttons: Will display the radio buttons as buttons instead of circles
  • Read Only: Set a field to "read-only" (not requiring user input)
  • Required: Make a field required for submission
  • Enable Data Lookup: Enable Data Lookup
  • Enable Element Lookup: Enable Element Lookup
  • 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

 

Select

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

select element detail fields

  • Label: This is what will be displayed to the form users
  • Name: This is what the element will be named when submitting data
    • Note: This will not be visible to 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
  • Allow Multiple Selections: Will display the radio buttons as buttons instead of circles
  • Read Only: Set a field to "read-only" (not requiring user input)
  • Required: Make a field required for submission
  • Enable Data Lookup: Enable Data Lookup
  • Enable Element Lookup: Enable Element Lookup
  • 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

Autocomplete

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

autocomplete detail fields

  • Label: This is what will be displayed to the form users
  • Name: This is what the element will be named when submitting data
    • Note: This will not be visible to 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
  • Placeholder Value: Enter placeholder text that will display in the form's field before being edited by the user
  • Read Only: Set a field to "read-only" (not requiring user input)
  • Required: Make a field required for submission
  • Enable Data Lookup: Enable Data Lookup
  • Enable Element Lookup: Enable Element Lookup
  • 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
      enter my own option
      • 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
      use predefined options
    • Search Via URL: Enter a Search URL
      search via URL option

 

Switch

Allow the user to toggle elements on and off to verify the information.
switch element detail fields

  • Label: This is what will be displayed to the form users
  • Name: This is what the element will be named when submitting data
    • Note: This will not be visible to users
  • Default On: Toggle the switch on unless changed by the user before submitting
  • Read Only: Set a field to "read-only" (not requiring user input)
  • Required: Make a field required for submission
  • Enable Data Lookup: Enable Data Lookup
  • Enable Element Lookup: Enable Element Lookup
  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

 

Date & Time

date and time options

 

Date

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

date element detail fields

  • Label: This is what will be displayed to the form users
  • Name: This is what the element will be named when submitting data
    • Note: This will not be visible to users
  • Hint: Add a hint to allow the label to have more instructions
  • Date From/Date To: You can specify that the date entered into the element must be between a 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
  • Placeholder Value: Enter placeholder text that will display in the form's field before being edited by the user
  • Read Only: Set a field to "read-only" (not requiring user input)
  • Required: Make a field required for submission
  • Enable Data Lookup: Enable Data Lookup
  • Enable Element Lookup: Enable Element Lookup
  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

 

Date and Time

Allow the user to select both the date and time.

date and time element detail fields

  • Label: This is what will be displayed to the form users
  • Name: This is what the element will be named when submitting data
    • Note: This will not be visible to users
  • Hint: Add a hint to allow the label to have more instructions
  • Date From/Date To: You can specify that the date/time entered into the element must be between a 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
  • Placeholder Value: Enter placeholder text that will display in the form's field before being edited by the user
  • Read Only: Set a field to "read-only" (not requiring user input)
  • Required: Make a field required for submission
  • Enable Data Lookup: Enable Data Lookup
  • Enable Element Lookup: Enable Element Lookup
  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

 

Time

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

time element detail fields

  • Label: This is what will be displayed to the form users
  • Name: This is what the element will be named when submitting data
    • Note: This will not be visible to users
  • Hint: Add a hint to allow the label to have more instructions
  • Default Value: Choose to set the default value to the time the form is viewed or enter a custom time
  • Placeholder Value: Enter placeholder text that will display in the form's field before being edited by the user
  • Read Only: Set a field to "read-only" (not requiring user input)
  • Required: Make a field required for submission
  • Enable Data Lookup: Enable Data Lookup
  • Enable Element Lookup: Enable Element Lookup
  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

 

Informational

informational options

 

Heading

This option allows you to add headings to your form.
heading element detail fields

  • Text: This is what will be displayed to users
  • Name: This is what the element will be named when submitting data
    • Note: This will not be visible to 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

 

Information

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

information element detail fields

  • Label: This is what will be displayed to users
  • Name: This is what the element will be named when submitting data
    • Note: This will not be visible to users
  • Content: Add content using the editor box
  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

Image

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

image element detail fields

  • Label: This is what will be displayed to users
  • Name: This is what the element will be named when submitting data
    • Note: This will not be visible to users
  • 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

Info Page

The info page element allows you to place an existing info page inside another form or info page. This can be extremely useful when you have a series of elements that repeat throughout multiple forms. You are able to link the same info page elements multiple times in the same form. 

info page detail fields

  • Info Page: Choose an existing info page from the drop-down list
  • Name: This is what the element will be named when submitting data
    • Note: This will not be visible to users
  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

Section

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

section element detail fields

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

advanced element options

 

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.

camera element detail fields

  • Label: This is what will be displayed to users
  • Name: This is what the element will be named when submitting data
    • Note: This will not be visible to users
  • Hint: Add a hint to allow the label to have more instructions
  • 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
    • Embedded (Deprecated): Files uploaded by users will be embedded in the submission
  • Read Only: Set a field to "read-only" (not requiring user input)
  • Required: Make a field required for submission
  • Include Timestamp Watermark: Choose to add a timestamp to the image
  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

Repeatable Set

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

 

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

repeatable set element detail fields

  • Label: This is what will be displayed to users
  • Name: This is what the element will be named when submitting data
    • Note: This will not be visible 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
  • Read Only: Set a field to "read-only" (not requiring user input)
  • Required: The element will be required if a value has been entered in the Minimum field
  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

Signature

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

signature element detail fields

  • Label: This is what will be displayed to users
  • Name: This is what the element will be named when submitting data
    • Note: This will not be visible to users
  • Hint: Add a hint to allow the label to have more instructions
  • 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
    • Embedded (Deprecated): Files uploaded by users will be embedded in the submission
  • Read Only: Set a field to "read-only" (not requiring user input)
  • Required: Make a field required for submission
  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

Calculation

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

calculation element details

  • Label: This is what will be displayed to users
  • Name: This is what the element will be named when submitting data
    • Note: This will not be visible 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
  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

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.

location element detail fields

  • Label: This is what will be displayed to users
  • Name: This is what the element will be named when submitting data
    • Note: This will not be visible to users
  • Hint: Add a hint to allow the label to have more instructions
  • Read Only: Set a field to "read-only" (not requiring user input)
  • Required: Make a field required for submission
  • Enable Data Lookup: Enable Data Lookup
  • Enable Element Lookup: Enable Element Lookup
  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

Files

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

files element detail fields

  • Label: This is what will be displayed to users
  • Name: This is what the element will be named when submitting data
    • Note: This will not be visible to users
  • Hint: Add a hint to allow the label to have more instructions
  • Minimum/Maximum: Specify a minimum and maximum number of files
  • 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
    • Embedded (Deprecated): Files uploaded by users will be embedded in the submission
  • Read Only: Set a field to "read-only" (not requiring user input)
  • Required: The element will be required if a value has been entered in the Minimum field
  • Restrict File Types: Choose to specify the types of files allowed
    restrict file types slider
  • Enable Data Lookup: Enable Data Lookup
  • Enable Element Lookup: Enable Element Lookup
  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

 

Not a Robot

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

not a robot element detail fields

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

 

Form

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

form element detail fields

  • Label: This is what will be displayed to users
  • Name: This is what the element will be named when submitting data
    • Note: This will not be visible to users
  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition

 

Summary

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

summary element detail fields

  • Label: This is what will be displayed to users
  • Name: This is what the element will be named when submitting data
    • Note: This will not be visible 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

 

Checklist

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

checklist element detail fields

  • Label: This is what will be displayed to the form users
  • Name: This is what the element will be named when submitting data
    • Note: This will not be visible to 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
  • 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
    • Embedded (Deprecated): Files uploaded by users will be embedded in the submission
  • Read Only: Set a field to "read-only" (not requiring user input) 
  • Required: Make a field required for submission
  • Enable Data Lookup: Enable Data Lookup
  • Enable Element Lookup: Enable Element Lookup
  • 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

Comments

Let us know what was helpful or not helpful about the article.

0 comments

Please sign in to leave a comment.