Skip to content

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.

Improve UX with auto-advance in Gravity Forms sections

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.

Download form examples

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.

Improve UX with auto-advance in Gravity Forms sections
Add the class 'auto-advance' name to the form

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

1Add the auto-advance class to your form on form settings
2Make sure you add 1 radio or checkbox filed to each section, ideally the last field in the section
3Add an HTML filed to your form to house the Javascript snippet
4Add the 1 line of CSS provided to your theme via a plugin or the WordPress CSS customer
5You can tweak the offset value (var scrollOffset = 30) in the Javascript snippet to adjust the auto-advance distance
6If 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

8,847+ happy customers

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.

4,195+ happy customers

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.