Scroll to first invalid field on Contact Form 7 validation error event

wpcf7.js

/**
 * Scroll to first invalid field
 * WPCF7 on validation error event
 */
document.addEventListener( 'wpcf7invalid', function( event ) {
  setTimeout( function() {
    $('html').stop().animate({
      scrollTop: $('.wpcf7-not-valid').eq(0).offset().top - 140,
    }, 500, 'swing');
  }, 100);
}, false );

Even better for accessibility, wait 3 seconds (so the screen reader can read the error message) and then move focus to the first input with an error. There is no need to add animations if the HTML CSS has the scroll-behavior property: smooth;

document.addEventListener('wpcf7invalid', function (event) {
  setTimeout(function () {
    $('#' + event.detail.unitTag + ' .wpcf7-not-valid').eq(0).focus();
  }, 3000);
}, false);