AI要約
WPForms が検証エラーに自動的にスクロールするのを停止しますか？デフォルトでは、フォームにエラーがある場合（シングルページフォームでもページ区切りがあるフォームでも）、WPForms は最初のエラーフィールドまでスクロールします。
このガイドでは、このスムーズスクロール効果を無効にする方法を説明します。これにより、ページはエラーに直接ジャンプするようになります。
フォームの設定
まず、フォームを作成し、フィールドを追加する必要があります。フォームの作成にヘルプが必要な場合は、最初のフォームの作成方法に関するガイドをご覧ください。
スクロール効果の無効化
スクロール効果を無効にするには、特定のフォームまたはサイト上のすべてのフォームのいずれかのオプションがあります。両方の方法を見てみましょう。
特定のフォームの場合
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 );
どちらかのスニペットを追加した後、フォーム送信中に検証エラーが発生した場合、ページはスムーズにスクロールするのではなく、最初のエラーにすぐにジャンプします。これにより、スムーズスクロールよりも直接的なナビゲーションを好むユーザーにとって、より即時的なフィードバック体験が得られます。
これで完了です！マルチページフォームを作成する際のスクロール速度を変更したいですか？詳細については、マルチページフォームでのスクロール速度の変更に関するガイドを確認してください。