¿Desea 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 de error.
Esta guía le mostrará cómo desactivar este efecto de desplazamiento suave, haciendo que la página salte directamente al error en su lugar.
Configuración del formulario
En primer lugar, tendrás que crear tu formulario y añadir tus campos. Si necesitas ayuda para crear un formulario, nuestra guía sobre cómo crear tu primer formulario.
Desactivar los efectos de desplazamiento
Tiene dos opciones para desactivar el efecto de desplazamiento: para un formulario específico o para todos los formularios de su sitio. Veamos ambos métodos.
Para un formulario específico
Si desea desactivar el efecto de desplazamiento para un solo formulario, utilice 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úrese de sustituir 1000 en el código por su propio ID de formulario. Si necesitas ayuda para encontrar tu ID de formulario, consulta nuestra guía sobre cómo encontrar ID de formulario y de campo.
Para todos los formularios
Si desea que este código se ejecute en todos los formularios, utilice en su lugar este fragmento más sencillo.
/** 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 estos fragmentos, cuando se produzca 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 allí. Esto crea una experiencia de respuesta más instantánea para los usuarios que prefieren la navegación directa al desplazamiento suave.
¡Y eso es todo lo que necesitas! ¿Quieres cambiar la velocidad de desplazamiento al crear formularios multipágina? Echa un vistazo a nuestra guía sobre cómo cambiar la velocidad de desplazamiento en formularios multipágina para más detalles.