Go to the Form Builder tab in the left panel, then navigate to the Forms directory.
- Select the checkbox next to the form name. An option called “Build Form” will appear in the top bar. Click on the option.
- A new window will open where you can find various fields and input types.
When you create a new form, on the form three fields are selected by default:
- First Name
- Last Name
You can add additional input fields based on your requirements from the "Create a New Field" section on the left side. This section provides different input type options that you can choose from to build your form.
- The form builder provides the following input types:
A.Text Info
B.Text
C.Text Area
D.Email
E.Date
F.Number
G.Radio
H.Checkbox
I.Select
J.File
K.Grouped Fields
- From the “Create a New Field” section, click on any of the following fields. A modal will open displaying the settings for each input field, which are explained below.
A.Text Info:
The Text Info field is used to display informational text to users.
This field allows you to show any text on the form at the position where it is placed. It can be used to display help text, instructions, or any other relevant information for users.
Note: In the input field configuration, you will find a Property Settings option. Click on it to expand additional configuration options for the input field.
B.Text:
The Text Field is used to collect text input from users.
There are several configuration options available for the Text Field, as explained below:
1.Field Label:
Field Label defines the name of the text field and indicates what information the user is expected to enter.
2.Placeholder Text (Optional)
Placeholder Text displays hint text inside the input field to guide users on what to enter. This text disappears when the user starts typing.
3.Input Mask (Optional)
Input Mask allows you to enforce a specific input format, Use the following characters to define the format:
- "* → Digits (0–9)"
- "# → Alphanumeric characters (letters and numbers)"
- "s → Letters only"
- "Any other characters will appear exactly as typed."
Example 1: Phone Number Format
To accept input in the format (123) 456 789, configure the mask as: (***) *** ***
Example 2: Mixed Characters and Numbers
To accept a combination of letters and numbers, such as (A1) 123 CA 1A2B, configure the mask as: (##) *** ss *#*#
4.Minimum Length (Optional)
The Minimum Length option allows you to enforce a minimum number of characters for the text field.
5.Maximum Length (Optional)
The Maximum Length option allows you to enforce a maximum number of characters for the text field.
6.Help text (Optional)
This is a help text that appears above the input field and below the field label. It provides a short description about the text field.
7.Is required?
This radio option allows you to decide whether the field is required or optional. Select “Yes” to make the field required, or select “No” to make the field optional.
C.Text Area
The Text Area is used to collect text input from users using a multi-line text field.
There are several configuration options available for the Text Area Field, as explained below:
1.Field Label:
Field Label defines the name of the text area field and indicates what information the user is expected to enter.
2.Placeholder Text (Optional)
Placeholder Text displays hint text inside the input field to guide users on what to enter. This text disappears when the user starts typing.
4.Minimum Length (Optional)
The Minimum Length option allows you to enforce a minimum number of characters for the multi-line text field.
5.Maximum Length (Optional)
The Maximum Length option allows you to enforce a maximum number of characters for the multi-line text field.
6.Help text (Optional)
This is a help text that appears above the input field and below the field label. It provides a short description about the multi-line text field.
7.Is required?
This radio option allows you to decide whether the field is required or optional. Select “Yes” to make the field required, or select “No” to make the field optional.
D.Email:
The Email field is used to collect email addresses from users through an input text field.
There are several configuration options available for the Email Field, as explained below:
1.Field Label:
Field Label defines the name of the text area field and indicates what information the user is expected to enter.
2.Placeholder Text (Optional)
Placeholder Text displays hint text inside the input field to guide users on what to enter. This text disappears when the user starts typing.
3.Help text (Optional)
This is a help text that appears above the input field and below the field label. It provides a short description about the email input field.
4.Is required?
This radio option allows you to decide whether the field is required or optional. Select “Yes” to make the field required, or select “No” to make the field optional.
E.Date
The Date field is used to collect date values from users through a date input field.
There are several configuration options available for the date Field, as explained below:
1.Field Label:
Field Label defines the name of the text area field and indicates what information the user is expected to enter.
2.Placeholder Text (Optional)
Placeholder Text displays hint text inside the input field to guide users on what to enter. This text disappears when the user starts typing.
3.Accept dates (Optional)
This setting determines whether the date field accepts all dates, only past dates, or only future dates. The functionality of each option is described below.
All Dates:
Allows users to select any date, including both past and future dates.
Past Dates:
Allows users to select only past dates. Future dates are disabled, so users cannot select a future date.
Future Dates:
Allows users to select only future dates. Past dates are disabled, so users cannot select a past date.
3.Help text (Optional)
This is a help text that appears above the input field and below the field label. It provides a short description about the email input field.
4.Is required?
This radio option allows you to decide whether the field is required or optional. Select “Yes” to make the field required, or select “No” to make the field optional.
F.Number:
The Date field is used to collect number values from users through a input field.
There are several configuration options available for the Number Field, as explained below:
1.Field Label:
Field Label defines the name of the text area field and indicates what information the user is expected to enter.
2.Placeholder Text (Optional)
Placeholder Text displays hint text inside the input field to guide users on what to enter. This text disappears when the user starts typing.
4.Minimum Digits(Optional)
The Minimum Length option allows you to enforce a minimum number of digits for the input field.
5.Maximum Digits(Optional)
The Maximum Length option allows you to enforce a maximum number of digits for the input field.
3.Help text (Optional)
This is a help text that appears above the input field and below the field label. It provides a short description about the email input field.
4.Is required?
This radio option allows you to decide whether the field is required or optional. Select “Yes” to make the field required, or select “No” to make the field optional.
Note: The configurations for G. Radio, H. Checkbox, and I. Select fields are largely the same. Therefore, a single example image is used to demonstrate their functionalities.
G.Radio:
Radio buttons are used to present multiple options to users, allowing them to select only one option from the list.
This input type is ideal when only a single choice is permitted.
H.Checkbox:
Checkboxes are used to present multiple options and allow users to select one or more options.
This input type is suitable when multiple selections are allowed.
I. Select
The Select field provides a dropdown list of options from which users can choose.
Depending on the configuration, users can select either a single option or multiple options from the dropdown.
The configurations:
1.Field Label:
Field Label defines the name of the text area field and indicates what information the user is expected to enter.
2.Placeholder Text (Optional)
Placeholder Text displays hint text inside the input field to guide users on what to enter. This text disappears when the user starts typing.
