Structure 2
Group and row. In the storefront a group becomes a fieldset with its own heading, a row divides up the width.
Groups, rows and the twelve-column grid
Structure here is not a checkbox on a field, it is an element of its own. That has consequences for where something may sit and how wide it becomes.
Three kinds, 33 types
Only the third kind takes anything at all.
Content 8
Heading, vertical line, line break, free text and four message kinds. They output, they do not ask.
Input 23
The field types. Only these are validated and stored, and only these turn up in the submission.
Three rules for nesting
The editor keeps to them, and the server checks them again on save.
- 01 A group sits at the top Groups exist only at the top level. A group inside a group is not provided for.
- 02 A row sits at the top or in a group A row inside a row does not exist. That keeps the depth at three levels.
- 03 Everything else may go anywhere Inputs and content sit at the top, in a group or in a row.
The check does not only live in the editor. On save the server tidies up the parent relationships by the same rules. So a tree set by hand or through the API cannot end up in a state the output cannot render.
Six widths, and they only apply inside a row
The width is a setting on the element, not a column of its own.
| Value | Meaning | Shown as |
|---|---|---|
| 12 | full width | 1/1 |
| 9 | three quarters | 3/4 |
| 8 | two thirds | 2/3 |
| 6 | a half | 1/2 |
| 4 | a third | 1/3 |
| 3 | a quarter | 1/4 |
Twelve is the full width, and every other number is its share of it. Three fields at 4 each stand side by side, two at 6 each likewise.
If an element is not inside a row, the full width always applies. For groups and rows themselves it always applies too, which is why the outline shows a dash there instead of a fraction.
On narrow screens the storefront wraps the row. Three thirds then become three full widths below one another.
1 2 3 4 5 6 7 8 9 10 11 12
Planned quantity 4
Urgency 4
Preferred date 4
Salutation 3
First name 3
Email address 6
Above, the project row from the demo form, three times 4. Below, a mixed row: 3, 3 and 6 add up to 12 again.
Going deeper
Layout
Groups, rows and the twelve-column grid.
Fields
All 23 field types and what they do.
Validation
Mandatory fields, limits, CAPTCHA.
Conditions
Twelve operators and the OR rule.