Form Building

The Form Builder uses a simple but powerful drag-and-drop interface to assemble a form. The Form Builder dynamically structures the form and its components. Components are form fields, widgets, or other inputs that collect data from the form user.

The structure of the components within the Form Builder will determine how the data is structured, as well as define the API that powers the form.

The Form.io Platform uses the layout set in the Form Builder to create a JSON schema representation of the form. A very simple example of what a schema looks like is as follows:

{
  "title": "Person",
  "display": "form",
  "type": "form",
  "name": "person",
  "path": "person",
  "components": [
    {
      "type": "textfield",
      "input": true,
      "inputType": "text",
      "label": "First Name",
      "key": "firstName"
    },
    {
      "type": "textfield",
      "input": true,
      "inputType": "text",
      "label": "Last Name",
      "key": "lastName"
    },
    {
      "type": "email",
      "key": "email",
      "label": "Email",
      "inputType": "email",
      "input": true
    },
    {
      "input": true,
      "label": "Submit",
      "key": "submit",
      "action": "submit",
      "type": "button"
    }
  ]
}

Adding a Form Component

To add a form component, drag and drop the component from palette of components on the left column into the desired location within the form.

Each new form will include a "Submit" button by default. This can be removed or edited as necessary.

To move a component, hover over the component and grab the Move arrows, the drag it to the intended location.

Editing a Form Component

To edit a form component on a form, hover over the component and click the gear icon. This presents a settings panel for the component. These settings allow form builders to customize a component, changing the way it appears or behaves. These settings include unique settings as well as General Settings found in most components.

Form Building Example

Here is a Codepen demonstration of this JSON schema building that should help provide some working examples of how this functions.

By creating this schema, this form is now capable of being dynamically rendered within an application (using Angular, React, etc). It is also used to automatically generate the REST API to support this form using the same JSON schema. This API is described below:

Where to Go Next

Read more to continue learning about Forms and the Form Builder UI.