WordPress
カスタマイズ事例

WORDPRESS CUSTOMIZATION

Contact Form 7のバリデーションエラー時の自動スクロールで、一番上に戻るようにする

Contact Form 7は、必須項目が未入力だったり入力内容が正しい形式じゃなかったりするとき、画面は動かず、その場でエラー表示を挿し込んでくれます。
ただ、縦に長いフォームだったりして、エラー時は画面上まで戻したくなるなんてこともたまにありますよね。
そんな場合に、一番上まで戻るようにしましょうという話。

Jquery本体ファイル読み込みの後に以下のJavascript記述をしましょう。
footer.phpあたりが良いでしょう。

<script>
  var wpcf7Elm = document.querySelector( '.wpcf7' );

  wpcf7Elm.addEventListener( 'wpcf7invalid', function( event ) {
    let speed = 1000;
    jQuery("html, body").animate({scrollTop:0}, speed, "swing");
  }, false );
</script>

フォーム送信エラー時のDOMイベント”wpcf7invalid”を取得すると一番上まで自動スクロールします。

【100ウェブ新着情報メルマガ】

WordPressカスタマイズ事例やウェブ制作ノウハウの新着情報、お役立ち情報を
リアルタイムにメルマガ配信!