Mis à jour le 12 octobre 2026
Pour personnaliser un formulaire dans Divi 5, vous disposez de trois leviers : des options de style séparées pour les champs texte, les cases à cocher et les boutons radio, des états :hover, :focus et :checked éditables sans CSS, et des préréglages réutilisables sur tout le site. Un module Contact Form 7 complète le tout.
Je gère plus de 50 sites WordPress depuis 2005, et les formulaires sont un point de friction récurrent : chaque thème ou constructeur les stylise à sa façon, et on finit souvent par écrire du CSS à la main. Voici ce que Divi 5 change, d’après la publication d’Elegant Themes du 21 avril 2026 et leur documentation.
Quelles options de champs de formulaire Divi 5 propose-t-il ?
Divi 5 sépare les réglages de chaque module de formulaire en trois groupes : Input (champs texte), Checkbox (cases à cocher) et Radio (boutons radio). Tous les modules de formulaire partagent le même jeu d’options, ce qui rend le style cohérent d’un module à l’autre.
- Input : style du champ, des libellés (labels) et des textes d’indication (placeholders).
- Checkbox et Radio : texte, espacement, icône, arrière-plan, bordure et ombre.
Ces réglages s’appuient sur la suite complète des options de design de Divi, détaillée dans le guide des nouvelles options de champs. L’article ne mentionne pas de groupe dédié aux listes déroulantes (select), je ne peux donc pas vous en promettre un.
Comment styliser les états hover, focus et checked ?
Divi 5 permet d’éditer visuellement trois états : :hover (survol), :focus (le visiteur clique ou tabule dans un champ) et :checked (case ou bouton radio sélectionné). On change l’apparence d’un champ actif ou d’une case cochée sans écrire une ligne de CSS.
Les anciennes options de focus de Divi sont dépréciées et migrées vers ce nouveau mode, d’après Elegant Themes. Si vous avez déjà des formulaires stylisés, vérifiez le rendu du focus après la mise à jour.
Mon conseil : soignez l’état focus en priorité. Un contour bien visible aide les personnes qui naviguent au clavier, et c’est un point d’accessibilité que je contrôle systématiquement sur un formulaire de contact.
À quoi servent les préréglages de champs de formulaire ?
Les préréglages enregistrent un style pour qu’il soit réutilisé sur tous les modules compatibles. Vous modifiez le préréglage une fois, et chaque formulaire qui l’utilise suit. Cela évite de retoucher module par module et garde un design homogène sur tout le site.
Elegant Themes distingue deux niveaux, détaillés dans son article sur les options de champs :
- Préréglages de groupes d’options : pour les groupes Input, Checkbox et Radio.
- Préréglage d’élément : pour le module de formulaire complet, avec la possibilité d’en faire le préréglage par défaut.
Sur un parc de sites, c’est le gain le plus concret : une charte de formulaire définie une fois, appliquée partout.
Comment utiliser Contact Form 7 avec Divi 5 ?
Divi 5 inclut un module Contact Form 7 qui affiche un formulaire CF7 existant dans le Visual Builder et le stylise avec les réglages de Divi. Contact Form 7 garde la logique (champs, e-mails, validation), Divi s’occupe uniquement de l’apparence.
Prérequis, selon la présentation du module : Divi 5, l’extension Contact Form 7 activée et au moins un formulaire publié, sinon la liste de sélection reste vide. Le module permet de styliser :
- les champs, libellés et placeholders ;
- les cases à cocher et boutons radio ;
- le bouton d’envoi, y compris au survol ;
- les messages de succès, de validation et d’erreur.
C’est le premier d’une série de modules d’intégration annoncée par Elegant Themes. Je ne détaille pas les suivants : ils ne sont pas documentés à ce jour.
Quel indicateur montre qu’un réglage a été modifié ?
Un point bleu apparaît dans le panneau de réglages quand un réglage ou un groupe contient des modifications. Il complète le filtre de recherche des réglages modifiés. Sur un formulaire retouché plusieurs fois, il permet de repérer d’un coup d’œil ce qui s’écarte du préréglage.
Que choisir : options natives Divi 5 ou CSS personnalisé ?
Pour la grande majorité des formulaires de contact, les options natives suffisent : le CSS ne reste utile que pour un comportement très particulier. Le tableau résume ma façon de trancher.
| Besoin | Approche |
|---|---|
| Style de champs, libellés, placeholders | Options Input |
| Cases à cocher et boutons radio | Options Checkbox et Radio, état checked |
| Cohérence entre plusieurs formulaires | Préréglages de groupes ou d’élément |
| Formulaire géré par Contact Form 7 | Module Contact Form 7 |
| Animation ou comportement spécifique | CSS personnalisé |
Pour d’autres nouveautés du constructeur, voir aussi mon article sur les éléments imbriqués de Divi 5.
Questions fréquentes
Quelles sont les nouveautés de personnalisation des formulaires dans Divi 5 ?
Divi 5 sépare les options des champs texte, cases à cocher et boutons radio, ajoute l’édition des états focus et checked, propose des préréglages réutilisables et un module Contact Form 7.
Peut-on utiliser Contact Form 7 avec Divi 5 ?
Oui. Le module Contact Form 7 affiche un formulaire CF7 existant dans le Visual Builder et le stylise avec les réglages de Divi. L’extension Contact Form 7 doit être installée et activée.
Que sont les préréglages de formulaire dans Divi 5 ?
Ce sont des styles enregistrés, applicables à plusieurs modules. Ils existent pour les groupes Input, Checkbox et Radio, et pour le module de formulaire entier.
Faut-il savoir coder pour personnaliser un formulaire Divi 5 ?
Non, pour la plupart des cas : les états hover, focus et checked s’éditent dans le constructeur. Le CSS reste utile pour des comportements très spécifiques.