The purple button labeled + CREATE NEW FORM allows users to start creating a new custom form. Clicking this button will open the form builder interface, where users can add fields and customize the form.
2. Form List
The main area lists all existing forms, displaying the following columns:
Name: The name of each form. In this case, there are two forms: “hair” and “Barber.”
Elements: Indicates the number of form elements or fields included in each form. For instance, the “hair” form has 0 elements, while the “Barber” form has 5.
Conditions: Shows the number of conditions set for each form. Conditions are rules that control the behavior of the form based on user input. The “hair” form has 0 conditions, while the “Barber” form has 1 condition.
3. Edit Button
Next to each form entry is an Edit button. Clicking this button allows users to modify the form, including adding or removing elements, updating conditions, and adjusting settings.
1. Form Customization Interface
The main area displays the form editor with the following components:
Elements: A panel on the left under “Elements” contains options for different types of form fields, including:
Label: Adds a text label.
Text Input: Creates a text field for users to enter information.
Textarea: Adds a multi-line text field.
Number Input: Allows for numerical input.
Date Input: A date selector field.
Time Input: A time selector field.
Form Section: In the center, users can drag elements from the left panel to build their form. The example in the screenshot shows a form with two fields: a text input and a number input, each with a label.
2. Form Options Panel (Right Side)
The “Options” panel on the right allows users to customize settings for each selected form element:
Label: The text displayed for the form element.
Width: Controls the width of the form element (e.g., col-md-12 for full-width).
Visibility: Options to make the field visible or hidden.
Help Text: A placeholder or tooltip for additional guidance on the field usage, with a limit of up to 500 characters.
3. Action Buttons
Form Conditions: A button to configure conditions for form logic, allowing dynamic display or hiding of fields based on user input (currently showing “0 conditions”).
Save Form: A button to save the form once customization is complete.
1. Condition Tabs (Top)
Users can create multiple conditions and switch between them using the tabs at the top labeled Condition 1, Condition 2, etc.
Each tab represents a separate conditional rule that can be applied to the form.
2. Condition Setup: “When” Section
This section specifies the condition that triggers an action.
Field: A dropdown to select the form field that will be evaluated.
Operator: A dropdown to define the comparison operator (e.g., equals =, not equals !=, etc.).
Value: The value that the selected field is compared against. If the field’s value matches this, the condition will be triggered.
New Condition: The green button allows users to add multiple conditions under the same rule.
3. Action Setup: “Do” Section
This section defines what action to take if the condition in the “When” section is met.
Action: A dropdown menu to select what action to perform, such as “Show” or “Hide” specific fields.
Field: A dropdown to choose which field will be affected by the action.
New Action: The green button allows users to add multiple actions to be triggered if the condition is met.
