ContactForm7でフォームのバリデーション時にエラー部分までスクロールする方法

ContactForm7でおしゃれ&多機能カスタマイズ

ContactForm7 バリデーション エラー スクロール

ContactForm7で「入力内容に問題があります」と表示されて入力内容を修正するときに、修正が必要な個所までスクロールする方法です。

なぜ今までやろうと思わなかったのか謎ですが、バリデーションするならば間違っていた箇所までスクロールしないと面倒ですよね。

header.php</head>の直前に以下のコードを追加します。

<!-- ContactForm7のバリデーションの位置にスクロールする -->
<?php if(is_page(array(1111,1112,1113))){ // array(フォームがあるページid,id)のとき?>
<script type="text/javascript">
jQuery(function($){
document.addEventListener( 'wpcf7invalid', function( event ) {
var position = $('.wpcf7-not-valid-tip:first').get(0).offsetTop;
$('html,body').animate({
scrollTop: position
}, 700);
}, false );
});
</script>
<?php } ?>
</head>

is_page(array(フォームがあるページのid,でContactForm7を使用しているページでのみ読み込むjQueryコードです。

addEventListenerでContactForm7がバリデーションをするときのJavaScriptの動作に、動きを追加します。

.wpcf7-not-valid-tipはContactForm7が出力するバリデーション(メールアドレスの形式が正しくありません。など)メッセージのクラス名です。

:firstと付けることで、一番最初のエラー位置をしています。

700はスピードです。

これでバリデーションエラーが出た際に、エラー位置まで自動的にスクロールしてユーザーに修正を促せるようになりました。