Comment désactiver l’effet de défilement sur les erreurs de validation de champ

Souhaitez-vous empêcher WPForms de faire défiler automatiquement vers les erreurs de validation ? Par défaut, lorsqu’un formulaire présente des erreurs – qu’il s’agisse d’un formulaire d’une seule page ou d’un formulaire avec des sauts de page – WPForms fait défiler la page jusqu’au premier champ d’erreur.

Ce guide vous montrera comment désactiver cet effet de défilement fluide, faisant ainsi sauter la page directement vers l’erreur.

Configuration de votre formulaire

Tout d’abord, vous devrez 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 options pour désactiver l’effet de défilement : soit pour un formulaire spécifique, soit pour tous les formulaires de votre site. Examinons les 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, veuillez consulter 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 );

Assurez-vous de remplacer 1000 dans le code par l’ID de votre propre formulaire. Si vous avez besoin d’aide pour trouver l’ID de votre formulaire, consultez notre guide sur la recherche des ID de formulaire et de champ.

Pour tous les formulaires

Si vous souhaitez que ce code s’exécute 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 extrait, lorsqu’une erreur de validation survient lors de la soumission du formulaire, la page sautera immédiatement à la première erreur au lieu d’y 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 la navigation directe au défilement fluide.

Et c’est tout ce dont vous avez besoin ! Souhaitez-vous modifier la vitesse de défilement lors de la création de formulaires multipages ? Consultez notre guide sur la modification de la vitesse de défilement sur les formulaires multipages pour plus de détails.

Action de référence

wpforms_wp_footer_end