Start a conversation

Form Component

What is a Form Component?

The form is a common component to use in your app. With it, you can gather and store information from your users, providing them with a way to interact with the app. After the form is submitted, you can automatically send an email, or prompt the user to send an email, with a generic template including the forms fields.

You can either use the existing form templates available from our Template Gallery, or create a new form from scratch. 

How to Use a Form Component

Why use a Form Component

For example, you can set up a Contact Us screen for a user to submit questions or feedback on your app.

Here is a list of some other example forms with links to articles that detail how to create them:

  1. How to make a survey form (article coming soon)

  2. How to make a registration/sign up form (article coming soon)

  3. How to make a poll (article coming soon)

Options of a Form Component

Template Gallery

These fields appear immediately after dropping a form on to your app screen.

Preview

Click this button to preview a blank form or a form template on the screen

Use

Click this button to use a blank form or a form template

Edit form

Add fields

Click this button to open the list of available fields for use with a form (see the complete list below)

Text Inputs


List of available text input fields for use with a form. The following options are common to all text input fields:

  • Field name - the name of the column in the data source

  • Field label - the text above the field on the app screen

  • Is this field required? (Yes/No)

  • Default value - the form will automatically fill this value as default, giving the user the option to change it

  • Placeholder - this can be used to describe what users can submit (eg ‘John Doe’ as  a placeholder for a name field)

Text inputs - Number input

Text input field that allows numeric entry only. It includes all of the common options above plus

  • What numbers should be allowed?

    • Allow all numbers 

    • Positive numbers only

  • Decimal places allowed

Text inputs - Password input

Text input field type that allows password entry. It includes all the common options above plus

  • Should the password be encrypted? - this will mean passwords cannot be read inside the data source

  • Should a password be automatically generated when submitting a new entry? - this will disable the field for user input

  • Ask users to confirm the password before submitting? - this will add a second input for users to enter their password again

Text inputs - Multiple line input

Text input field that allows multiple lines. It includes the common options listed above and:

  • Rows - specifies the height of the text area in lines (default 2)

Text inputs - Rich text

Text input field that allows styling the content with multiple lines of text. Styling will create HTML tags when stored in the data source. It includes the common options listed above and:

  • Rows - specifies the height of the text area in lines (default 5)

Multiple options

Multiple option fields to allow a user to select one or many options. The following fields are common to all multiple options:

  • Field name - the name of the column in the data source

  • Field label - the text above the field on the app screen 

  • Is this field required?  (Yes/No)

  • Options - add an option and hit enter for a new line

  • Default value - match one of the options from the field above to set this as the value, which the user can change.

Multiple options - Dropdown (single-select)

A single select option, the dropdown will hide value until a user clicks on it, taking up less space than radios.

  • Option placeholder - text inside the dropdown that is shown until the user interacts with the dropdown.

Multiple options - Radios (single-select)

A single select option, radios will show each option on a separate line.

Multiple options - Checkboxes (multi-select)

A multi-select option, the checkbox will show each option on a separate line. Users can select any options. 

Files

  • Image upload

  • Attach a file

File fields for use with a form. The following options are common to these fields:

  • Field name - the name of the column in the data source

  • Field label - the text above the field on the app screen

  • Is this field required? (Yes/No)

  • Set a maximum width for uploaded images (Image upload only) 

  • Set a maximum height for uploaded images (Image upload only)

  • Select the folder where the images are stored - this will store user-submitted files into the File Manager.

Formatting

  • Title

  • Paragraph

Formatting fields that are not submitted, but used to style the form:

  • Title - Text to title the form or sections of the form

  • Paragraph - Text to describe fields or other info. HTML code can be used to style this further.

  • Spacer - a horizontal line to break up larger forms

Buttons

The buttons at the bottom of the form to submit or reset the form:

  • Show submit button 

  • Submit button label - the text inside the submit button

  • Show clear button

  • Clear button label - the text inside the clear button

Advanced

  • Star rating

  • Signature

List of special fields for use with a form:

  • Field name - the name of the column in the data source

  • Field label - the text above the field on the app screen

  • Is this field required? (Yes/No)

  • Default value (For Star rating only)

  • Height (px) (For Signature only)


Settings - General

Form Name

Textbox where the name of the form can be entered

Select a data source to store form submissions

Click to select or create a data source for form submissions. For more information, see the separate article on Data Sources.


Settings - Submission

Add new submissions to a data source 

Check this box to add new form submissions to the data source. Once checked, the following fields appear:

  • Submit the form when the device is (select one of the two options):

    • Online and offline

    • Online only

  • Save users’ progress on the form (select one of the two options)

    • Always

    • Never

  • Send an email notification whenever a form is submitted - Check this box to send a configurable email notification. For more information, see the Email Template article.

Update existing entries in a data source

Check this box to allow the form to update existing entries in a data source. This requires users to have an Internet connection.

Load the data from a user’s profile

Check this box to load existing data from the data source for the signed-in user into the form. This requires users to log in to your app.

Send an email notification whenever the data is updated

This allows you to configure an email template when existing data is updated. For more information, see the Email Template article.

When the form is submitted, do you want to generate an email on the device?

Check this box to load a users’ email program and generate an email based on a configurable email template. For more information, see the Email Template article.


Settings - After the form has been submitted

Take the user to another screen

Select this to take the user to another screen after form submission. After selecting, the following fields appear:

  • Select a screen - allows selection of the screen which will appear after form submission

  • Add query parameters - allows query variables that take the user to a specific part of the screen

  • Select an animation - allows selection of the animation that will be triggered after the form submission.

Show a confirmation message

Selected by default, with an editable message template in HTML.


Form template

Set this form as a template

Check this box to set the form as a template that other users in your organization can reuse.

Form name

The name of the form template. This field appears after the’ Set this form as a template’ box is checked.

Template description

The description of the form template. This field appears after the ‘Set this form as a template’ box is checked. 

Related Articles

Email Template Provider

Configure links


Choose files or drag and drop files
Was this article helpful?
Yes
No
  1. Brett Johnson

  2. Posted
  3. Updated

Comments