Field groups
Auto-populate and layout your form fields
Field groups are components that group fields together. They allow your fields to be neatly aligned with each other and let you style your fields with consistent label positions.
Generating fields automatically
Field groups have a powerful function that can save you a lot of time when working on Forms - they let you reset them, which automatically populates them with all the fields in your Form schema. This means you can generate a full form in one click, or you can add in missing fields if you change your schema.
When you select a field group component in the builder, you'll be able to press Update form fields
in the Settings Panel to perform this function.

Adding a form with a table schema

Update form fields

Auto-populated form fields
Form block
The Form block will also automatically include all form fields of the chosen schema by default, and allow you to choose which fields should be included.
Ejecting the form block will add a field group to the Component Tree.
Layout
In addition to auto-populating form fields, you can also use field groups to determine how the fields should be displayed. The default layout type is One column
, but you can change this to two and three columns in a couple of clicks!

Click on the 'Type' button to change the layout

Selecting 'Two columns' layout

Fields arranged in two columns
Label alignment
You can also choose whether labels are aligned to the Left or Above your fields.

Left aligned labels

Above aligned labels
It is worth noting that layout options are only available for labels that aligned Above the fields, as shown in the screenshots.
Updated about 1 year ago