Form JSON

Form JSON defines the structure, appearance, and functionality of a form.

Form JSON is the schema automatically created by the Form Builder.

Every component added through the Form Builder is added to the JSON Schema behind the Form. It records every component, that component's settings and customizations, as well as how that component is organizared or structured within the form.

The JSON Schema is then used in several ways:

• Rendering the forms within a website/application .

• Generating the REST API interfaces on the server.

• Hosting the form's JSON schema at the Embed URL.

An example of a form and the resulting JSON is included below:

Form

Resulting JSON

{
  "title": "Race Registration",
  "name": "raceRegistration",
  "path": "raceregistration",
  "type": "form",
  "display": "form",
  "components": [
    {
      "title": "Entrant Info",
      "collapsible": false,
      "key": "entrantInfo",
      "type": "panel",
      "label": "Panel",
      "input": false,
      "components": [
        {
          "label": "Columns",
          "columns": [
            {
              "components": [
                {
                  "label": "First Name",
                  "applyMaskOn": "change",
                  "validate": {
                    "required": true
                  },
                  "validateWhenHidden": false,
                  "key": "firstName",
                  "type": "textfield",
                  "input": true
                }
              ],
              "width": 6,
              "size": "md",
              "currentWidth": 6
            },
            {
              "components": [
                {
                  "label": "Last Name",
                  "applyMaskOn": "change",
                  "validate": {
                    "required": true
                  },
                  "validateWhenHidden": false,
                  "key": "lastName",
                  "type": "textfield",
                  "input": true
                }
              ],
              "width": 6,
              "offset": 0,
              "size": "md",
              "currentWidth": 6
            }
          ],
          "key": "columns",
          "type": "columns",
          "input": false,
          "tableView": false
        },
        {
          "label": "Age",
          "applyMaskOn": "change",
          "mask": false,
          "tableView": false,
          "delimiter": false,
          "requireDecimal": false,
          "inputFormat": "plain",
          "truncateMultipleSpaces": false,
          "validateWhenHidden": false,
          "key": "age",
          "attributes": {
            "size": "4"
          },
          "type": "number",
          "input": true
        },
        {
          "label": "Email Address",
          "applyMaskOn": "change",
          "tableView": true,
          "validate": {
            "required": true
          },
          "validateWhenHidden": false,
          "key": "emailAddress",
          "type": "email",
          "input": true
        },
        {
          "label": "Phone Number",
          "applyMaskOn": "change",
          "tableView": true,
          "validateWhenHidden": false,
          "key": "phoneNumber",
          "type": "phoneNumber",
          "input": true
        }
      ]
    },
    {
      "type": "button",
      "label": "Submit",
      "key": "submit",
      "disableOnInvalid": true,
      "input": true,
      "tableView": false
    }
  ],
  },
}