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.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.
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.
Last updated
Was this helpful?