This page may contain affiliate links. Please read my disclaimer for more information.

Gravity Forms Multipage Transitions

  |  by Chris Eggleston

In this tutorial, I’ll show you how you can use choice-based fields (i.e. checkbox, radio, dropdown) to automatically transition between pages in your multipage forms built with Gravity Forms.

The code snippets provided in this tutorial can also be used on a single-page form to submit the form without clicking the submit button. You can see an example of that in this tutorial: Gravity Forms: Submit Form When Radio Button is Selected.

What You’ll Need

  • Gravity Forms (any license type)
  • Code Snippets (provided below)

Other Solutions

These are two add-ons that add this functionality to your forms.

What’s Covered In This Tutorial

I’ll be building a form using custom code to transition from page to page in a multipage form. I will be using three choice-based fields, a dropdown, a radio, and a checkbox on each page.

Once there is a selection or a change made to these choice-based fields, the form will automatically move to the next page.

As a side note, the new Conversational Forms Add-On that is currently in beta will also have these transitional features built-in.

Building the Form

This is going to be a multipage form and these are the fields we’re going to be using in this tutorial.

  • Page Break
  • Radio Button
  • Checkbox
  • Dropdown
  • HTML

You are welcome to use additional fields that fit your needs, but for this tutorial, we will be keeping it simple so that you can learn how this concept works so that you can apply it to your form.

Implementing The Code Snippet

The code snippet below will work for all of the choice-based field types listed above. It will even work for a product field that uses the radio button or dropdown field type.

 jQuery(document).ready(function($) {
 $('select, input[type=radio], input[type=checkbox]').on('change', function() {

To apply this code, simply add an HTML field to your form and copy and paste this snippet into the field content area. I prefer to put the code at the top of the form, but it can be added anywhere within the form.

What if you only want to use one of the choice-based field types?

Let’s say you’re only going to use radio button fields in your form, in that case, you can modify the code snippet above as shown below.

//Original Script
 jQuery(document).ready(function($) {
 $('select, input[type=radio], input[type=checkbox]').on('change', function() {

//Modified Script
 jQuery(document).ready(function($) {
 $('input[type=radio]').on('change', function() {

Testing The Form

You always want to make sure your form is working, so open it up in preview, or use the Gravity Wiz Live Preview add-on to test the form.

Disclaimer: In the video above I’m using the Live Preview add-on when testing.

Bonus: Using An Add-On

I mentioned at the beginning of this tutorial that there are a couple of add-ons that will add this functionality to your form so that you can skip using and modifying the code snippet above.

I thought I’d do a quick video for each of the listed add-ons, showing your how they work so that you can better decide for yourself.

The biggest advantage to this add-on, it’s only $25 and is enabled at the field level so that you can use multiple choice-based fields on each page. What the video for the details!

The Wrap Up

By now you should know how to set up your Gravity Forms multipage form to auto-transition from page to page, or at the very least, know what your options are!

Because someone always asks, which method do I prefer or recommend? In most cases, I would say code over a plugin, but this code snippet is very basic, so I’d say the Multi-Page Auto Advance plugin is the best solution in this tutorial.

But you should always do you and use the solution that fits your style or needs best.

As always, if you have any questions or need help, use the comments to reach out to us.

Photo of author
About the Author
Chris Eggleston
Chris is not just a Gravity Forms enthusiast; he's a dedicated father and loving husband. As the proud owner of WP Mantis, he's on a mission to simplify the WordPress experience for site owners. He brings a unique perspective to the Gravity Forms community.


0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments