Multi-step Forms (Page Breaks)

Split a long form into several pages (steps) that visitors move through with "Next" and "Back", optionally with a progress indicator.

Entered data is kept in the browser, so moving between pages does not contact the server. Submission, validation, storage and emails behave exactly as they do in a single-page form.

Splitting the form into pages

1. In the Fields tab of the form editor, click + Add Field
2. Choose Page Break
3. In Label, enter the title of the page that starts after this break
4. Drag the break to the position where the split should happen
5. Save the form

One page break gives you two pages, two breaks give you three. Empty pages — at the start or end of the form, or between consecutive breaks — are removed automatically.

Settings

The Multi-step Form section in the Form Settings → Settings tab controls how the whole form looks.

Setting	What it does
Progress indicator	Steps (numbers and page titles) / Progress bar / None
Title of the first page	The first page has no break before it, so its title is set here. Leave empty to show only the number
Title of the confirmation step	Fill this in to add the confirmation screen as the last step of the progress indicator. Leave empty to omit it
"Next" button text	Defaults to "Next"
"Back" button text	Defaults to "Back"

If the form has no page break yet, this section shows a note saying so, and the settings have no effect.

Showing "Enter → Confirm → Done"

Enter something like "Confirm" in Title of the confirmation step and the indicator becomes "1. Your details → 2. Your request → 3. Confirm", with the same indicator shown above the confirmation screen. The setting is ignored when the form's confirmation screen is disabled.

When input is validated

Action	Behavior
Next	Validates only the fields on the current page, in the browser. If anything fails, the visitor stays on the page and it scrolls to the first error
Back	Does not validate
Continuing to the confirmation screen / submitting	Validates every field on every page on the server, as usual

If server-side validation finds an error on another page, the form moves to the first page that has an error. Errors from your own PHP validation rules are shown on the right page too.

Pressing Enter in a text field

On any page but the last, pressing Enter does not submit the form — it behaves exactly like clicking "Next".

Confirmation screen and completion

• The confirmation screen comes after the last page, using the free plugin's confirmation settings
• Its "Back" button returns to the last page. Entered values and selected files are kept
• After a successful submission, the form returns to the first page

Combining with other features

Combination	Behavior
Conditional logic	Fields hidden by a condition are skipped when "Next" validates. A whole page cannot be skipped
Field groups / repeaters	Can be placed on any page. Errors inside a row are shown on the right page
Reception control	Works together. While reception is closed, the form itself is not displayed
File uploads	Files are uploaded when the form is submitted. Going back to an earlier page does not clear the selection
Spam protection (reCAPTCHA and similar)	Appears on the last page

Accessibility

• The progress indicator is not clickable; navigation happens through "Next" and "Back"
• Each move announces something like "Step 2 of 3: Your request" to screen readers
• No field is focused automatically, so the on-screen keyboard does not open on mobile

When you use an HTML template

Note the following if you build your own layout with an input screen HTML template.

• A break appears where you write [fplant_field name="page_break_1"]. Put every break as a direct child of the same parent element
• A break cannot sit between table rows. If you use tables, use one table per page
• Do not wrap the submit button in the same element as the fields of a page, or that element is treated as part of the last page
• Write <div class="fplant-pro-progress"></div> where you want the progress indicator. Without it, the indicator is inserted at the top of the first page

Embedding

iframe embeds work as they are. When pages differ in height, the iframe scrolls internally.

JavaScript embeds (the snippet for external sites) are not supported.

Limitations

• Skipping a page with conditional logic is not supported
• Saving and resuming a partially filled form is not supported
• The browser's Back button does not move to the previous page (it leaves the page holding the form)
• The steps in the progress indicator cannot be clicked to navigate
• The "Next" button text is a per-form setting and cannot be changed per page
• Page breaks cannot be placed inside a group or repeater