概要
WPプラグイン「Contact Form 7」で実装したフォームにおいて、入力エラーが発生した場合に特定要素までスクロールする処理をjQueryを使用して実装。用途・要件
- WPプラグイン「Contact Form 7」を使用したフォームにおいて、入力内容にエラーがあった場合に、特定の要素にスクロールさせる。
- 最初のエラー発生箇所にスクロールする例を記載。
- jQueryのanimate()を使用してスムーススクロールする。
- 固定ヘッダーがある場合に、固定ヘッダーの高さ分スクロール位置をずらす。
その他
- Contact Form 7 v5.7.2使用。
- jQuery v3.6.1使用。
検証ブラウザ
- Google Chrome(最新)
- Microsoft Edge(最新)
- Firefox(最新)
- Safari(最新)
実装
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
