Form builder allows the user(s) to create form templates using the various form component types such as text, number, checkbox, dropdown, grouped under the Basic or Advanced Layout, and Data options along the left-hand side which can be added to the form.
On the top of the builder, User(s) will see “Name” field to enter the name of the form template.
The “Form Layout” field defines the form layout of the template between ‘Form’ (all fields on a single page) or ‘Wizard’ (a form with multiple switchable pages).
The “Form Type” field defines the type and usage of the template as Client Form (to be used under Other Forms tab) or Assessment.
Add a Form Component (i.e. Field Type)
To add a component to a form, click, drag, and drop the component from the left column into the desired location within the form.
Complete Necessary Fields in the Edit Component Box
Every component offers various settings which need to be completed before the component can be used as part of the form. Below is a list of general settings that are offered for most components.
Label - The name or title for this component.
Hide Label - Hide the label of this component. This setting will display the label in the form builder but hide the label when the form is used within a Client form.
Label Position - Position for the label for this component.
Placeholder - The placeholder text that will appear when this field is empty.
Description - Text which will appear below the component while using the form.
Tooltip - Adds a tooltip icon to the side of this field. You can add a description of what the field needs.
Error Label - The label that will display for the field when a validation error message is shown.
Input Mask - An input mask helps the user(s) with input by ensuring a predefined format. For a phone number field, the input mask defaults to (999) 999-9999. Here are the placeholders used to set up the mask.
9: numeric (number only)
a: alphabetical (letter only)
*: alphanumeric (numbers and letters)
Allow Multiple Masks - This setting allows you to set multiple input masks for the field. The mask is selected by the user(s) via a dropdown list and will dynamically switch the mask for the field when selected.
Prefix - The text to show before a field. An example is ‘$’ for money.
Suffix - The text to show after a field. An example would be ‘lbs’ for weight.
Editing a Form Component
To edit a component on a form, hover over the component and click the ‘gear’ icon. You will then be presented with a settings form for the component. The settings for a form component are different for each component type.
Add conditional display logic
Any form component can be configured with conditional logic to determine when to hide or display itself. The settings for a conditional field are configured on the component itself and can be found by viewing the Conditional tab within the component’s settings.
The conditional logic is based on the following rules:
Select if you want to show or hide the selected component by attaching it to another form component’s value.
Example -