Layouts & multi-step

Every form below has the same four fields. Switch the tabs and the only thing that changes is one setting, so the difference you see is the only difference there is.

None of it is in the snippet. It lives on the form, so change the layout in the builder and every site showing that form updates, without anyone touching their HTML.

Default

Comfortable spacing, all fields on one page, labels above their controls. The one to keep unless you have a reason.

<formbuilder-form form="YOUR-FORM-ID"></formbuilder-form>

Compact

Tighter rows and smaller controls, for a form that has to sit inside something else (a sidebar, a card, a checkout step) without taking over the page. Same one page, less of it.

<formbuilder-form form="YOUR-FORM-ID"></formbuilder-form>

Focused

One question per screen, with a progress bar. The whole form becomes a sequence, no page breaks needed. Suits a form that is the page, and short forms people abandon when they see the whole thing.

<formbuilder-form form="YOUR-FORM-ID"></formbuilder-form>

Multi-step

You decide where it splits: drop a page break into the form and each break starts a new step. Validation runs per step, and going back keeps what was typed.

<formbuilder-form form="YOUR-FORM-ID"></formbuilder-form>

The snippet under each tab is the same snippet. Nothing in your page knows how many steps the form has, which is what makes turning a long form into a stepper a change you can make on a Tuesday afternoon without redeploying anyone’s site.

Focused or multi-step?

Focused paginates for you: one field each, in order. Multi-step is worth the page breaks when the fields group into subjects: contact details, then the message. Split where the subject changes, not to make a long form look shorter. A visitor can tell.

A page break only pages a multi-step form

Multi-step is the only layout that reads page breaks. Leave the layout on default and the break stays in the form doing nothing. Every field renders on one page, with no warning anywhere.