¶ In this lesson you will
- Add a section, a block and a field
- Set a field's label, key, placeholder and hint
- Add validation and expressions
¶ How a form is organised
A form is a list of sections (pages or steps for the applicant). 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.
▶ Video walkthrough: watch on Loom
3. Form Builder: the empty canvas
- Wizard: drag-and-drop builder
- Code Editor: the form as JSON
- Reviews: QA feedback on the form
- Fields palette
- Widgets palette (ID lookup, location, phone...)
- Search the palette
- Add Section
- Form preview
- Outline
A section and a block, ready for fields
- New section
- New block
- Add Field
- Add Block
- Add Section
- Section or block Label
- Key
- Save
Add Field: pick a field type
- The field type list (input, number, date, dropdown, phone...)
Field settings: Basic
- Copy the key
- Duplicate
- Settings
- Delete
- Label the applicant sees
- Placeholder
- Tooltip
- Hint
- Hint Position
Field settings: Validation
- Required
- Min length
- Max length
- Pattern (regular expression)
- Save
Field settings: Expressions
- Add Expression Rule: hide, disable or compute a value from other answers
- Test the rule
- Sample model (answers) for the test
- Run
Field settings: JSON
- The field as JSON: edit props the wizard does not show
- Apply
Gotcha · 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: nothing warns you.
Tip · the reference is in the wiki
Every field option is documented in Form configuration · Overview, Custom validation, Custom string expressions and Hint and hint position.
¶ Check yourself
The certificate must print the traveller's full name. What links the certificate to the form?
- A. The field label "Full names"
- B. The field position in the block
- C. The field key, for example
FullnamesCD10 - D. The placeholder text
Show the answer
C. Workflows, prices, certificates and integrations read answers by key. Labels are translated and can change; keys cannot.
← A4 · Overview: what citizens read first · A6 · Form Builder II: the code editor and components →