The Form Builder is where you build the application form of a service. You can build visually (the Wizard: drag and drop, then set each field in a dialog) or write the form as JSON (the Code Editor). Both edit the same Formly JSON, so you can switch at any time.
Looking for a specific field type? See all form components: when to use each one, its props and JSON examples. The conventions every field must follow are in Form Rules.
¶ The Form Builder screen
| # | Part | What it does |
|---|---|---|
| 1 | Wizard | Drag-and-drop mode (the default). Shows the field palettes and a settings button on each field |
| 2 | Code Editor | Edit the whole form as JSON. The visual settings are hidden in this mode, so you need to be comfortable with Formly JSON |
| 3 | Reviews | QA feedback left on the form, if any |
| 4 | Fields palette | Basic fields (input, number, date, dropdown, radio, checkbox…) to drag onto the form. Wizard mode only |
| 5 | Widgets palette | Ready-made widgets (ID lookup, location, phone number…). Wizard mode only |
| 6 | Search | Find a field or widget in the palettes |
| 7 | Add Section | Add a new section (a page or step for the applicant) |
| 8 | Form preview | The form as you build it |
| 9 | Outline | Sections and blocks at a glance |
¶ Sections, blocks and fields
A form is a list of sections. Each section holds blocks (groups of related fields), and each block holds fields. Every field has a unique key: the workflow, the pricing rules, the certificate and the integrations all read the answer by that key.
Keys are forever. Choose clear keys before you build the workflow and certificate. Renaming a key later silently breaks every rule, price, certificate placeholder or integration that reads the old key.
¶ Field toolbar
In Wizard mode each field has a small toolbar:
| Button | What it does |
|---|---|
| Copy key | Copies the field's key, which you need in the workflow, pricing and certificate design |
| Duplicate | Clones the field with its configuration |
| Settings | Opens the field configuration dialog |
| Delete | Removes the field |
¶ Field configuration dialog
The tabs differ slightly from one field type to another.
¶ Basic
The label the applicant sees, the placeholder, the tooltip, and the hint and hint position.
¶ Validation
Make the field required and add rules (minimum and maximum length, a pattern) with their error messages. More rules: Validators.
¶ Expressions
Hide or disable the field, or compute its value, from other answers. For example, show Country only when the applicant says they are a foreigner. See Custom Expressions and Form State.
¶ JSON
The field as JSON, to set props that the dialog does not show. Each prop is documented on the field type's page in Components.
¶ Code Editor
The whole form as one JSON document. Use it to copy a form between services, bulk-edit keys, or configure widgets with many props.
¶ Learn it step by step
- A5 · Form Builder I: sections, blocks and fields Hands-on lesson in the Service Onboarding guide
- A6 · Form Builder II: the code editor and components Hands-on lesson in the Service Onboarding guide
- C2 · Fetch on the form Call a partner API from a field
Back to Form configuration.