Cómo deshabilitar el efecto de desplazamiento en los errores de validación de campos

¿Te gustaría evitar que WPForms se desplace automáticamente a los errores de validación? Por defecto, cuando un formulario tiene errores – ya sea un formulario de una sola página o uno con saltos de página – WPForms se desplazará hasta el primer campo con error.

Esta guía te mostrará cómo desactivar este efecto de desplazamiento suave, haciendo que la página salte directamente al error en su lugar.

Configuración de tu formulario

Primero, necesitarás crear tu formulario y añadir tus campos. Si necesitas ayuda para crear un formulario, consulta nuestra guía sobre cómo crear tu primer formulario.

Desactivar efectos de desplazamiento

Tienes dos opciones para desactivar el efecto de desplazamiento: o bien para un formulario específico o para todos los formularios de tu sitio. Veamos ambos métodos.

Para un formulario específico

Si deseas desactivar el efecto de desplazamiento solo para un formulario, utiliza este fragmento de código. Si no estás seguro de cómo añadir código personalizado a tu sitio, consulta nuestra guía sobre cómo añadir fragmentos de código.

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

Asegúrate de reemplazar 1000 en el código con el ID de tu propio formulario. Si necesitas ayuda para encontrar el ID de tu formulario, consulta nuestra guía sobre cómo encontrar IDs de formularios y campos.

Para todos los formularios

Si deseas que este código se ejecute en todos los formularios, utiliza este fragmento más simple en su lugar.

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

Después de añadir cualquiera de los fragmentos, cuando ocurra un error de validación durante el envío del formulario, la página saltará inmediatamente al primer error en lugar de desplazarse suavemente hasta él. Esto crea una experiencia de retroalimentación más instantánea para los usuarios que prefieren la navegación directa al desplazamiento suave.

¡Y eso es todo lo que necesitas! ¿Te gustaría cambiar la velocidad de desplazamiento al crear formularios de varias páginas? Consulta nuestra guía sobre cómo cambiar la velocidad de desplazamiento en formularios de varias páginas para más detalles.

Acción de referencia

wpforms_wp_footer_end