Page Break

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

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.

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

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.

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

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

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

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.