Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Blog
  • Support
  • 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!

Standard field options

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

  • Field Type
  • 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 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

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 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

Field Styling

Pagination StylingIf you are using a Progress bar or Rootline in a multipage form, you can customize the styling  in 'Formidable' → 'Styles' → 'Progress Bars'. You may adjust the styling of:

  • 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.

  • If you would like to change the text on the Next button, click on the 'Next' button in the page break field and insert the text there.
    Page Break Next Button
  • If you would like to change the text for your Previous buttons, go into your form 'Settings', and scroll down to 'Styling & Buttons'. In the 'Previous Button Text' box, insert your custom text.
    Page Break Previous Text

By default, your Next and Previous buttons will match the styling of the form's Submit button. You can style your Previous button manually by following these styling instructions.

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
  • 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
  • Blog

Copyright © 2022 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