Gravity Forms Multipage Transitions

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.

• Gravity Wiz Page Transitions
• Multi-Page Auto Advance

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.

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.

<script>
 jQuery(document).ready(function($) {
 $('select, input[type=radio], input[type=checkbox]').on('change', function() {
 $(this).closest("form").submit();
     });
   });
</script>

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
<script>
 jQuery(document).ready(function($) {
 $('select, input[type=radio], input[type=checkbox]').on('change', function() {
 $(this).closest("form").submit();
     });
   });
</script>

//Modified Script
<script>
 jQuery(document).ready(function($) {
 $('input[type=radio]').on('change', function() {
 $(this).closest("form").submit();
     });
   });
</script>

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.

• Gravity Wiz Page Transitions

• Multi-Page Auto Advance

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.