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
- 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.
- 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 */
}