Form Building

Build Forms and JSON Schemas at the same time with the easy to use Form Builder

One major capability of Form.io is that it leverages an easy to use drag-and-drop form builder to dynamically create the Forms and Resources for your application.

Our form builder is unique that instead of building an HTML form, it instead generates a JSON schema representation of the form or resource. 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"
    }
  ]
}

A Form component collects user data and serves as the display or user interface within the system. Form components define the type of widget that users will enter their data and will automatically add a property to the resource endpoint to interact with the Form component.

Adding a Form Component

To add a form component, drag and drop the component from 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

Editing a Form Component

To edit a form component on a form, hover over the component and click the gear icon. You will then be presented with a settings form for the component. Th usee settings for a form component 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 the Serverless application (using Angular, React, etc), but is also used to automatically generate the REST API to support this form using the same JSON schema. This API can be viewed as follows.