Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Accueil » Divi astuces » Revenir automatiquement en haut de la page après envoi du formulaire

Revenir automatiquement en haut de la page après envoi du formulaire

Temps de lecture : 2 mn

Assurer une expérience utilisateur fluide sur votre site WordPress est essentiel, notamment lorsqu’il s’agit de formulaires de contact. Avec le thème Divi, il peut arriver que les messages d’erreur du module de formulaire de contact ne soient pas immédiatement visibles, surtout si le formulaire est placé loin en bas de la page ou comporte de nombreux champs dépassant la hauteur de la fenêtre du navigateur. Pour remédier à ce problème, il est possible d’implémenter un défilement automatique vers le formulaire en cas d’erreur, garantissant ainsi que l’utilisateur prenne connaissance des messages importants.

Pourquoi le défilement automatique est-il important ?

Lorsque l’utilisateur soumet un formulaire comportant des champs obligatoires non remplis, le module de formulaire de contact de Divi affiche les messages d’erreur en haut du formulaire. Si le formulaire est long ou situé plus bas sur la page, l’utilisateur peut ne pas voir ces messages, ce qui peut entraîner de la confusion et une mauvaise expérience utilisateur. Le défilement automatique permet de diriger immédiatement l’utilisateur vers les messages d’erreur, facilitant ainsi la correction des informations manquantes.

Étapes pour implémenter le défilement automatique

  1. Ajouter une classe CSS au module de formulaire de contact
    • Accédez à votre page contenant le formulaire de contact et ouvrez les paramètres du module en cliquant sur l’icône en forme de roue dentée.
    • Allez dans l’onglet « Avancé », puis dans la section « ID et classes CSS ».
    • Dans le champ « Classe CSS », saisissez dt-cf-scroll.
    • Enregistrez les modifications.
  2. Ajouter le code JavaScript pour le défilement automatique
    • Dans le tableau de bord WordPress, allez dans « Divi » > « Options du thème ».
    • Sélectionnez l’onglet « Intégration ».
    • Dans la section « Ajouter du code au <head> de votre blog », collez le script JavaScript suivant puis enregistrez :
<script>
(function ($) {
  $(document).ready(function () {
    function dt_scroll_form_top() {
      var headerHeight = ($('body').hasClass('logged-in')) ? parseInt($('#main-header').data('height-onload') + $('#wpadminbar').outerHeight()) : parseInt($('#main-header').data('height-onload'));
      var contactForm = $('.dt-cf-scroll.et_pb_contact_form_container');
      console.log(contactForm);
      $('html, body').animate({
        scrollTop: contactForm.offset().top - headerHeight 
      }, 700, 'swing')
    }
    $('.dt-cf-scroll .et_pb_contact_submit').on('click', dt_scroll_form_top)
  });
})(jQuery)
</script>

Explication du code

  • Le script utilise jQuery pour détecter le clic sur le bouton de soumission du formulaire.
  • La fonction dt_scroll_form_top calcule la hauteur de l’en-tête du site, en tenant compte de la barre d’administration si l’utilisateur est connecté.
  • Elle détermine ensuite la position du formulaire de contact sur la page.
  • Enfin, elle anime le défilement de la page vers le haut du formulaire, moins la hauteur de l’en-tête, sur une durée de 700 millisecondes avec un effet de transition « swing ».

Personnalisation supplémentaire

Pour améliorer davantage l’expérience utilisateur, vous pouvez personnaliser l’apparence des messages d’erreur et de succès du formulaire de contact. En ajoutant du CSS personnalisé, il est possible de modifier la taille de la police, la couleur du texte et d’autres propriétés pour les messages affichés. Par exemple, pour changer la couleur des messages d’erreur en rouge et celle des messages de succès en vert, vous pouvez ajouter le code CSS suivant dans la section « CSS personnalisé » du module de formulaire de contact :

selector .et-pb-contact-message p {  font-size: 20px;
  line-height: 1.5em;
  color: #06a022; /* Vert pour les messages de succès */
}
selector .et-pb-contact-message:has(ul) p {
  font-size: 16px;
  line-height: 1.5em;
  color: red; /* Rouge pour les messages d'erreur */
}
selector .et-pb-contact-message ul {
  font-size: 16px;
  line-height: 1.5em;
  color: red; /* Rouge pour la liste des erreurs */
}

Ces ajustements garantissent que les messages sont bien visibles et cohérents avec le design de votre site.

Pour conclure

En implémentant le défilement automatique vers le module de formulaire de contact en cas d'erreur, vous améliorez significativement l'expérience utilisateur sur votre site WordPress utilisant le thème Divi. Cette fonctionnalité assure que les visiteurs sont immédiatement informés des problèmes lors de la soumission du formulaire, leur permettant ainsi de corriger rapidement les erreurs et de compléter avec succès leur interaction avec votre site.

Continuer la lecture

Intégrer la balise Google analytics à son site

Google Analytics est un outil indispensable pour suivre les performances de votre site web et comprendre le comportement de vos visiteurs. Si vous utilisez WordPress et le thème Divi, vous avez de la chance, car l’intégration de Google Analytics est à la fois simple...

lire plus

Créer des effets d’apparition captivants avec Divi

Le design web joue un rôle clé dans l’expérience utilisateur en ligne, et les animations subtiles, comme les effets d’apparition, permettent d’ajouter une touche dynamique et professionnelle à un site internet. Avec le thème Divi, l’un des constructeurs de pages les...

lire plus