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 );

Hello,

How can it be used? Where does it go?

Thank you!

Code for pages with fixed scrollbar

  "wpcf7invalid",
  function (event) {
    setTimeout(function () {
      var element = document.querySelector(".wpcf7-not-valid");
      var elementPosition = element.getBoundingClientRect().top;
      var offset = 140; // Setzen Sie hier den gewünschten Offset-Wert
      var newPosition = elementPosition + window.pageYOffset - offset;
      window.scrollTo({
        top: newPosition,
        behavior: "smooth"
      });
    }, 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);