Form Building

Using the Form Builder and understanding Form JSON

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 Build UI

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.

Drag and drop a component from the left column to any place in the form

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.

Click the Edit (gear) button to edit a form component

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.

Form Builder UI

A deeper look into the Form Builder UI.

Form Components

Detailed info on Form Components.

Logic and Conditions

Customizing form behavior with Logic and Conditions.

Resources

Resources are structured data objects populated by submission data.

Submissions

Submissions are collection of data entered into a Form.

Actions

Programmatic steps taken when the Form User performs a certain behavior.