The form builder allows users to design custom forms by configuring elements, fields, and page properties. It is divided into two main sections:

  1. Properties Panel
  2. Components Panel

Properties Panel

The Properties Panel lets users modify various aspects of the form, such as colors, layouts, and file uploads.

1. Form Properties

You can configure visual properties of the form using the "Form Properties" section:

  • Heading Color: Customize the color of form headings using a hex code (e.g., #292b6b).
  • Text Color: Set the color for general text (e.g., #5a5a5a).
  • Label Color: Choose the color for field labels (e.g., #5cadff).
  • Field Border Color: Change the border color of input fields (e.g., #d2d2d2).
  • Error Color: Define the color for error messages (e.g., #cc0000).
  • Success Color: Configure the color for success messages (e.g., #28ac00).

2. Page Properties

To upload icons for your form:

  • Use the "Upload Page Icon" feature.
  • Only SVG files are allowed.
  • Drag and drop your SVG file or use the "Open File Dialog" button to select the file.


Components Panel

The Components Panel is used to add structure and input fields to the form.

1. Elements Section

This section contains layout and structure elements:

  • PAGE: Acts as the parent container for all sections in the form.
  • SECTION: Groups multiple rows within a page.
  • ROW: Defines horizontal divisions.
  • COLUMNS (1-4): Divide rows into one to four sections for placing fields.
  • TABLE: Adds a grid-style layout for structured data input.
  • HR (Horizontal Rule): Adds a horizontal line for visual separation.

How to Use Elements

  • Drag and drop elements into the form design canvas.
  • Combine rows, columns, and fields to create a structured form.

2. Fields Section

This section includes predefined fields and the ability to create custom fields.

Predefined Fields

Examples of available fields:

  • Title: A single-select dropdown field.
  • Name Fields: First Name, Middle Name, Last Name, Applicant Full Name, Father's Name, Mother's Name, etc.
  • Marital Status: A radio group field.
  • Contact Fields: Email, Mobile Number, Country Code + Mobile Number.

Custom Fields

  • Use "Add a Custom Field" to create a field tailored to your needs.

How to Add Fields

  • Drag and drop any field into the appropriate column or section of your form.

Final Steps

  1. After designing your form, use the following buttons:
    • Exit: Close the form builder without saving.
    • Preview: View how the form will look before publishing.
    • Save: Save the form design.
  2. Ensure that all mandatory fields are correctly configured and styled before saving.

Created with the Personal Edition of HelpNDoc: Transform your help documentation into a stunning website