Improve UX with auto-advance in Gravity Forms sections

Improve your form UX with auto-advance in Gravity Forms sections to help with better form conversions. This little Javascript snipper along with a single CSS snippet will allow you to let your users auto-advance from section to section within Gravity Forms. On completion of a section, the form will highlight the next section as active and auto-advance to that section.

What’s you’ll need for this tutorial

Just a copy of Gravity Forms! The Javascript snippet we’ve written will listen for clicks on either Radio or Checkbox options, in order to auto-advance. So please note you will need at a minimum 1 radio or checkbox field per section in order for this example to work. We recommend putting these radio or checkbox fields as the last field in your section as once a user makes a selection, the form will auto-advance.

To enhance your forms even further, we recommend our Gravity Forms Add-ons to make them look even greater!

• Gravity Forms Image Choices Add-on
• Gravity Forms Collapsible Sections Add-on

Check out the live auto-advance form examples below of how to improve UX with auto-advance in Gravity Forms sections

With standard Sections

Here’s an example of the auto-advance using the default Gravity Forms section with some basic CSS styles applied. The auto-advance feature is triggered by the last radio or checkbox in each section.

 

Notice as you advance to each section, the section because active and no longer semi-transparent. Also, on the last field, the submit form will now also become visually active to show you’ve completed all the steps.

With Collapsible Sections

The below examples is basically the same form, but uses our Gravity Forms Collapsible Sections Add-on for Gravity Forms to neatly group your fields together.

How it’s done

The easiest way is to download both form examples and import the exported JSON Gravity Forms into your site via the inbuilt Gravity Forms form importer. We’ve exported both these demos with the fields seen in this tutorial, including the HTML field with the required Javascript, along with the CSS. Note the CSS will only work if you’re using our Collapsible Sections Add-on. if you’re not, now’s a great time to grab a copy, or you can follow along below on how to manually add CSS to your site,

Download Demo 1 Form

Download Demo 2 Form

The form setup

Go to your newly created form and add the class name “auto-advance”. If you’re using our below form exports to import into your site, this step will already be done.

Add the CSS

Copy the below CSS, and paste it into your Gravity Forms Collapsible Sections form settings > custom CSS screen. You can also add CSS to your website via a pluign, the theme customiser, or directly into your WordPress theme. We’d suggest just using the in-built CSS customizer within WordPress itself.

Add the JS

The best way to add your Javascript is to create a new HTML field and add the Javascript to the HTML field.

Summary notes

Just take note that your forms might look a little different to our examples as we’ve added some custom CSS that styles the forms for our designs.

1. Add the auto-advance class to your form on form settings
2. Make sure you add 1 radio or checkbox filed to each section, ideally the last field in the section
3. Add an HTML filed to your form to house the Javascript snippet
4. Add the 1 line of CSS provided to your theme via a plugin or the WordPress CSS customer 
5. You can tweak the offset value (var scrollOffset = 30) in the Javascript snippet to adjust the auto-advance distance
6. If you are using our Collapsible Sections Add-on, be sure to turn off the “Auto scroll to open section” setting
7. Please note the use of conditional logic is not supported or tested in this example, as well as multiple pages forms

Want more?

Like this tutorial? Let us know if the comments below! If we get some good feedback we can re-do this tutorial with some video content to help you integrate this auto-advance into new and existing forms.

Disclaimer
Due to the somewhat custom nature of this tutorial, we’re only able to offer very basic support to help you get these examples working. Evey WordPress install is unique for your needs and thus near impossible for us to help implement these examples into everyone’s site. Take these examples as inspiration to try it yourself and see if you learn anything along the way. We’ll help where we can but can’t promise the world. Thanks for understanding.

Now whilst this example might get you 70% of what you’re after, you’ll probably need to further customise the CSS to get it looking how you want it. WordPress themes differ dramatically, so more often than not, you’ll need to tweak the example custom CSS provided further.

These examples are currently not mobile-friendly. Yeh we know we know, we’ll get to it as soon as possible and update the CSS example code above when we do.