Multistep: automatically scroll to the first invalid field

Version 1.9.12 adds an extra event: wpcf7cf_step_invalid

You can use it like this to have the page automatically scroll to the first invalid field after trying to submit a step:

<script>
  jQuery(document).ready(function($) {
    $('.wpcf7-form').on('wpcf7cf_step_invalid', function(e) {
      var $form = this;
      setTimeout( function() {
        $('html').stop().animate({
          scrollTop: $('.wpcf7-not-valid', form).eq(0).offset().top - 200,
        }, 500);
      }, 200);
    });
  });
</script>

You can add this JavaScript code it in your JS file, or simply at the bottom of your form.

image.png

Form

    Step 1

    This field is mandatory:
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    This field is also mandatory:
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .

    Step 2

    That will be all.


    Form Code

    [step]
    This field is mandatory: [text* fill-me-up]
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    This field is also mandatory: [text* put-all-your-content-inside-me]
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    [step]
    That will be all.
    [submit]
    <script>
      jQuery(document).ready(function($) {
        $('.wpcf7-form').on('wpcf7cf_step_invalid', function(e) {
          console.log('yes');
          var form = this;
          setTimeout( function() {
            $('html').stop().animate({
              scrollTop: $('.wpcf7-not-valid', form).eq(0).offset().top - 200
            }, 500);
          }, 200);
        });
      });
    </script>