What’s you’ll need for this tutorial
To enhance your forms even further, we recommend our Gravity Forms Add-ons to make them look even greater!
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 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
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.
- Add the auto-advance class to your form on form settings
- Make sure you add 1 radio or checkbox filed to each section, ideally the last field in the section
- Add the 1 line of CSS provided to your theme via a plugin or the WordPress CSS customer
- If you are using our Collapsible Sections Add-on, be sure to turn off the “Auto scroll to open section” setting
- Please note the use of conditional logic is not supported or tested in this example, as well as multiple pages forms
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.
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.