GRAVITY PERKS MULTIPAGE FORM NAVIGATION
What does it do?
Multi-page Navigation 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 becomes essential.
GRAVITY PERKS MULTIPAGE FORM NAVIGATION
Features
- Convert Gravity Forms page names into clickable page links
- Control when pages are navigable (more info)
- Create custom page links for complete control of form navigation (more info)
- Full support for Gravity Forms “Save and Continue” feature (more info)
- Provide a preview of the submission and a quick way for users to navigate to pages to fix mistakes when paired with GP Preview Submission (more info)
- Bonus navigation buttons (more info)
—
Documentation
How do I enable this functionality?
- Ensure that you have at least two pages.
- Select the “Start Paging” field at the very top of the form.
- Check the “Enable Page Navigation” checkbox.
- Specify when you would like the form navigation to be available via the “Activation Type” setting.
See below for more details on navigation activation types.
GRAVITY PERKS MULTIPAGE FORM NAVIGATION
Settings
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 GP 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.GRAVITY PERKS MULTIPAGE FORM NAVIGATION
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.GRAVITY PERKS MULTIPAGE FORM NAVIGATION
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 the GP Preview Submission plugin). 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.Works well with GP Preview Submission
Feature Details
“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 “Back to Last Page” 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.GRAVITY PERKS MULTIPAGE FORM NAVIGATION
“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 PERKS MULTIPAGE FORM NAVIGATION
GP Preview Submission Integration
User GP Preview Submission to offer a preview of the user’s entered data before it is submitted. If the user spots a mistake, they’ll have to click the “Previous” button over and over again to access the page with the incorrect data.GRAVITY PERKS MULTIPAGE FORM NAVIGATION
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.
Advanced Topics
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:GRAVITY PERKS MULTIPAGE FORM NAVIGATION
<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.GRAVITY PERKS MULTIPAGE FORM NAVIGATION
- Shortcode
[gravityforms id="123" page="2"] - Query String
http://mysite.com/my-form-page/?gpmpn_page=2For security, this method is only available if you set a default page parameter via the shortcode. Usepage="1"to set the default starting page to the first page and allow the query string to override the starting page when present. - Filteradd_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 */ |
| } |
Style page name for the current page
| .gpmpn-step-current { |
| /* custom styles */ |
| } |
Hooks
- gpmpn_frontend_labels
- gpmpn_enable_submission_from_last_page_with_errors
More details coming soon.
