Souhaitez-vous empêcher WPForms de défiler automatiquement jusqu'aux erreurs de validation ? Par défaut, lorsqu'un formulaire contient des erreurs - qu'il s'agisse d'un formulaire d'une seule page ou d'un formulaire avec des sauts de page - WPForms défile jusqu'au premier champ d'erreur.
Ce guide vous montrera comment désactiver cet effet de défilement fluide et faire en sorte que la page passe directement à l'erreur.
Mise en place du formulaire
Tout d'abord, vous devez créer votre formulaire et ajouter vos champs. Si vous avez besoin d'aide pour créer un formulaire, consultez notre guide sur la création de votre premier formulaire.
Désactivation des effets de défilement
Vous avez deux possibilités pour désactiver l'effet de défilement : soit pour un formulaire spécifique, soit pour tous les formulaires de votre site. Examinons ces deux méthodes.
Pour un formulaire spécifique
Si vous souhaitez désactiver l'effet de défilement pour un seul formulaire, utilisez cet extrait de code. Si vous ne savez pas comment ajouter du code personnalisé à votre site, consultez notre guide sur l'ajout d'extraits de code.
/** 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 );
Veillez à remplacer 1000 dans le code par votre propre identifiant de formulaire. Si vous avez besoin d'aide pour trouver l'identifiant de votre formulaire, consultez notre guide sur la recherche des identifiants de formulaire et de champ.
Pour tous les formulaires
Si vous souhaitez que ce code soit exécuté sur tous les formulaires, utilisez plutôt cet extrait plus simple.
/** 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 );
Après avoir ajouté l'un ou l'autre de ces snippets, lorsqu'une erreur de validation se produit lors de la soumission d'un formulaire, la page passe immédiatement à la première erreur au lieu de la faire défiler en douceur. Cela crée une expérience de retour d'information plus instantanée pour les utilisateurs qui préfèrent une navigation directe à un défilement fluide.
Et c'est tout ce dont vous avez besoin ! Vous souhaitez modifier la vitesse de défilement lors de la création de formulaires multi-pages ? Consultez notre guide sur la modification de la vitesse de défilement des formulaires multi-pages pour plus de détails.