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!
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,
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.
.gfield.inactive,
.collapsible-sections-collapsible-body.inactive,
.gform_footer .inactive {
pointer-events: none !important;
opacity:0.2 !important;
}
.auto-advance.auto-advance-demo-1 .gform_button {
background: #0275ff!important;
margin: -50px auto;
display: block;
float: unset;
border:none!important;
}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.
<script type="text/javascript">
(function($){
// update this value as needed
var scrollOffset = 30;
$(document).bind('gform_post_render', function(e, formId, currentFormPage) {
var $form = $('#gform_' + formId);
if ( $form.hasClass('auto-advance') && !$form.hasClass('auto-advance-init') ) {
$form.find('.gsection').not(':first').each(function(){
var $section = $(this);
$section.addClass('inactive');
if ( $section.hasClass('collapsible-sections-field') ) {
$section.next('.collapsible-sections-collapsible-body').addClass('inactive');
}
else {
$section.nextUntil('.gsection').addClass('inactive');
}
});
$form.find('.gform_footer input:submit, .gform_footer button').addClass('inactive').prop('disabled', true);
var firstRun = true;
$form.find('input:radio').on('change', function(e){
var $input = $(this);
if ( $input.is(':checked') ) {
var $field = $input.closest('.gfield');
var $nextSection;
var nextSectionScrollDelay = 10;
if ( $field.closest('.collapsible-sections-collapsible-body').length ) {
$nextSection = $field.closest('.collapsible-sections-collapsible-body').nextAll('.gsection').first();
}
else {
$nextSection = $field.nextAll('.gsection').first();
}
if ( $nextSection.length ) {
$nextSection.removeClass('inactive');
if ( $nextSection.hasClass('collapsible-sections-field') ) {
$nextSection.next('.collapsible-sections-collapsible-body').removeClass('inactive');
nextSectionScrollDelay = 500;
if ( !firstRun ) {
$nextSection.trigger('click');
}
}
else {
$nextSection.nextUntil('.gsection').removeClass('inactive');
}
if ( !firstRun ) {
setTimeout(function(){
var targetTop = $nextSection.offset().top - scrollOffset;
$('html,body').animate({ scrollTop: targetTop }, 300);
}, nextSectionScrollDelay);
}
if ( !$nextSection.nextAll('.gsection').length ) {
$form.find('.gform_footer input:submit, .gform_footer button').removeClass('inactive').prop('disabled', false);
}
}
}
}).trigger('change');
$form.addClass('auto-advance-init');
setTimeout(function(){
firstRun = false;
}, 500);
}
});
})(jQuery);
</script>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.
Please note the use of conditional logic is not supported or tested in this example, as well as multiple pages forms
| 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 |
Gravity Forms Image Choice & Collapsible Sections
Gravity Forms Image Choices
Easily add images as choices for Radio Buttons or Checkboxes fields within Gravity Forms. Includes support for Survey, Quiz, Product and Options.
Gravity Forms Collapsible Sections
Long forms are notorious for bad conversions, Collapsible Sections will convert your forms into beautifully displayed, easy to use, conversion generators.
