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 organizations.
- 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 external forms.
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 log in 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.
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.
Drag and Drop
To assist in creating a smooth and easy to use interface the builder utilizes drag and drop functionality in several areas.
- Re-order elements: You are able to click the drag handles (the 2 horizontal lines) on the far left of each element. These allow you to drag the element up or down the page to reorder your form elements.
- Move elements between pages: You are also able to use these to move the element between pages, by dragging the element and holding over the page title.
- Re-order Form Pages: Finally, you are able to re-order your form pages by dragging and dropping the page left or right to create your desired order.
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.
- 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 hardcoded 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 is 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 APIs 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 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 device's 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 buttons 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 buttons 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 numbers, checkboxes, single select, and other calculation elements and create complicated calculations with them.
- For more on the calculation element, check out 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.
Once you have finished creating your form, you can click on the Save button to save your changes.
To help streamline and organize your forms they can be broken up into separate pages. This can be done by clicking the Add Page button. Pages require a title and at least one element. Pages can also be conditionally shown to create more dynamic forms.
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 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 color.
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 that are performed after a form is successfully submitted.
To set these, select the Submission Events tab in the forms section of the console.
Submission Events can also be set up to run on a saved draft.
To implement this simply select the draft submission switch on the submission event.
This will ensure that this event ONLY occurs on a draft submission.
Submission Event Types:
- Email + PDF: Enter an email address to have a PDF document emailed, containing all of your form submission data.
- Spotto: Select this submission event type to automatically link to your Spotto account
- Webhook: Productivity will send a request to this URL on successful form submission. This is an advanced feature used for integration purposes.
- HPE Content Manager (TRIM): The Content Manager submission event allows you to post your form submissions to your TRIM backend system for more on this integration 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 submissions 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.
You can click on the submission to view the form data that was submitted for that item.
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.