WPFormsが自動的にバリデーションエラーまでスクロールするのを止めたいですか？デフォルトでは、フォームにエラーがあると、それが単一ページのフォームであろうと改ページがあるフォームであろうと、WPForms は最初のエラーフィールドまでスクロールします。
このガイドでは、このスムーズスクロール効果を無効にし、代わりにページをエラーに直接ジャンプさせる方法を紹介する。
フォームの設定
まず、フォームを作成し、フィールドを追加する必要があります。フォームの作成にヘルプが必要な場合は、最初のフォームの作成方法をご覧ください。
スクロール効果を無効にする
スクロール効果を無効にするには、特定のフォームに対して無効にする方法と、サイト上のすべてのフォームに対して無効にする方法の 2 通りがあります。両方の方法を見てみましょう。
特定のフォームについて
1つのフォームだけスクロール効果を無効にしたい場合は、このコードスニペットを使用してください。カスタムコードの追加方法がわからない場合は、コードスニペットの追加ガイドをご覧ください。
/** Disable the scroll on field validation errors
*
* @link https://wpforms.com/developers/how-to-disable-the-scrolling-effect-on-field-validation/
*/
function wpf_dev_disable_scroll_to_error_by_form_id( $forms ) {
// If scrollToError is disabled for at least one form on the page, it will be disabled for all the forms on the page.
foreach ( $forms as $form ) {
// Only run snippet on the form ID 1000
if ( isset( $form[ 'id' ] ) && (int) $form[ 'id' ] === 1000 ) {
?>
<script type="text/javascript">wpforms.scrollToError = function(){};</script>
<?php
}
}
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_scroll_to_error_by_form_id', 10, 1 );
コード中の1000は必ず自分のフォームIDに置き換えてください。フォームIDを探すのに助けが必要な場合は、フォームとフィールドのIDを探すガイドをご覧ください。
すべてのフォーム
このコードをすべてのフォームで実行させたい場合は、代わりにこのシンプルなスニペットを使ってください。
/** Disable the scrolling effect on field validation errors
*
* @link https://wpforms.com/developers/how-to-disable-the-scrolling-effect-on-field-validation/
*/
function wpf_dev_disable_scroll_to_error() {
// If scrollToError is disabled for at least one form on the page, it will be disabled for all the forms on the page.
?>
<script type="text/javascript">wpforms.scrollToError = function(){};</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_scroll_to_error', 10 );
どちらかのスニペットを追加すると、フォーム送信中にバリデーションエラーが発生した場合、ページがスムーズにスクロールする代わりに、すぐに最初のエラーにジャンプします。これにより、スムーズなスクロールよりも直接的なナビゲーションを好むユーザーにとって、よりインスタントなフィードバック体験が生まれます。
必要なのはこれだけです！複数ページのフォームを作成する際のスクロール速度を変更したいですか?詳しくはマルチページフォームのスクロール速度変更ガイドをご覧ください。