Skip to main content
Important Support System Updates Are Underway | Learn More...

Search

We are excited to announce the launch of updated product names, logos, and headers within our user interfaces as part of the CivicPlus® Solution Rebranding initiative. These changes mark the first step toward creating a cohesive and seamless user experience across all solutions in our portfolio. As part of this transition, users may notice minor design updates. While the functionality you rely on remains unchanged, we are in the process of updating screenshots and other resources on our Help Centers to reflect the new branding. We appreciate your patience and understanding as we work to complete these updates.

Form Element Types

  • Updated:

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

 

Article Navigation

 

User Inputs

Text

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

text element.

  • 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 Element Example.

 

Go to Article Navigation

 

Text (Multi-line)

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

Text multi-line element.

  • 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

Multi-Line Text Example.

 

Go to Article Navigation

 

Number

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

number element

  • 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

Number Element Example.

 

Go to Article Navigation

 

Email

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

Email element.

  • 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

Email Element Example.

 

Go to Article Navigation

 

Phone Number

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

Phone element.

  • 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

Phone Element Example.

 

Go to Article Navigation

 

Barcode Scanner

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

Barcode scanner element.

  • 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

Barcode Element Example.

 

Go to Article Navigation

 

User Selections

Radio Buttons

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

Radio buttons element.

  • 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
      Radio buttons custom.
      • 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
      Radio buttons list.
  • Advanced:
    • Name: This is what the element will be named when submitting data. This will not be visible to users.
    • CSS Classes: Add CSS classes to the element
    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.
    • Enable Data Lookup: Enable Data Lookup
    • Enable Element Lookup: Enable Element Lookup
    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

 

Radio Buttons Example

Radio Buttons Example.

 

Go to Article Navigation

 

Checkboxes

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

Checkboxes element.

  • 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
      Checkboxes custom.
      • 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
      Checkboxes list.
  • Advanced: 
    • Name: This is what the element will be named when submitting data. This will not be visible to users.
    • CSS Classes: Add CSS classes to the element
    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.
    • Enable Data Lookup: Enable Data Lookup
    • Enable Element Lookup: Enable Element Lookup
    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

 

Checkboxes Element Example

Checkboxes Element Example.

 

Go to Article Navigation

 

Select

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

Select element.

  • 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

Select Element Example.

 

Go to Article Navigation

 

Autocomplete

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

Autocomplete element.

  • 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

Autocomplete Element Example.

 

Go to Article Navigation

 

Switch

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

  • 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

Switch Element Example.

 

Go to Article Navigation

 

Date & Time

Date

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

Date element fields.

  • Label: This is what will be displayed to the form users
  • Placeholder: Enter placeholder text that will display in the form's field before being edited by the user
  • 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 Element Example.

 

Go to Article Navigation

 

Date and Time

Allow the user to select both the date and time.

Date and time element fields.

  • Label: This is what will be displayed to the form users
  • Placeholder: Enter placeholder text that will display in the form's field before being edited by the user
  • 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

Date and Time Example.

 

Go to Article Navigation

 

Time

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

Time element fields.

  • Label: This is what will be displayed to the form users
  • Placeholder: Enter placeholder text that will display in the form's field before being edited by the user
  • 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

Time Element Example.

 

Go to Article Navigation

 

Informational

Heading

This option allows you to add headings to your form.
Heading fields.

  • 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

Header Element Example.

 

Go to Article Navigation

 

Information

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

Informational element fields.

  • 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

Information Element Example.

 

Go to Article Navigation

 

Image

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

Image fields.

  • Label: This is what will be displayed to users
    Note: The label will be utilized as alternative (alt) text for accessibility. Utilize this guide for guidance on writing effective alt-text descriptions.
  • Add Image: Drag an image or click to upload
  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition
  • Advanced: 
    • Name: This is what the element will be named when submitting data. This will not be visible to users
    • CSS Classes: Add CSS classes to the element
    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.
    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

 

Go to Article Navigation

 

Section

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

Section element fields.

  • 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

Section Element Example.

 

Go to Article Navigation

 

Advanced Elements

Camera

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

Camera element fields.

  • 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

Camera Element Example.

 

Go to Article Navigation

 

Repeatable Set

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

 

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

Repeatable set element fields.

  • Label: This is what will be displayed to users
  • Minimum/Maximum: Specify a minimum or maximum number of sets or set to the value of another form element
    Configure minimum and maximum field.
  • Add Entry Label: Label for adding a set
  • Remove Entry Label: Label for removing a set
  • Add Entry Button Layout: 
    • Single Add Button: Displays a single add button at the end of the repeatable set. Displays the delete button at the top of each entry.
    • Multiple Add Buttons: Displays an add button between each entry. Displays the delete button at the bottom of each entry.
  • 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

Repeatable Set Example.

 

Go to Article Navigation

 

Signature

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

Signature element fields.

  • 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

Signature Example.

 

Go to Article Navigation

 

Calculation

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

Calculation element fields.

  • 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

Calculation Element Example.

 

Go to Article Navigation

 

Location

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

Location element fields.

  • 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

Location Element Example.

 

Go to Article Navigation

 

Files

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

Files element fields.

  • Label: This is what will be displayed to users
  • Minimum/Maximum: Specify a minimum and maximum number of files
  • Required: The element will be required if a value has been entered in the Minimum field
  • Read Only: Set a field to "read-only" (not requiring user input)
  • Display a Hint: Add a hint to allow the label to have more instructions. You can choose to have the hint displayed as a tooltip or below the element label. 
  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition
  • Advanced: 
    • Name: This is what the element will be named when submitting data. This will not be visible to users.
    • Storage Type: Types of storage offered for files
      • Private: Files uploaded by users will be stored securely and only accessible to those with access
      • Public: Files uploaded by users can be publicly accessible
    • CSS Classes: Add CSS classes to the element
    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.
    • Allow Extensionless Attachments: Allow users to upload files without extensions
    • Restrict File Types: Choose to specify the types of files allowed
    • Enable Data Lookup: Enable Data Lookup
    • Enable Element Lookup: Enable Element Lookup
    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

 

Files Element Example

Files Element Example.

 

Go to Article Navigation

 

Not a Robot

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

Not a robot fields.

  • 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

Not a Robot Element.

 

Go to Article Navigation

 

Form

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

Form element fields.

  • Form: Select the existing form you wish to embed
  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition
  • Advanced: Expand the menu to access the following fields:
    • Name: This is what the element will be named when submitting data. This will not be visible to users.
    • CSS Classes: Add CSS classes to the form
    • Hide Element: Hidden elements exist on the page, but are not visible to the user. This means they are included in conditional logic and dependency evaluation, as well as in the submission data.
    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume

 

Go to Article Navigation

 

Summary

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

Summary fields.

  • Label: This is what will be displayed to users
  • Elements to Summarise: Choose elements from the list
  • Show Conditionally: This option is used when you want the element to only be shown under a certain condition
  • Advanced: 
    • Name: This is what the element will be named when submitting data. This will not be visible to users.
    • CSS Classes: Add CSS classes to the element
    • Meta Data: Enter JSON to add custom configuration to this element for your developers to consume.

 

Go to Article Navigation

 

Checklist

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

Checklist element fields.

  • 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

Checklist Element Example.

 

Go to Article Navigation

 

Integration Elements

Google Address

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

Google Maps Element.

  • 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

 

Go to Article Navigation

 

ESRI ArcGIS Web Map

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

ESRI ArcGIS Web Map Element.

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

 

Go to Article Navigation

 

In-Article Glossary

  • CSS: Cascading Style Sheets

Comments

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

0 comments

Please sign in to leave a comment.