この実装、面倒なら代行します
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”を取得すると一番上まで自動スクロールします。
WordPressカスタマイズ事例やウェブ制作ノウハウの新着情報、お役立ち情報を
リアルタイムにメルマガ配信!
100ウェブで手がけた制作・開発案件を一部、ご紹介。
クライアントからご相談いただいた内容とその実装におけるポイント、工期、予算について確認いただけます。
【テレワーク実施中 につきお電話転送中】
コール中1秒程度無音状態になりますがそのままお待ちください。
受付時間
平日 10:00~18:00
メールでのお問い合わせでも
1営業日以内にご連絡いたします。