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.Options:
The Options section allows you to define multiple choices for Checkbox, Radio, and Select fields. These field types support multiple options that users can choose from.Option Label:
Enter the text that will be displayed to users as a selectable option.
Max Limit (Optional):
This option allows you to limit how many times a specific option can be selected across form submissions. Once the specified number of submissions is reached, that option will be automatically disabled and no longer available for selection, By default, there is no limit.
Adding and Removing options:
Click “+ Add Option” to add multiple options.
To remove an option, click the delete icon in the last column of the option row.
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 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.
J.File:
The File field is used to collect files from users through a input field.There are several configuration options available for the file input 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.Allowed file types
This field allows you to configure which file types are accepted from users during form submission.
By default, the following file types are allowed:
JPG, JPEG, PNG, PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX, TXT, CSV, ZIP, GIF
You can customize the allowed file types by selecting or deselecting the checkbox next to each file type. Multiple file types can be selected at the same time.
4.Max allowed file size (MB)
This field restricts the maximum file size that can be uploaded during form submission. Files exceeding this limit will not be accepted.
5.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.
6.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.
K.Grouped Fields:
The Grouped Fields are used to collect multiple pieces of data from users at the same time through multiple input fields. Users can add multiple rows to enter more data.There are several configuration options available for the file input Field, as explained below:
1.Field Label:
Field Label defines the name of the Grouped Field and indicates what information the user is expected to enter.
2.Description (Optional):
The Description is the place where the user can see a short description or note that they need to know while adding data.
3.Fields:
i.Label:
Enter the label here. This label will be displayed to indicate what type of data should be entered in this field, helping users understand what information is required.
ii.Type:
The Field Type defines the type of input allowed in this field. You can choose from Text, Email, Number, Date, Past Date Only (accepts only past dates), or Future Date Only (accepts only future dates).
iii.Required?:
This setting determines whether the field is required or not.
iv.Placeholder:
The placeholder text appears inside the input field to show an example or hint of what should be entered.
v.Add More:
The Add More option adds another row, creating a new set of input fields with the same options as the previous ones.
You can change the order by clicking and holding the blue icon on the left side of the label. Simply drag it with your mouse to adjust the ordering.
4.Maximum record can be add by a user:
This option allows you to set a limit on the total number of rows that users can add to enter data.
5.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.
