Forms are the bedrock of your apps, they can be as complicated or a simplistic as you require. In this article we will cover every aspect of forms and form building.
The form list page will show you all of the forms you currently have saved in your account, as well as offering you the ability to create new forms. The form list includes a search bar which allows you to quickly filter your forms. It also includes the form description and some useful icons.
These icons can be either red or grey. If the icon is red it then this means the feature is enabled.
- The lock represents whether or not the form allows anonymous submissions.
- The arrow represents whether or not the form has any submission events.
- The form menu:
- Copy: Create a copy of the form.
- Delete: Delete the form.
- Download: This will download the JSON definition of the form, which will allow you to share to form between organisations.
- View Schema: This option allows you to view the JSON schema of that specific form.
- Convert to Info Page: This will convert the form to an information page by removing all of the form element with an input, and placing the form into the Info Pages menu.
- Migrate to Environment: This option is only available if you have configured multiple Environments for your account. For more on Environments click here.
Creating & Upload Form
On the Forms list page, you’ll see a plus button at the bottom right of your screen, hovering over this button will give you the option to add form (create a new form) or upload form (upload a forms JSON definition).
When a form is being edited the Save button will become enabled. This will allow you to save any of the changes you have made. While the Save button is enabled the form will be locked, meaning that no other users will be able to edit the form while you are editing it. This prevents the possibility of your work being overwritten. A form can be unlocked by another user if the need is required.
Form Name: The name of your form, this does not need to be unique however it should be informative and represent what will be contained inside the form. This is also the name that will appear in the app.
Description: This will be a brief description of the form and what it contains.
Tags: Tags can be used to filter and sort your forms in the forms list. For example these can be used to distinguish between internal and eternal form.
Associated Apps: Select from a drop down the apps you want this form to appear in.
Allow Anonymous Submissions: Switch (On or Off), do you want anyone to be able to access this form, or do users need to login before gaining access to the form.
Where would you like your users to go after submitting this form:
- My App: Take the user back to the app after the form has been submitted.
- Close Page: Close the tab after the form has been submitted.
- Redirect URL: This option allows you to place a redirect URL that the user will be taken to after the form has been submitted. This can be used to take users to a company website, receipt page, thank you screen etc.
Once you’ve filled out the above information, click the Save button to create your new form.
This setting allows you to configure a Start and End date and time for your forms. If the form is accessed outside of this date range the users will see an unpublished message instead of the form. The Start and End dates are both optional, if neither is configured the form is always available. If only a Start date is configured the form will only be available after that Start date. If only an End date is configured then the form will only be unavailable until that date. Then if both are set the form will only be available between the 2 configured dates.
From here you can see the information about the form,
- Form ID: The specific identifier for the form
- Created: The date and time the form was created
- Last Updated: The date and time the form was last updated
- Form link(s): The links to the apps that are contain this form.
To start building your form, click on the Builder tab in the forms menu.
You can then press the ‘ADD NEW ELEMENT’ button to create your first element. This will add a new element to the top of the form, and prompt you to select the element type and then add a label.
Clicking on an element will open the element details.
Label: This is what will be displayed to the form users.
Name: This is what the element will be named when submitting data. If you’re not sure, just leave the default option.
Hint: The can be used to add an information (i) icon to the label, allowing you to add additional information to the element.
Type: This is the type of element (such as a text box, location element, signature panel).
Default Value: (Default Empty) Some form elements can be hard coded in the forms builder to display default data. This is simply something that will appear in the input of an element when the form is rendered.
Read Only: This will make the element unable to be edited.
Required: Yes or No (Default No), this ensures that this element must be filled out before the form can be submitted.
Data Lookup and Element Lookup: These are used to call API's to either populate existing form elements with data, or create new elements.
For more on Lookups click here
Show Conditionally: This option is used when you want the element to only be shown under a certain condition.
For more on Conditional Logic click here
Types of Elements
Text: Allows a user to enter a single line of free form text.
- Text (Multi-line): Allows a user to enter a multiple lines of free form text.
- Number: Allow the user to add numbers. This will display the numerical keypad to the user for ease of use.
- Min/Max - You are able to set a minimum and maximum 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
- Email: Email Element type is used exclusively for email inputs, including a custom keyboard and email validation.
- Phone: Phone Element type is used exclusively for Phone inputs, including a custom keyboard and phone validation.
- Barcode Scanner: This element turns your devices camera into a barcode scanner, you can even restrict the specific types of barcodes you are scanning against.
Radio Button: Allow the user to select one item from a list of options
Display as Buttons - Will display the radio buttons as button instead of circles
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.
- Checkboxes: These will allow the user to tick multiple options from a list of options
Display as Buttons - Will display the checkboxes as button instead of boxes
Label - What will be displayed next to the checkbox
Value - The value that will be submitted. Use the default if you’re not sure what this is.
Select: Show a drop down select box that will allow the user to choose from a list of options.
Autocomplete: Autocomplete contains an option set, when a user starts typing in the input the options are filtered down based on the typed value.
Date & Time
Date: Allow the user to select a date. On a mobile device, this will display the native date picker.
Date From/To - You can specify that the date entered into the element must be between a start and end date.
- Date and Time: Allow the user to select both the date and time.
- Time: Allow the user to select a time. On a mobile device, this will display the native time picker.
Heading: This option allows you to add headings onto your form.
You may select multiple size options: Title (h1), Large (h2), Medium (h3), Small (h4), Normal (h5)
- Information: This can be used to add informative text to a form, for example terms and conditions.
- Image: The Image element can be used to add images to the form.
- Info Page: The info page element allows you to place an existing info page inside on another form or info page.
- 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.
- Repeatable Set: Create a repeatable set of form elements, these can be added and removed with a + (plus) and bin button.
Signature: This element allows the user to sign the form using the touch screen or moue of the device
- Calculation: This element allows you to take the input and values of number, checkboxes, single select and other calculation elements and create complicated calculations with them.
- For more on the calculation element checkout the article
- 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.
- Files:Files Element can be used to capture any external files into the form.
- Files are able to be restricted by type
- Not a Robot: This is a CAPTCHA element added an extra layer of security for your public facing forms.
- Form: The form element allows you to place an existing form inside on another form.
- Summary: The Summary element can display the inputs of other elements elsewhere in the form.
- Checklist: This element is like a radio button but includes built in conditional notes (multi-line text) and media (files)
Once you have finished creating your form, you can click on the Save button to save your changes.
The Preview button will show you a preview of your rendered form, within the builder. The preview is entirely intractable, however you are not able to submit the form from the preview.
When you make a change to the form you must save the changes before they will appear in the preview.
The preview also allows you to move between the your available apps by selecting the drop down in the top left of the preview.
Form and Info Page Elements
These elements allow you to place external forms and info pages into a form. This can be extremely useful when you have a series of elements that repeat throughout multiple forms. Instead of creating the same elements across these forms you are able to instead add a Form element and like to the form.
You are not able to link to the same form more than once in one form. However, you are able to link the same info page elements multiple times in the same form.
These could be used for something as simple as page headers or footers.
The ability to add several 'sets' of the same data multiple times can be extremely useful. In the forms builder we have an element type ‘Repeatable Set’. You are able to set a minimum and maximum number of repeatable sets. 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 colour.
When a form is submitted, the form data is automatically saved to a cloud data store.
In addition to this, you can also add other submission events which are performed after a form is successfully submitted.
For more information on Submission Events check out this article.
To view the history of forms that your users have previously submitted, select the 'Submission History' tab at the top of the screen.
The submission history will display the most recent 50 submission of the form. Continue to scroll down the screen and further items will be displayed as you scroll.
You can also select a date range to search on specific submissions, or you can search on the specific submission Id.
You can click on the submission to view the form data that was submitted for that item.
You can click on the PDF icon to download the PDF of the submission.
If a submission fails you are able to replay the specific submission events that have failed. Meaning you don't need to replay all submission events for the form. This is incredibly useful when testing, as you can make changes to the submission event, correcting any errors and then run the submission again.