Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

Page Break

Last Updated: September 17, 2021

Knowledge Base → Forms → Form Building → Field Types → Page Break

— Premium Feature —

Use Page Break fields to create multi-page forms. Users may easily navigate back and forth between the pages.
Page Break Previous Next

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!
Subscribe on YouTube

Standard field options

A Page Break field has the following options:
Page Break Field options

  • Field Key
  • Conditional logic

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.

Hitting the enter key will trigger the previous page button instead of the next page button. If you want to progress to the next page, follow these instructions.

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.
progress-bar

  1. Create a multi-page form or open an existing multi-page form.
  2. Go into the Form Settings and set the Pagination setting to Show Progress Bar.
    WordPress forms progress bar setting
  3. 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.
    General Form Settings - Show Page Titles

The progress bar pagination is responsive and will automatically shrink on mobile.
WordPress Form show progress bar setting responsive

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.
Form rootline

  1. Create a multi-page form or open an existing multi-page form.
  2. Go into the Form Settings and set the Pagination setting to Show Rootline.
    WordPress form show rootline setting
  3. 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.
    General Form Settings - Show Page Titles

The rootline pagination is responsive and will automatically shrink on mobile with a dropdown toggled by a new rootline item with an ellipsis.
WordPress Form show rootline setting responsive

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.
Pagination Styling

  • 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.
Page Break Conditional

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.

  1. Go to the form builder. Click the Next button in the page break field.
    Page Break Next Button
  2. In the page break field settings, insert your custom text in the Button Label field.
    Page Break Next Button Text Field

Change Previous button text

If you want to change the text for the Previous button, follow the steps below.

  1. Go into your form Settings → Buttons.
  2. In the Previous Button Text box, insert your custom text.
    Page Break Previous 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.

Related Articles

  • The Best WordPress Ajax Form Plugin (And How to Use It) The Best WordPress Ajax Form Plugin (And How to Use It)
    Read More
    How to Create an Ajax Multi-Step Form in WordPress How to Create an Ajax Multi-Step Form in WordPress
    Read More
    How to Build a Multi-Step Form in WordPress How to Build a Multi-Step Form in WordPress
    Read More
  • How to Preview Form Answers Before Submitting a WordPress Form How to Preview Form Answers Before Submitting a WordPress Form
    Read More
    How to Create an Employment Application Form in WordPress How to Get More Applicants From Your Employment Application Form in WordPress
    Read More
  • Standard field options
  • Field icons
  • Create a multi-page form
  • How to set up a progress bar
  • How to set up a rootline
  • Field Styling
  • Conditional page breaks
  • Customize the Next/Previous button
    • Change Next button text
    • Change Previous button text
  • How to progress to next page when hitting enter
  • Submit button on every page
  • Autosave on page turn
  • Related developer hooks
  • Related Articles
Categories
×

Categories

  • Installation & Getting Started
  • Account Management
  • Forms
  • Entries
  • Views
  • Styles
  • Importing & Exporting
  • Add-Ons
  • Extend Formidable Forms

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews