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 drag-and-drop form builder to dynamically create the Forms and Resources for your application.
Our form builder, however, is very special where 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.
1
{
2
"title": "Person",
3
"display": "form",
4
"type": "form",
5
"name": "person",
6
"path": "person",
7
"components": [
8
{
9
"type": "textfield",
10
"input": true,
11
"inputType": "text",
12
"label": "First Name",
13
"key": "firstName"
14
},
15
{
16
"type": "textfield",
17
"input": true,
18
"inputType": "text",
19
"label": "Last Name",
20
"key": "lastName"
21
},
22
{
23
"type": "email",
24
"key": "email",
25
"label": "Email",
26
"inputType": "email",
27
"input": true
28
},
29
{
30
"input": true,
31
"label": "Submit",
32
"key": "submit",
33
"action": "submit",
34
"type": "button"
35
}
36
]
37
}
Copied!
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.
TO-DO: Documentation on the form settings.
Last modified 4mo ago
Copy link