Skip to main content

Form Builder

OBJECTIVE

This Documentation provides the convention and usage of Form Builder

FORM Builder

Form Builder is a tool for creating, customizing, and managing all the forms without needing to develop from scratch and without any manual dependency. It lessens the burden of developing from scratch and amplifies the reusability.

1.PLATFORM CORE​

  • React JS – React JS is a front-end JavaScript library
  • MUI – Material UI is a CSS framework
  • Redux – State management

HOW DOES FORM Builder WORK?​

In Form Builder, we can create and customize a form to our needs. Then It can be used in any project by using the Form Id and the NPM package named form-Builder.

HOW TO USE FORM Builder​

  1. Go to the respected URL and Login into the Form Builder

![Graphical user interface, application

Description automatically generated](/img/fc/003.png)

  1. Now, it’s navigated to this main page and it’s showing all the forms that were created as a List on this page

  1. This search box enables us to search through the list of forms by searching using Form names.

  1. To create a new form, click the Add Form button.

  1. After clicking Add Form button, it opens a drawer form. Fill necessary details and click Add form.

  1. Newly created form will be listed in the list of forms and to see the form details, click View Form

  1. View form will navigate to this page, at first it looks like the below. The Add button and Add Section will add From and Sections

As shown in the above Image, Add New Form and Section form will be open. Fill in the name, select the Form type tab, and click Add.

  1. In the Form type, the Form tab has different templates that were existing in other forms before and can be used as a template for newly created Forms.

  1. After Choosing the template and click Add button to add the form. It will look something like the below. This is the Form Builder area to build and customize the template to our needs.

  1. This “Save As Template” will save our customized newly created Form or sections to the templates, Save will save the form and the floating add button will add the new field(question) to our form or section.

![A screenshot of a computer

Description automatically generated](/img/fc/009.png)

  1. Required checkbox refers to whether or not the given field is required. And Delete will delete the field.

  1. That overview floating button will give the overview of our created Form.

  1. Each Field has settings to adjust to our required need. The settings will differ depending on the fields. In this below example image, it can set the maximum length, minimum length of the input, and Regex validation.

**

![A screenshot of a computer

Description automatically generated](/img/fc/012.png)

  1. After creating the form, each form has a unique ID and Copy the Id from the main page.

2 |** Page ©AINQA www.ainqa.com