Build

Form flow

Pick a form flow in the editor toolbar, above the block list. The three previews below use the same vendor intake form.

Pages shows Next and Back. Section breaks group screens. If the form has no section breaks, Pages still paginates by heading or by question.

Screenshot placeholder

Open Preview on a form with section breaks and Pages selected. Capture the first screen, the page count, and Next.

Replace this box: save a PNG at public/docs-screenshots/form-flow-pages.png

Pages preview of a vendor intake form. Page 1 of 3, with Next at the bottom.
Pages preview of a vendor intake form. Page 1 of 3, with Next at the bottom.

Stepper uses those same screens. It draws a progress line with a circle for each screen. The circle label is the section title, heading, or question. On a wide screen the circles sit in a left column. On a narrow screen they sit in a row above the form. Each circle keeps its label, including screens the respondent has not reached.

Screenshot placeholder

Open Preview on the same form with Stepper selected. Capture the left milestone column and the first screen.

Replace this box: save a PNG at public/docs-screenshots/form-flow-stepper.png

Stepper preview of the same form. A circle for About you, Your request, and Contact.
Stepper preview of the same form. A circle for About you, Your request, and Contact.

Focus shows one question at a time. It draws a progress bar and says Question instead of Page.

Screenshot placeholder

Open Preview on the same form with Focus selected. Capture the progress bar, the question count, and Continue.

Replace this box: save a PNG at public/docs-screenshots/form-flow-focus.png

Focus preview of the same form. A progress bar and Question 1 of 3.
Focus preview of the same form. A progress bar and Question 1 of 3.

The last screen sends the response. That button defaults to Submit. Change the label with Submit in the editor toolbar.