Comment styliser les formulaires dans Contact Form 7 avec du CSS dans WordPress
Vous souhaitez que vos formulaires WordPress soient aussi élégants que le reste de votre site ? Avec Contact Form 7, vous avez un contrôle total sur l’apparence de vos formulaires grâce au CSS. Ce guide vous accompagne étape par étape dans le processus de personnalisation des formulaires Contact Form 7, afin de créer une expérience homogène et fidèle à votre marque pour vos visiteurs.
Pourquoi personnaliser les formulaires Contact Form 7 ?
Contact Form 7 est l’un des plugins WordPress les plus populaires pour créer des formulaires — mais son apparence par défaut est basique. La personnalisation dans les thèmes WordPress classiques vous permet de :
Adaptez à l’identité visuelle de votre site
Améliorez l’utilisabilité et l’accessibilité
Rendez vos formulaires plus attrayants et professionnels
Étape 1 : Identifiez les sélecteurs CSS de votre formulaire
Avant de commencer à personnaliser, vous devez savoir quels sélecteurs CSS ciblent les éléments de votre formulaire.
Chaque formulaire Contact Form 7 est enveloppé dans une classe unique : .wpcf7
Les éléments individuels comme les champs de saisie, les zones de texte et les boutons d’envoi utilisent des balises HTML standard
Étape 2 : Ajoutez du CSS personnalisé à votre site WordPress
Vous pouvez ajouter du CSS de deux manières principales :
Via le Customizer :
Allez dans Apparence > Personnaliser > CSS additionnel et collez vos styles.
REMARQUE : Ajoutez votre CSS dans le fichier style.css de votre thème enfant pour des personnalisations plus avancées.
Étape 3 : Rédigez votre CSS personnalisé
Voici quelques exemples courants pour commencer, en utilisant les composants « texte » et « envoyer » du formulaire comme exemple :
Personnaliser tous les formulaires Contact Form 7
.wpcf7 input[type="text"],
.wpcf7 textarea {
border: 2px solid #0073e6;
padding: 10px;
width: 100%;
font-size: 1em;
}
.wpcf7 input[type="submit"] {
background: #0073e6;
color: #fff;
border: none;
padding: 12px 30px;
font-size: 1em;
cursor: pointer;
transition: background 0.2s;
}
.wpcf7 input[type="submit"]:hover {
background: #005bb5;
}
Les pseudo-classes en CSS, telles que :hover, vous permettent de styliser les éléments selon leur état ou l’interaction de l’utilisateur. Par exemple, la pseudo-classe :hover applique des styles lorsqu’un utilisateur survole un bouton ou un champ avec sa souris. Cela sert souvent à mettre en valeur les boutons ou à changer leur couleur au survol, rendant vos formulaires plus interactifs et attrayants visuellement. D’autres pseudo-classes utiles incluent :focus (quand un champ est sélectionné) et :active (quand un élément est cliqué). Utiliser les pseudo-classes améliore l’expérience utilisateur en fournissant un retour immédiat lors de l’interaction avec votre formulaire.
Cibler un formulaire spécifique
Chaque formulaire possède un identifiant unique, comme #wpcf7-f123-o1. Utilisez-le pour personnaliser uniquement ce formulaire :
#wpcf7-f123-o1 input[type="text"] {
background: #f9f9f9;
}
Remplacez f123-o1 par l’identifiant réel de votre formulaire. Vous pouvez trouver l’identifiant unique de votre formulaire en affichant la page où il est intégré, en faisant un clic droit sur le formulaire puis en sélectionnant « Inspecter » (ou « Inspecter l’élément ») dans votre navigateur. Cherchez la balise <div> avec la classe .wpcf7 : l’identifiant apparaîtra sous la forme id="wpcf7-f123-o1" dans le code HTML. Utilisez cet identifiant dans votre sélecteur CSS pour cibler uniquement ce formulaire.
Étape 4 : Utilisez les classes intégrées de Contact Form 7
Contact Form 7 ajoute automatiquement des classes aux éléments, ce qui facilite encore plus le ciblage. Par exemple :
.wpcf7-form-control – Tous les contrôles de formulaire
.wpcf7-submit – Le bouton d’envoi
Vous pouvez également ajouter vos propres classes dans l’éditeur de formulaire pour un contrôle encore plus poussé.
Exemple
.wpcf7-form-control.wpcf7-text {
border-radius: 5px;
}
.wpcf7-submit {
font-weight: bold;
letter-spacing: 1px;
}
Étape 5 : Prévisualisez et ajustez
Après avoir enregistré votre CSS, actualisez votre site pour voir les changements. Utilisez l’outil d’inspection de votre navigateur pour ajuster les styles en temps réel avant de les copier sur votre site. Pensez à vider le cache de votre site après chaque modification afin que les mises à jour soient visibles pour les visiteurs.
Voici des exemples avant/après d’un formulaire sur un site de démonstration, où nous avons utilisé le code CSS de l’étape 3 pour rendre les contours de chaque champ bleus.
Astuces rapides pour un meilleur style de formulaire
Rendez-le accessible : Assurez un bon contraste de couleurs et des tailles de police lisibles
Utilisez l’espacement : Ajoutez des marges et du padding pour un rendu propre et aéré
Mettez en avant les erreurs : Stylisez les messages d’erreur avec une couleur bien visible (comme le rouge) pour aider les utilisateurs à corriger leurs erreurs
Testez sur mobile : Vérifiez que vos formulaires s’affichent correctement sur tous les appareils
Dépannage
Si vos styles ne s’affichent pas, essayez ces étapes :
Videz le cache de votre navigateur et de votre site – Parfois, les fichiers mis en cache empêchent l’affichage du nouveau CSS. Si vous utilisez une extension de cache ou un hébergement géré, videz également ces caches.
Vérifiez les problèmes de spécificité CSS – Si vos styles ne s’appliquent pas, essayez de rendre vos sélecteurs plus spécifiques pour écraser les styles existants.
Assurez-vous de modifier le bon fichier ou la bonne section CSS – Vérifiez que vous ajoutez votre code au bon endroit, comme le panneau CSS additionnel, le style.css de votre thème enfant ou une extension CSS personnalisée.
Vérifiez les classes CSS pour les fautes de frappe ou erreurs – Recherchez les noms de classes mal orthographiés, les espaces inutiles ou l’utilisation accidentelle d’une mauvaise classe. Vérifiez aussi que la classe ciblée existe bien dans le HTML de votre formulaire.
Vérifiez les classes dupliquées ou en conflit – Assurez-vous que la classe utilisée n’est pas déjà appliquée ailleurs avec des styles différents qui pourraient écraser vos modifications.
Respectez les bonnes pratiques générales – Utilisez des noms de classes clairs et cohérents, terminez chaque règle CSS par un point-virgule et fermez toujours correctement les blocs de code avec une accolade (}).
Un examen minutieux de votre code pour ces problèmes courants vous aidera à garantir que vos styles personnalisés s’affichent correctement sur votre site.
Exemple : CSS personnalisé complet pour un formulaire Contact Form 7
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px 12px;
margin-bottom: 16px;
width: 100%;
box-sizing: border-box;
}
.wpcf7 input[type="submit"] {
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
padding: 10px 24px;
font-size: 1.1em;
cursor: pointer;
}
.wpcf7 input[type="submit"]:hover {
background-color: #218838;
}
Voici un exemple de formulaire stylisé avec le code CSS ci-dessus. Ce code CSS personnalise l’apparence de plusieurs éléments clés de votre formulaire Contact Form 7. Il cible tous les champs texte, email et les zones de texte, leur donnant une bordure gris clair, des coins arrondis, un padding confortable et une largeur uniforme pour un rendu moderne et épuré.
Le code stylise également le bouton d’envoi avec un fond vert, un texte blanc, des bords arrondis et une police en gras facile à lire. Lorsque les utilisateurs survolent le bouton, la couleur de fond devient vert foncé, offrant un retour interactif.
Ajouter du CSS : thèmes classiques vs thèmes blocs
Les étapes de ce guide pour styliser les formulaires Contact Form 7 avec du CSS sont conçues pour les thèmes classiques de WordPress. Les thèmes classiques, comme le populaire Astra, utilisent le Customizer, où vous pouvez facilement ajouter du CSS personnalisé dans la section « CSS additionnel ». Cela permet de styliser vos formulaires et de voir les modifications en direct.
Cependant, si votre site utilise un thème bloc (parfois appelé Full Site Editing ou FSE), le processus est différent. Les thèmes blocs n’incluent pas toujours le Customizer ou le champ « CSS additionnel » par défaut. À la place, vous utilisez l’Éditeur de site pour effectuer des modifications de design. Bien que vous puissiez ajuster les styles globaux pour les couleurs, la typographie et la mise en page, l’ajout de CSS personnalisé n’est pas toujours disponible dans l’interface.
Que faire si vous utilisez un thème bloc
Ouvrez votre tableau de bord WordPress et allez dans Apparence > Éditeur (l’Éditeur de site).
Dans l’Éditeur de site, recherchez le panneau Styles (l’icône cercle à moitié ombrée).
Certains thèmes blocs proposent désormais une option « CSS additionnel » dans le panneau Styles, mais cela dépend de votre thème et de la version de WordPress.
Si vous ne voyez pas d’option pour ajouter du CSS personnalisé, vous pouvez utiliser une extension comme WPCode pour ajouter du CSS à l’ensemble du site. WPCode est facile à prendre en main et fonctionne avec n’importe quel thème, ce qui vous permet de styliser vos formulaires même si votre thème ne prend pas en charge l’édition directe du CSS dans l’interface. Sachez simplement que l’installation de cette extension peut affecter le style d’autres formulaires déjà présents sur votre site.
Ressources complémentaires
Personnaliser vos formulaires Contact Form 7 est une manière simple mais puissante d’améliorer l’expérience utilisateur de votre site. Avec seulement quelques lignes de CSS, vous pouvez rendre vos formulaires parfaitement intégrés à votre marque.