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

2020年8月6日2021年6月12日ContactForm7カスタマイズ

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

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

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

footer.phpの</body>の直前でも動作します。※動作確認してみてください。

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

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

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

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

そのままだとContactFrom7がエラー箇所に.wpcf7-not-valid-tipのクラスを付与する前に働いてしまい要素が取得できないので、setTimeoutでスクロールさせるコードを囲って2000ミリ秒送らせてスクロールさせます。「入力内容に問題があります」という警告文字を見せてからスクロールできるのでむしろ良いかも。秒数はお好みで調整してください。

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

500はスクロールスピードです。

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