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.
Form
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>