Gravity Wiz

Magically enhanced tutorials, snippets and plugins for Gravity Forms!

  • Gravity Perks
    • Gravity Perks
    • Tutorials & Snippets
    • About
  • Support
    • Documentation
    • Support
    • Account

Gravity Forms Multi-Page Navigation

Enhanced navigation for multi-page forms.

This plugin is part of Gravity Perks, a suite of 41+ essential Gravity Forms addons with support you can count on.

  • View All Perks
  • Buy Gravity Perks

What does it do?

This plugin allows users to navigate more easily between the pages of your Gravity Forms multi-step form. Sure, Gravity Forms provides a Next and Previous button out of the box, and for simpler forms, those navigational buttons are enough. But when you’re dealing with longer or more complex multi-page forms, providing additional page navigation is essential.

Features

  • Convert Gravity Forms page names into clickable page links.
    Add clickable navigation to any multi-step form.
  • Control when pages are navigable.
    Activate navigation for any completed page, from the start, or when the last page is reached.
  • Create custom page links for complete control of form navigation.
    Build custom page links within the form or anywhere on the page.
  • Full support for Gravity Forms Save and Continue feature.
    Users can complete any number of pages in any order, and when Save and Continue is activated, their progress is saved.
  • Integrates with Gravity Forms Preview Submission.
    Provide a preview of the submission and a quick way for users to navigate to pages to fix mistakes.
  • Back to Last Page button.
    Automatically added in appropriate contexts to ease navigation.
  • Automatic updates.
    Get updates and latest features right in your dashboard.
  • Awesome support.
    We’re here to help! And we mean it.

Documentation

  1. How do I enable this functionality?
  2. Feature Details
    1. Activation Type
      1. The user can navigate to any form page they have completed
      2. The user can navigate to any form page from the start
        1. Validation with the from the start activation type
      3. The user can navigate to any form page after reaching the last page
    2. Back to Last Page Button
    3. Next Page with Errors Button
    4. Gravity Forms Preview Submission Integration
    5. Gravity Forms Save and Continue Support
    6. Custom Page Links
      1. Navigate to the first page
      2. Navigate to the second page
    7. Custom Starting Page
    8. Styling with CSS
      1. How to change the opacity of page links
      2. Style available page links
      3. Style page name for the current page
  3. Integrations
  4. FAQs
    1. How can I disable navigation links while GF Populate Anything is loading data?
  5. Hooks
  6. Related Articles

How do I enable this functionality?

After installing and activating Gravity Forms Multi-Page Navigation, page navigation can be activated inside Page fields. Let’s step through that process.

Ensure that you have at least two pages.
Select the “Start Paging” field at the very top of the form.
Check Enable Page Navigation.
Specify when you would like the form navigation to be available via the “Activation Type” setting.

Feature Details

Activation Type

Specify which pages can be navigated to and when. Available options:

The user can navigate to any form page they have completed

Once the user has completed a page, they can navigate directly to this page from any other page on the form. This is very useful on longer forms that have a linear progression.

Works well with Preview Submission.
The user can navigate to any form page from the start

As soon as the user arrives on the form, they are able to navigate to any page. This is useful for any mulit-page form where the user does not necessarily need to complete the form in a specific order; forms where the user may not have all of the required information but would like to fill out as much of the form as possible before using Gravity Forms’ Save and Continue functionality to save their progress and continue later.

Validation with the from the start activation type

Validation is skipped when the form is navigated via the page links. If the default Next button is used, the page will be validated as usual.

Regardless, all pages will be revalidated when the final page is submitted. If validation errors are found, the user will be redirected back to the first page containing errors. If there are multiple pages with errors, a helpful Next Page with Errors button is added to direct the user to the next page containing validation errors.

When the user arrives on the last page with validation errors, a Submit will become available, allowing the user to submit the form without having to navigate back to the last page. This feature can be disabled with the gpmpn_enable_submission_from_last_page_with_errors hook.

Works well with Gravity Forms Save and Continue feature. It will even remember the last page the user accessed!
The user can navigate to any form page after reaching the last page

Once the user has reached the last page, they are able to navigate back to any page on the form. This is useful if you would like to keep the user focused on moving forward through the form. On the last page of the form, you might show a confirmation of the data to be submitted (possible with Preview Submission). The user can now confirm the information they’ve entered and if they find a mistake and quickly navigate back to the page in question.

Back to Last Page Button

The Back to Last Page button is available at different times depending on the form navigation activation type. If the user can navigate to any form page they have completed, the button is added on any page prior to the last completed page. If the user can navigate to any form page after reaching the last page, the button is added on any page prior to the last page.

Next Page with Errors Button

If navigation is enabled from the start, validation is bypassed until the the final submission (when page links are used). If there are multiple pages with validation errors, a helpful Next Page with Errors button is available to save the users wasted time trying to find which page failed validation. The user can submit the form directly from the last page with errors.

Gravity Forms Preview Submission Integration

Use Preview Submission to offer a preview of the user’s entered data before it is submitted.

If the user spots a mistake, they’ll need to click the Previous button over and over again to access the page with the incorrect data.

Enable navigation from the last page (or any completed page) to allow the user to navigate directly to the page in question and fix the incorrect data.

Gravity Forms Save and Continue Support

Currently, users must complete the form in a linear format. If they’re on the first page and don’t have a piece of required information, they’ll have to stop cold.

Enable navigation from the start to allow users to fill out as much information on as many pages as they can before using GF’s Save and Continue feature to save their progress.

Custom Page Links

In some cases, you may want to create custom page links either within the form or anywhere else on the page on which the form is rendered. These custom links can direct the user to any page on the form. To create a custom page link, use the following format:

<a href="#{pageNumber}" class="gpmpn-page-link">My Link Text</a>

Here are two examples that show real custom page links:

Navigate to the first page

<a href="#1" class="gpmpn-page-link">Head Back to Page #1</a>

Navigate to the second page

<a href="#2" class="gpmpn-page-link">Get On Back to Page #2</a>

Custom Starting Page

If some contexts, you may want to have the user begin on a specific page. The most common use case is when you’re using Gravity Forms’ dynamic population to populate some pages with previously collected data. Rather than have the user click through those pages, you can have them start from a specific page using one of these methods.

  • Shortcode

    [gravityforms id="123" page="2"]

  • Query String

    http://mysite.com/my-form-page/?gpmpn_page=2

    For security, this method is only available if you set a default page parameter via the shortcode. Use page="1" to set the default starting page to the first page and allow the query string to override the starting page when present.

  • Filter

    add_filter( 'gpmpn_default_page', function( $page ) { 
            return 2;
        } );

Styling with CSS

How to change the opacity of page links

.gform_wrapper .gf_step {
    opacity: 0.5;
}

Multi-page Navigation adds two helpful classes.

Style available page links
.gpmpn-step-linked {
/* custom styles */
}
view raw gp-multi-page-form-navigation.css hosted with ❤ by GitHub
Style page name for the current page
.gpmpn-step-current {
/* custom styles */
}
view raw gp-multi-page-form-navigation.css hosted with ❤ by GitHub

Integrations

Gravity Forms Page Transitions can be used to help improve the flow of your multi-page forms.

Enable this perk to create smooth, animated transitions between form pages. It will also indicate progress and automatically advance users from one page to another after the last field on the current page is completed (via Soft Validation). The fluid transitions and automatic progression can be helpful for increasing form conversions and improving the look and feel of your forms.

FAQs

How can I disable navigation links while GF Populate Anything is loading data?

Add the following CSS to automatically disable Multi-Page Navigation links while data populates.

View CodeDownload Code

Hooks

  • gpmpn_default_page
  • gpmpn_enable_submission_from_last_page_with_errors
  • gpmpn_frontend_labels
Gravity Forms has hundreds of hooks. Check out our Gravity Forms Hook Reference for the most thorough guide to Gravity Forms’ many actions and filters.

Related Articles

  • Complete Guide: How to Create a Multi-Step Gravity Form

Perk Deets

  • Version 1.1.4
  • Updated January 14, 2022
  • Released February 17, 2015
  • View Changelog

Changelog

1.1.4

  • Fixed a fatal error introduced in 1.1.3.

1.1.3

  • Fixed an i18n form error message issue.

1.1.2

  • Fixed a fatal error in installations running PHP 5.6.x.

1.1.1

  • Fixed error messages styling for GF 2.5.
  • Fixed a potential issue where AJAX spinner may show up twice on some forms.

1.1

  • Improved compatibility with Gravity Forms 2.5.

1.0.10

  • Fixed compatibility issue with GF 2.5 and conditional logic.

1.0.9

  • Added support for tracking if the last page is reached for manual page links.
  • Fixed issue where GP Multi Page Navigation settings would show for every field in the Form Editor.

1.0.8

  • Fixed issue where GF Multi-Page Navigation settings would not show in the Page settings when using Gravity Forms 2.5 or newer.

1.0.7

  • Added support for custom page links outside of Gravity Forms implemented via the WC GF Product Add-ons plugin.

1.0.6

  • Fixed issue where setting "page" attribute on shortcode was not working.

1.0.5

  • Fixed potential security issue.

1.0.3

  • Fixed issue where next and previous buttons hidden via conditional logic prevented navigation from submitting form.

1.0.2

  • Added support for targeting custom page links from a parent element.

1.0.1

  • Added support for specifying default form page to be rendered (via shortcode attribute, query string, or filter).

1.0

  • Fixed notice generated in PHP 7.1+ when non-numeric value was encountered.

1.0.beta2.11

  • Fixed issue where jumping to a target page from a source page with a conditional page between them caused the target page to be incorrectly adjusted by Gravity Forms.
  • Fixed issue where in some cases, navigating after using a custom page link would cause the form to revalidate.

1.0.beta2.9

  • Fixed conflict with WC GF Product Add-ons 3.0 where form object is not available on page load.

1.0.beta2.8

  • Fixed conflict with WC GF Product Add-ons where custom inputs were overridden in gform_form_tag filter.

1.0.beta2.7

  • Added translation support

1.0.beta2.6

  • Fixed issue where bypassing validation still showed validation errors for fields that had failed validation

1.0.beta2.5

  • Fixed issue where when next/prev/submit buttons were hidden via conditional logic; page navigation would fail to submit.
  • Updated perk to use GP_Bootstrap

1.0.beta2.4

  • Fixed issue where validation message was overridden even when MP navigation was not enabled for that form

1.0.beta2.3

  • Fixed issue where spinner was incorrectly displayed in the footer for all forms on a page

1.0.beta2.2

  • Fixed issue where validation was still happening for custom page links

1.0.beta2.1

  • Fixed issue where navigating backwards and then saving form progression would result in an error when resuming form

1.0.beta2

  • Fixed issue where navigating back to a page and then forward via page links in 'Last Page' and 'Progession' modes would incorrectly apply validation to all pages which sometimes resulted in skipping forward to pages the user had not yet reached; this also resolved anissue where progressing to the furthest page reached after navigating backwords would result in that page displaying validation errors which should not occur until the page has been intentionally submitted

1.0.beta1.5

  • Fixed issue where using Save & Continue on last page of form resulted in an error when resuming from Save & Continue

1.0.beta1.4

  • Fixed issue where if non-GF form was on page, custom page links outside the form element would not work

1.0.beta1.3

  • Added support for custom page links outside of the form element

1.0.beta1.2

  • Fixed issue where fields shown/hidden via conditional logic could be bypassed if the user "skipped" the page via page navigation

1.0.beta1.1

  • Fixed issue where plugins using the gform_validation filter would sometimes override the bypass validation functionality
  • Updated plugin description

1.0.beta1.0

  • Intial release.

All Perks

  • GF Address Autocomplete
  • GF Advanced Calculations
  • GF Auto List Field
  • GF Auto Login
  • GF Better User Activation
  • GF Blocklist
  • GF Conditional Logic Dates
  • GF Conditional Pricing
  • GF Copy Cat
  • GF Date Time Calculator
  • GF Disable Entry Creation
  • GF Easy Passthrough
  • GF eCommerce Fields
  • GF Email Users
  • GF Entry Blocks
  • GF Expand Textareas
  • GF File Upload Pro
  • GF Inventory
  • GF Limit Checkboxes
  • GF Limit Choices
  • GF Limit Dates
  • GF Limit Submissions
  • GF Live Preview
  • GF Media Library
  • GF Multi-Page Navigation
  • GF Nested Forms
  • GF Notification Scheduler
  • GF Page Transitions
  • GF Pay Per Word
  • GF PayPal One-time Fee
  • GF Placeholder
  • GF Populate Anything
  • GF Post Content Merge Tags
  • GF Preview Submission
  • GF Price Range
  • GF QR Code
  • GF Randomizer
  • GF Read Only
  • GF Reload Form
  • GF Terms Of Service
  • GF Unique ID
  • GF Word Count

Copyright © 2022 · Powered by WordPress · Gravity Wiz LLC

  • Support
  • Affiliates
  • About
  • Sitemap
  • Terms & Conditions of Use
  • Privacy Policy
  • Cookies Policy

Get access to hundreds of Gravity Forms plugins for free!

Enter your email and receive a list of our most popular free snippets and plugins for Gravity Forms.

  • Gravity Perks
    ▼
    • Gravity Perks
    • Tutorials & Snippets
    • About
  • Support
    ▼
    • Documentation
    • Support
    • Account