How to Disable the Scrolling Effect on Field Validation Errors

Introduction

Would you like to disable the scrolling effect on your field validation errors? Whether it’s just a full form or a form with Page Break fields, by default, if there is a field validation error on the page, the natural behavior is to scroll up to the field with the error. Using a small code snippet you can easily disable this scrolling and the page would just jump to the field with the validation error instead of scrolling.

Creating the form

First, you’ll need to create your form and add your fields. If you need any help in creating a form, please see this documentation.

Adding the snippet to disable scrolling effect

To disable this scrolling effect, simply add this code snippet to your site.

If you need assistance in adding snippets to your site, please see this tutorial.

/** 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 374
        if ( isset( $form[ 'id' ] ) && (int) $form[ 'id' ] === 374 ) {
    ?>

            <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 );

By adding this snippet, the code will only run on the form ID 374 and when the scrollToError is triggered which is what triggers the scrolling to the field with the validation error, it will skip the default scrolling and just jump to the field with the error instead.

You’ll need to update the form ID to match your own form ID. If you need help in finding your form ID, please check out this tutorial.

If you would like to have this code run on all forms, use this snippet instead.

/** 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 );

Now when a validation occurs on submitting the form, rather than scrolling to the validation message, the page will just jump up to the first error of the form.

And that’s all you need! Would you like to change the speed of the scrolling when creating multi page forms? Check out our tutorial on How to Change the Scrolling Speed on Multi Page Forms.

Related

Action Reference: wpforms_wp_footer_end