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>