Use Page Break fields to create multi-page forms. Users may easily navigate back and forth between the pages.
Standard field options
A Page Break field has the following options:
Field icons
Field action icons allows you to duplicate, delete, and/or move a field on the form builder page. See the field action icons article for more information.
Create a multi-page form
If you would like to create a multi-page form, the Page Break field is all you need to break the form into pages. A Page Break marks the division between pages. Simply add a Page Break field anywhere that you want a new page of your form to begin. The text on the Page Break field will be used for the 'Next' button in the form.
Note: When progressing to a subsequent page using page breaks, validation is automatically triggered for the current page. This means that any fields entered incorrectly will show errors before the user can progress to the next page.
How to set up a progress bar
Progress bars help users see where they are in the form. Additionally, your users can jump to different pages by interacting with the progress bar. Follow the steps below to add a progress bar to your form.
- Create a multi-page form or open an existing multi-page form.
- Go into the Form Settings and set the Pagination setting to Show Progress Bar.
- You can optionally change the position of the pagination, adjust the page titles, hide the page numbers, or hide the pagination lines. We recommend checking the box titled Show page titles with steps and label your pages. This helps users know which page they are on when looking at the progress bar.
The progress bar pagination is responsive and will automatically shrink on mobile.
How to set up a rootline
A rootline can help users see where they are in the form. Additionally, your users can jump to different pages by interacting with the rootline. Follow the steps below to add a rootline to your form.
- Create a multi-page form or open an existing multi-page form.
- Go into the Form Settings and set the Pagination setting to Show Rootline.
- You can optionally change the position of the pagination, adjust the page titles, hide the page numbers, or hide the pagination lines. We recommend checking the box titled Show page titles with steps and label your pages. This helps users know which page they are on when looking at the rootline.
The rootline pagination is responsive and will automatically shrink on mobile with a dropdown toggled by a new rootline item with an ellipsis.
Field Styling
If you are using a Progress bar or Rootline in a multipage form, you can customize the styling in Formidable → Styles → Progress Bars & Rootline.
- BG Color: This will adjust the background of the Progress bar, or the background of the circles in the Rootline
- Active: This will adjust the background color of whichever active page in the Progress bar or Rootline
- Color: This will adjust the color of the lines in the Progress bar, or the color of the page numbers in the Rootline
Conditional page breaks
Add conditional logic to a Page Break in order to show or hide the following page depending on a selection in the form. You may set up your form so a single page or multiple pages can be skipped conditionally to create branching forms.
Customize the Next/Previous button
Customize the text that will be shown on the Next and Previous buttons. By default, your Next and Previous buttons will match the styling of the form's Submit button.
Change Next button text
If you want to change the text for the Next button, follow the steps below.
- Go to the form builder. Click the Next button in the page break field.
- In the page break field settings, insert your custom text in the Button Label field.
Change Previous button text
If you want to change the text for the Previous button, follow the steps below.
- Go into your form Settings → Buttons.
- In the Previous Button Text box, insert your custom text.
How to progress to next page when hitting enter
If you have both the previous and next button on the same page in a multi-page form, hitting the enter key after making an entry will trigger the previous page function instead of the next page.
To retain the enter key functionality such that the form will progress to the next page, you can go to your form General Settings → Customize HTML → Submit button and replace the existing HTML with this:
<div class="frm_submit"> <button class="frm_button_submit" type="submit" [button_action]>[button_label]</button> [if back_button]<button type="submit" name="frm_prev_page" formnovalidate="formnovalidate" class="frm_prev_page" [back_hook]>[back_label]</button>[/if back_button] [if save_draft]<a href="#" tabindex="0" class="frm_save_draft" [draft_hook]>[draft_label]</a>[/if save_draft] </div>
Note: This customization will move the previous button after the Next/Submit button in the DOM tree.
Submit button on every page
If you'd like your users to be able to submit their forms and exit before they reach the last page, you can add a submit button to any pages of your form you'd like. In an HTML field, put:
<button type="submit" class="frm_page_skip" data-page="">Save</button>
You can change "Save" to whatever word(s) you want to show in the button.
If you'd like the styling to match the Next/Previous/Submit buttons, you can use this HTML:
<div class="frm_submit"><button type="submit" class="frm_page_skip" data-page="">Save</button></div>
Autosave on page turn
A multipage form can save automatically when switching between pages when saving drafts is enabled. Read more about allowing logged in users to save drafts.
Related developer hooks
- Show all fields on the final page of a multi-paged form with the frm_get_paged_fields hook.
- Remove page breaks from the admin with the frm_get_paged_fields hook.
9 Best Multi-Step Form WordPress Plugins
How To Create an Ajax Multi-Step Form in WordPress
How to Create a Multi-Step Form with Progress Bars
How to Preview Form Answers Before Submitting a WordPress Form
How to Get More Applicants From Your Employment Application Form in WordPress