Un bon formulaire de contact Divi doit faire trois choses à la fois: rester lisible, inspirer confiance et envoyer les messages au bon endroit. Dans le Theme Builder, le vrai sujet n’est pas seulement de l’ajouter, mais de lui donner une logique claire, des champs utiles et une interface qui ne gêne jamais l’envoi. Ici, je détaille la mise en place, le design, les réglages d’envoi et les limites du module natif quand le besoin devient plus ambitieux.
Les points essentiels à retenir pour un formulaire Divi vraiment exploitable
- Le module natif suffit dans la plupart des cas pour une page contact, un support simple ou une demande de devis légère.
- Dans Divi 5, les réglages se structurent autour de trois onglets: Content, Design et Advanced.
- Un bon formulaire commence par peu de champs: nom, email, message, puis un ou deux champs de qualification au maximum.
- Le design n’est pas décoratif: espacements, largeur, contraste et style du bouton influencent directement le taux d’envoi.
- Le spam et la livraison des emails sont deux sujets différents; il faut traiter les deux séparément.
- Si vous avez besoin de pièces jointes, de stockage des soumissions ou d’options avancées, une extension devient vite plus pertinente.
Placer le formulaire au bon endroit dans le Theme Builder
Quand je construis une page Contact dans Divi, je commence par le contexte d’usage, pas par le style. Un formulaire placé au mauvais endroit crée de la friction, même s’il est joli. Dans un template du Theme Builder, je préfère généralement le mettre dans le corps de page ou dans une section dédiée, plutôt que de le noyer dans un footer global qui mélange plusieurs intentions. Une page contact doit rester simple à comprendre: une promesse claire, quelques champs, puis l’envoi.
Le Theme Builder est intéressant parce qu’il permet de traiter le formulaire comme un élément de mise en page à part entière. Si vous avez une page de contact unique, je recommande un template spécifique. Si vous avez besoin d’un bloc de demande rapide sur plusieurs pages, vous pouvez aussi sauvegarder la section dans la bibliothèque Divi pour la réutiliser sans tout reconstruire. Cette approche évite les variantes incohérentes et vous fait gagner du temps dès qu’il faut corriger un texte, un champ ou un bouton.
Le point à garder en tête est simple: plus le formulaire est central dans votre parcours de conversion, plus il mérite une place visible et stable. Une fois cet emplacement décidé, tout le reste devient plus cohérent, à commencer par la sélection des champs.
Choisir les champs qui réduisent la friction
La documentation d’Elegant Themes rappelle que le module natif couvre six types de champs: input, email, textarea, checkboxes, radio buttons et select dropdown. C’est suffisant pour la majorité des besoins, à condition de ne pas tout utiliser par réflexe. Je pars presque toujours du principe qu’un bon formulaire en demande moins, pas plus. En pratique, je vise souvent 3 à 5 champs au départ, puis j’ajoute uniquement ce qui sert vraiment à qualifier la demande.
| Type de champ | Quand l’utiliser | Mon conseil |
|---|---|---|
| Input | Nom, société, téléphone court, référence simple | Parfait pour les réponses brèves; ne l’utilisez pas pour des informations longues. |
| Dès que vous devez répondre au visiteur | Indispensable dans presque tous les cas. | |
| Textarea | Message libre, brief, description de projet | Réservez-le au contenu réellement narratif. |
| Checkboxes | Plusieurs choix possibles | Utile pour des préférences ou des services multiples. |
| Radio buttons | Un seul choix parmi plusieurs options | Idéal quand la réponse doit être exclusive. |
| Select | Liste plus compacte d’options | Je l’utilise quand je veux garder l’interface plus dense mais lisible. |
La logique que j’applique est assez stricte: un champ doit avoir une raison claire d’exister. Si une question n’aide ni la qualification, ni la réponse, ni le tri interne, je la retire. C’est souvent là que les formulaires s’allègent vraiment. Les champs à choix sont utiles, mais seulement quand ils remplacent une hésitation inutile du visiteur. Sinon, ils ajoutent du bruit.
Je vous conseille aussi de distinguer les champs obligatoires des champs optionnels avec parcimonie. Trop de champs requis donne une impression de contrôle excessif et fait chuter les envois. À l’inverse, un formulaire trop vide peut vous faire perdre du contexte. L’équilibre se joue entre simplicité et qualité de qualification. Une fois cette base posée, on peut s’occuper de l’interface sans perdre en clarté.
Soigner l’interface sans alourdir le formulaire
Dans Divi 5, le panneau du module est organisé de façon plus lisible, avec les onglets Content, Design et Advanced. C’est pratique, mais l’abondance d’options peut vite pousser à trop en faire. Mon approche est plus sobre: je commence par le layout, puis je règle la lisibilité, puis je touche au reste seulement si le design du site le justifie.
| Réglage de mise en page | Quand je le choisis | Effet obtenu |
|---|---|---|
| Block | Formulaire court, lecture verticale, interface très simple | Le parcours est évident et la page reste respirable. |
| Flex | Organisation souple, deux champs côte à côte sur desktop | Bon compromis entre densité et lisibilité. |
| Grid | Formulaire plus structuré ou plus éditorial | Plus de contrôle visuel, mais aussi plus de rigueur nécessaire. |
Sur la partie visuelle, je garde des repères simples. Pour les champs, une taille de texte autour de 16 à 18 px sur desktop reste confortable, avec une descente vers 14 à 16 px sur mobile. Pour le bouton, un texte lisible et un padding généreux changent plus de choses qu’un effet sophistiqué. J’évite les boutons trop petits, les coins excessivement arrondis si le reste du site est net, et les ombres trop fortes qui donnent un aspect daté. Le but n’est pas de faire “technique”, mais de rendre l’action immédiate.
Je fais aussi attention aux labels. Un formulaire qui repose uniquement sur des placeholders finit souvent par devenir moins accessible et moins clair dès qu’on commence à taper. Les labels visibles restent, à mes yeux, la meilleure solution pour un formulaire propre et durable. Si vous voulez une interface plus premium, jouez d’abord sur l’espace, la hiérarchie typographique et le contraste. Les effets comme les animations, les transformations ou les filtres doivent rester secondaires. Ils peuvent apporter du relief, mais ils ne rattrapent jamais un formulaire mal structuré.
Le plus important reste la cohérence: mêmes rayons, mêmes espacements, mêmes contrastes entre les champs et le bouton. C’est cette discipline qui donne une impression de maîtrise, et elle prépare naturellement les réglages d’envoi et de sécurité.
Régler l’envoi, le message de succès et le spam sans approximation
Un formulaire beau mais mal configuré est inutile. J’insiste souvent sur ce point, car c’est là que les problèmes apparaissent le plus tard, quand le site est déjà en ligne. Dans le module, la zone Email sert à définir l’adresse de réception, mais aussi le message pattern, c’est-à-dire la structure du message que vous allez recevoir. Si ce mapping est mal pensé, vos emails arrivent, mais ils sont difficiles à relire.
Je recommande de nommer les champs et leurs identifiants de façon simple et cohérente, puis de tester le message reçu en conditions réelles. Si vous avez besoin que plusieurs personnes reçoivent les demandes, Divi permet aussi d’envoyer les notifications à plusieurs adresses séparées par une virgule. C’est pratique pour une équipe commerciale ou support, à condition de garder une logique claire: qui reçoit quoi, et pourquoi.
Pour la protection antispam, je pars du principe qu’elle doit être activée dès le départ sur les formulaires exposés publiquement. Divi peut s’appuyer sur une protection dédiée ou sur un captcha selon votre configuration. Je préfère une approche proactive plutôt que d’attendre d’être submergé par de faux envois. Le message de succès mérite lui aussi un vrai soin: il doit confirmer l’action, indiquer ce qui se passe ensuite et éviter les formulations vagues.
Une bonne routine de contrôle consiste à tester au moins trois choses: l’envoi, la réception et la lisibilité du message. Si l’un de ces maillons casse, tout le formulaire devient moins crédible. C’est précisément pour éviter ce genre de bricolage que je compare ensuite le module natif avec les alternatives disponibles.
Quand le module natif suffit et quand il faut une extension
Le module natif reste le meilleur point de départ dans la plupart des projets WordPress sous Divi. Il est intégré, cohérent avec le reste du builder et beaucoup plus simple à maintenir. Mais il ne couvre pas tous les scénarios. Par exemple, il ne propose pas l’envoi de fichiers par défaut. Si vous devez collecter des pièces jointes, du planning ou des données plus spécialisées, il vaut mieux regarder une extension adaptée plutôt que de tordre le module de base.
| Besoin | Solution la plus simple | Limite principale |
|---|---|---|
| Formulaire de contact standard | Module natif Divi | Très bien tant que la logique reste simple. |
| Qualification légère des demandes | Module natif avec champs à choix | Peu adapté aux logiques très avancées. |
| Pièces jointes, date, heure ou stockage des soumissions | Extension dédiée comme Divi Contact Form Helper | Ajoute une couche de maintenance supplémentaire. |
| Formulaire déjà standardisé sur Contact Form 7 | Intégration ou module de styler CF7 | Nécessite de gérer un plugin en plus du builder. |
Je vois souvent une erreur récurrente: vouloir tout faire avec le module natif alors que le besoin a déjà changé de catégorie. Dès qu’il faut stocker les soumissions, gérer des uploads, ajouter des champs plus métiers ou automatiser des cas complexes, l’extension devient plus rationnelle. En revanche, pour une page contact classique, je préfère encore le module de Divi. Moins d’empilement, moins de dépendances, moins de maintenance. Et dans un site WordPress, cette sobriété compte beaucoup.
Autrement dit, le bon choix dépend moins de la “puissance” d’un outil que de la netteté de votre besoin. Si vous savez exactement ce que le formulaire doit produire, la décision devient beaucoup plus simple. Il reste alors un dernier filtre: vérifier que tout tient parfaitement sur mobile et qu’aucun détail d’interface ne casse l’expérience.
Les vérifications que je fais avant de publier
Avant de mettre le formulaire en ligne, je passe toujours par une série de tests courts mais indispensables. Un formulaire qui fonctionne sur desktop peut vite devenir pénible sur smartphone si les champs sont trop serrés, si le bouton passe sous la ligne de flottaison ou si l’ordre visuel perd sa logique. Dans Divi, les réglages responsives aident beaucoup, mais ils ne remplacent pas un vrai contrôle manuel.
- Je teste l’affichage sur desktop, tablette et mobile pour vérifier les retours à la ligne et l’empilement des champs.
- Je relis le message de succès pour qu’il soit clair, court et rassurant.
- Je m’assure que la boîte de réception utilisée pour les notifications est vraiment surveillée.
- Je vérifie que le formulaire ne demande pas plus d’informations que nécessaire.
- Je confirme que les labels, le contraste et l’espace entre les éléments restent confortables à la lecture.
- Je refais un envoi test après chaque modification importante du formulaire ou du template.
Si vous devez réutiliser le même bloc ailleurs, je conseille aussi de le sauvegarder dans la Divi Library dès qu’il est stable. C’est une petite habitude, mais elle évite beaucoup de divergences de style à moyen terme. Au fond, un bon formulaire Divi n’est pas celui qui en montre le plus, c’est celui qui fait gagner du temps à l’utilisateur tout en vous livrant une demande claire, propre et exploitable. Si vous gardez cette logique, la partie design reste au service de l’action, et c’est exactement ce qu’on attend d’un formulaire bien construit.
