Form.io Fundamentals

Most concepts in the Platform are intuitive, but it is important to understand the unique elements of what makes the Form.io Platform so powerful before proceeding

Forms

Forms are the fundamental deliverable for most users of the Form.io Platform. A form is broadly any structured request for data. Data may be entered in a variety fields of different formats, including text fields, checkboxes, drop-down select boxes, etc.

The Form.io offers two distinct form solutions:

  • PDF Forms

  • Web Forms

Regardless of which kind is used, the concept is the same: form builders use drag-and-drop components to design and build a form.

Components

Form components create the fields the form user will enter their data into. Different components are used to collect different types of data, from email addresses to. Form builders can customize these components to change the way they look and behave.

Form builders can select from a variety of different components available within the Form Builder UI

Form JSON

The layout and customization of the form and components is recorded in a JSON Schema, called the Form JSON. The Form JSON is updated in realtime as the form build makes changes in the Form Builder UI.

The JSON schema not only describes how the component will look and behave, but also how the data entered into that component will be recorded when the form is submitted by the form user.

Observe the relationship between an email component and the JSON that underpins it:

"components": [
    {
      "title": "Entrant Info",
      "key": "entrantInfo",
      "type": "panel",
      "label": "Panel",
      "input": false,
      "tableView": false,
      "components": [
        {
          "label": "Email Address",
          "applyMaskOn": "change",
          "tableView": true,
          "validate": {
            "required": true
          },

Note the way the JSON not only describes the details of the email component, it defines the panel structure that organizes it. This ensures that forms will be rendered reliably across a car

Last updated

Was this helpful?