This snippet can add the multi-page form navigation functionality to any form with multiple pages. Only forms using the “Steps” progress indicator will have the page steps converted into page links. For forms using the “Progess Bar” or no progress indicator at all can still make use of this functionality by creating custom links using the custom page link formatting instructions below.
Currently, this functionality is setup so that the page links are not activated until the user reaches the final page of the form. Users can then navigate freely to any page using the page step links (displayed above the form).
After reaching the last page, navigating back to any form page will display a link: “Back to Last Page”. Clicking this link will (you guessed it!) take the user back to the last page.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 |
|
How do I install this snippet?
Easy peasy. Just copy and paste the code above into your theme's functions.php file.
How do I use this functionality?
If you want to apply this functionality to all forms and you are already using the “Steps” progress indicator for your forms, installing the snippet is all you’ll need to do. If you’re interested in limiting this functionality to a few specific forms, need some help setting your form’s progress indicator, or want to learn how to create your own custom page links, read on!
Limiting to a Specific Form
Limit to a Single Form
4 |
|
Limit to Multiple Forms
10 |
|
Setting Progress Indicator
If you’d like your form’s page steps (which display above the form), you’ll need to set your paging progress indicator to “Steps”. To do so, find the “Start Paging” field and open its settings. Under the “Properties” tab, find the “Progress Indicator” setting and select the “Steps” option. If you’d like to specify a name for each step, you can do so here.
Clik here to view.

Creating Custom Page Links
If you’d like to create your own custom page links, you can do so using the following link format:
<a href="#{pageNumber}" class="gwmpn-page-link">My Link Text</a>
Just update {pageNumber}
to the page number you would like to link to and update My Link Text
to whatever text (or other HTML) you would like to display for your link. Note: The link must be output somewhere within the opening and closing GF <form> tags.
Small Disclaimer
One not-so-awesome thing about this snippet is that we’re outputting a decent bit of Javascript to the page. Ideally, this Javascript would be included in a separate file. For the sake of users new to WordPress and/or web development, I chose to go the simpler, less efficient route for ease of installation.
If you’d like to move the JS portion to a separate file, please do! The entire gwmpnObj
JS object can be moved to any JS file; just make sure you include it on any page you display a form configured to use it.
Closing Notes
Gravity Perks is almost ready to launch and this snippet will be available as a perk. What does that mean for you? Have a centralized location to manage all your Gravity Forms functionality and an awesome repository of useful Gravity Form enhancements. Sign-up to be notified when Gravity Perks is released or view the currently available perks in beta and help test!