2.4 General Settings for Selected Component

When you drag and drop a component on the Form Builder interface, a window appears in which you can configure the settings of that component. You can provide a description, select the input format, and enter the required values (which can be predefined as well). These settings, barring certain exceptions, are common for most of the components. For more information about settings, click in the Form Builder.

The following section describes the settings that are common for most of the components.

2.4.1 Display Tab

The settings available on the Display tab define how a given component appears on the form upon rendering.

The following elements are listed on the Display tab for a Text Field component:

2.4.2 Data Tab

The settings available on the Data tab allow you to define the default value and how the component appears on the form.

The following elements are listed on the Data tab for the Number component:

Multiple Values
Default Value
Use Thousands Separator
Decimal Places
Require Decimal
Input Format
Redraw On
Clear Value when Hidden
Custom Default Value
Calculated Value
Allow the calculated value to be overridden manually

2.4.3 Validation Tab

The settings available on the Validation tab allow you to add validation checks on the component. You can set the component as mandatory to ensure that the user fills it before submitting the form.

The following elements are listed on the Validation tab for the Select component:

Validate On
Required
Error Label
Custom Error Message
Custom Validation
JSONLogic Validation

2.4.4 API Tab

The settings available on the API tab allow you to define the property name and configure any custom properties for the selected component.

The following elements are listed on the API tab for the Phone Number component:

NOTE:Each component must have a unique Property Name.

2.4.5 Conditional Tab

The settings available on the Conditional tab allow you to determine the conditions for displaying or hiding the selected component in a form. You can define a simple conditional logic based on the following rules to determine when to hide or display the component:

Select True to display the component or False to hide the component.
The visibility depends on another component within the same form.
The logic is activated when the dependent component contains the defined plain text value.

In addition to simple conditional logic, you can also use advanced conditional logic, which allows you to enter custom JavaScript code or custom JSON logic for any combination of conditions.

Advanced conditional logic will override the results of the simple conditional logic.

2.4.6 Logic Tab

The settings available on the Logic tab allow you to define and configure multiple logic and actions for the selected component, which helps you design a form that can perform certain defined actions for the defined logic.

2.4.7 Layout Tab

The settings available on the Layout tab allow you to define the HTML attributes for the component and map those attributes with the component’s input element. You cannot edit the component type from the values you specify in this tab. For example, if you select a Text Field component, you cannot change the component type to a different value such as a Checkbox.