Comment styliser les formulaires Contact Form 7 dans WordPress

Vous avez probablement installé Contact Form 7 sur votre site WordPress car il est gratuit et a été l'un des plugins de formulaire de contact les plus populaires pour WordPress.

Cependant, vous avez peut-être remarqué que les formulaires par défaut ont l'air assez simples sur votre site en direct. Ce style gris de base peut jurer avec le reste de votre site et donner à la conception globale un aspect moins soigné.

Comme Contact Form 7 n'inclut pas d'éditeur visuel ni d'options de style intégrées, apporter des modifications demande un peu de travail si vous n'êtes pas à l'aise avec le code.

La bonne nouvelle, c'est que vous n'avez pas besoin d'être un développeur pour résoudre ce problème. Avec quelques ajustements CSS, vous pouvez rendre vos formulaires propres, modernes et entièrement conformes à votre marque.

Dans ce guide pour débutants, nous vous expliquerons comment personnaliser Contact Form 7 étape par étape, sans compétences avancées en codage ou en design. 🙌

Pourquoi styliser vos formulaires Contact Form 7 ?

Styling your Contact Form 7 forms makes your site look more professional, improves readability, and helps your forms match your brand. All these can increase trust and form conversions.

Avant de commencer, Contact Form 7 est l'un des plugins de formulaire de contact les plus populaires pour WordPress. Il est gratuit et vous permet d'ajouter un formulaire WordPress à l'aide d'un shortcode.

Le revers de la médaille est que Contact Form 7 est assez limité en termes de fonctionnalités de conception et de personnalisation. De plus, il n'offre aucune option intégrée pour modifier le style de vos formulaires.

Cela rend difficile de faire correspondre la conception de votre formulaire de contact avec le thème de votre site web ou de modifier des détails de base comme la police et la couleur de fond pour que votre formulaire se démarque.

Plus important encore, le plugin a gelé le développement de nouvelles fonctionnalités, ce qui signifie qu'il ne recevra pas de mises à jour au-delà des corrections de bugs critiques et des correctifs de sécurité.

Cela dit, nous allons maintenant voir comment styliser un formulaire Contact Form 7 dans WordPress. Voici ce que nous allons couvrir dans les sections suivantes :

Commençons !

Premiers pas avec Contact Form 7

Tout d'abord, vous devrez installer et activer le plugin Contact Form 7 sur votre site web.

Pour ce faire, rendons-nous sur Plugins » Ajouter un nouveau plugin dans votre zone d'administration WordPress.

Cela ouvrira la page où vous pouvez choisir un plugin dans le répertoire des plugins WordPress.

Utilisez la fonction de recherche pour trouver rapidement le plugin. Ensuite, vous pouvez cliquer sur le bouton « Installer maintenant » dans le résultat de la recherche.

N'oubliez pas de cliquer sur le bouton « Activer » pour l'activer sur votre site WordPress. Si vous avez besoin d'aide, veuillez consulter notre guide sur comment installer un plugin WordPress.

Après l'activation, vous pouvez aller dans Contact » Ajouter nouveau depuis votre tableau de bord WordPress.

Vous pouvez maintenant modifier les paramètres du formulaire pour votre site web et commencer par entrer un titre pour votre formulaire.

Le plugin ajoutera automatiquement les champs par défaut pour le nom, l'adresse e-mail, l'objet et le message. Vous pouvez également ajouter d'autres champs en les faisant simplement glisser et déposer où vous le souhaitez.

Lorsque vous avez terminé, n'oubliez pas de cliquer sur le bouton « Enregistrer » et de copier le shortcode.

La prochaine étape consiste à intégrer le formulaire dans votre article de blog ou votre page.

Pour ce faire, modifiez simplement un article ou ajoutez-en un nouveau.

Une fois dans l'éditeur WordPress, cliquez sur le signe « + » en haut, puis ajoutez un bloc Shortcode.

Après cela, entrez simplement le shortcode de votre formulaire Contact Form 7 dans le bloc shortcode. Il ressemblera à ceci :

[contact-form-7 id="117" title="Contact Form"]

Maintenant, publiez votre article ou votre page pour voir le formulaire de contact en action.

Pour ce tutoriel, nous avons utilisé le formulaire de contact par défaut et l'avons ajouté à une page WordPress. Voici à quoi ressemblait le formulaire de contact sur notre site de test.

Vous êtes maintenant prêt à personnaliser votre formulaire Contact Form 7 dans WordPress.

Méthode 1 : Styliser les formulaires Contact Form 7 à l'aide de CSS personnalisé

Comme Contact Form 7 n'a pas d'options de style intégrées, vous devrez utiliser CSS pour styliser vos formulaires.

Contact Form 7 ajoute des classes CSS et des ID standard aux éléments du formulaire. Cela facilite la personnalisation du design si vous connaissez un peu le CSS.

Chaque formulaire Contact Form 7 utilise la classe CSS .wpcf7, que vous pouvez cibler pour styliser votre formulaire.

Dans cet exemple, nous utiliserons une police personnalisée appelée Lora dans nos champs de saisie et changerons la couleur d'arrière-plan du formulaire. Assurez-vous que cette police est chargée par votre thème WordPress, ou changez simplement « lora » par une police que votre thème utilise déjà :

.wpcf7 {
  background-color: #fbefde;
  border: 1px solid #f28f27;
  padding: 20px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  background-color: #725f4c;
  color: #FFF;
  font-family: lora, sans-serif;
  font-style: italic;
}

.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
  background-color: #725f4c;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
}

Vous pouvez facilement ajouter ce CSS en allant dans Apparence » Personnaliser » CSS additionnel dans votre tableau de bord WordPress.

Si vous avez besoin d'aide supplémentaire, veuillez consulter notre guide sur comment ajouter facilement du CSS personnalisé à un site WordPress.

Voici à quoi ressemblait notre formulaire de contact après avoir appliqué ce CSS.

Styliser plusieurs formulaires Contact Form 7

Si vous utilisez plusieurs formulaires de contact et que vous souhaitez les styliser différemment, vous pouvez cibler l'ID unique que Contact Form 7 génère pour chaque formulaire.

L'inconvénient du CSS que nous avons utilisé ci-dessus est qu'il sera appliqué à tous les formulaires Contact Form 7 de votre site web.

Pour commencer, ouvrez simplement la page contenant le formulaire que vous souhaitez modifier. Ensuite, faites un clic droit sur le premier champ du formulaire et sélectionnez l'option « Inspecter ».

Ne vous inquiétez pas si le code semble complexe ; vous n'avez qu'à trouver une ligne spécifique.

Un panneau Outils de développement s'ouvrira en bas ou sur le côté de votre écran, affichant le code HTML de la page. Dans ce panneau, vous devez localiser la ligne de départ du code du formulaire.

Comme vous pouvez le voir dans la capture d'écran ci-dessus, le code de notre formulaire de contact commence par la ligne :

<div role="form" class="wpcf7" id="wpcf7-f113-p114-o1" lang="en-US" dir="ltr">

L'attribut ID est un identifiant unique généré par Contact Form 7 pour ce formulaire particulier. C'est une combinaison de l'ID du formulaire et de l'ID du post où ce formulaire est ajouté.

Nous utiliserons cet ID dans notre CSS pour styliser uniquement ce formulaire de contact spécifique. Dans le code ci-dessous, remplacez le .wpcf7 standard par votre ID unique (par exemple, #wpcf7-f113-p114-o1).

div#wpcf7-f113-p114-o1{
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
#wpcf7-f113-p114-o1 input[type="text"],
#wpcf7-f113-p114-o1 input[type="email"],
#wpcf7-f113-p114-o1 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, "Open Sans", sans-serif;
font-style:italic;
}
#wpcf7-f113-p114-o1 input[type="submit"],
#wpcf7-f113-p114-o1 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}

Notez que vous devez utiliser l'ID généré sur votre propre site, sinon le CSS ne fonctionnera pas. De plus, comme cet ID inclut l'ID de page spécifique (comme p114), si vous déplacez ce formulaire de contact vers une autre page plus tard, vous devrez mettre à jour votre CSS avec le nouvel ID.

Vous pouvez maintenant répéter ce processus pour chaque formulaire que vous souhaitez personnaliser, en remplaçant l'ID par celui généré pour ce formulaire spécifique.

Styliser les formulaires en fonction du statut de soumission

Contact Form 7 ajoute automatiquement des classes CSS à votre formulaire en fonction des interactions de l'utilisateur, vous permettant de styliser différemment les messages de succès, les états d'erreur et les états de chargement.

Voici les classes de statut que Contact Form 7 applique :

• .wpcf7-init — État initial (avant l'interaction de l'utilisateur)
• .wpcf7-sent — Formulaire soumis avec succès
• .wpcf7-failed — Soumission échouée (erreur serveur)
• .wpcf7-invalid — Le formulaire présente des erreurs de validation
• .wpcf7-spam — Soumission signalée comme spam
• .wpcf7-aborted — Soumission interrompue par l'utilisateur

Exemple : Style de soumission de formulaire réussie avec une bordure verte :

div.wpcf7.wpcf7-sent {
    border: 3px solid #4caf50;
    background-color: #e8f5e9;
    padding: 20px;
}

Exemple : Style des erreurs de validation avec une bordure rouge :

div.wpcf7.wpcf7-invalid {
    border: 3px solid #f44336;
    background-color: #ffebee;
}

Exemple : Ajouter un indicateur de chargement subtil :

div.wpcf7.wpcf7 form.submitting {
    opacity: 0.7;
    pointer-events: none;
}

Ces classes de statut vous permettent de fournir un retour visuel clair aux utilisateurs, améliorant ainsi la convivialité et l'expérience utilisateur du formulaire.

Méthode 2 : Styliser les formulaires Contact Form 7 avec CSS Hero

Un moyen plus simple de modifier le style des formulaires Contact Form 7 est d'utiliser CSS Hero. Il vous permet de modifier vos formulaires sans écrire de CSS.

Nous avons testé ce plugin pour voir s'il était performant. Découvrez tout à son sujet dans notre test complet de CSS Hero.

Étant donné que CSS Hero est un plugin premium, vous devrez d'abord créer un compte CSS Hero sur leur site Web. Cliquez simplement sur le bouton « Obtenir maintenant », sélectionnez un forfait et terminez le processus de paiement.

Une fois cela fait, vous accéderez au tableau de bord de votre compte CSS Hero, où vous trouverez le fichier zip de votre plugin et votre clé de licence.

Vous pouvez maintenant installer et activer le plugin CSS Hero sur votre site Web. Dans votre zone d’administration WordPress, allez dans Plugins » Ajouter un nouveau plugin.

Vous pouvez ensuite cliquer sur le bouton « Télécharger le plugin » pour ouvrir le téléchargeur de fichiers.

Après cela, cliquez simplement sur « Choisir un fichier » et sélectionnez le fichier .zip du plugin.

Une fois téléchargé, vous pouvez cliquer sur le bouton « Installer maintenant », puis sur « Activer » lorsqu'il apparaît. Pour plus de détails, consultez notre guide sur comment installer un plugin WordPress.

Après l'activation, vous pouvez visiter la page contenant votre formulaire sur votre site Web en direct. Vous verrez une option « Personnaliser avec CSS Hero » dans la barre d'outils d'administration en haut.

CSS Hero fournit une interface facile à utiliser, point-and-click, pour modifier le CSS sans écrire de code.

En utilisant le plugin, vous pouvez cliquer sur n'importe quel champ, en-tête et autres éléments de votre formulaire et modifier la couleur d'arrière-plan, la police, les bordures, l'espacement, et bien plus encore.

Une fois que vous avez personnalisé votre formulaire, cliquez simplement sur le bouton « Enregistrer & Publier » en bas.

Astuce bonus 💡 : Une façon sans code de styliser les formulaires WordPress

Si le CSS n'est pas votre tasse de thé, il existe un moyen beaucoup plus simple de créer de magnifiques formulaires stylisés en quelques minutes : WPForms. Alors que Contact Form 7 nécessite des connaissances en CSS pour être personnalisé, WPForms vous offre des formulaires d'aspect professionnel directement prêts à l'emploi, sans aucun codage requis.

Pourquoi les utilisateurs de WPForms l'adorent (par rapport à Contact Form 7)

WPForms est utilisé par plus de 6 millions de sites web et est constamment considéré comme plus facile à utiliser que Contact Form 7. Voici pourquoi :

• Création de formulaire en 5 minutes : De vrais utilisateurs rapportent avoir créé leur premier formulaire professionnel en moins de 5 minutes grâce au constructeur par glisser-déposer. Aucune courbe d'apprentissage CSS requise.
• Plus de 2 100 modèles prédéfinis : Choisissez parmi des milliers de modèles de formulaires prêts à l'emploi pour les formulaires de contact, les sondages, les inscriptions, les paiements, et plus encore. Il suffit d'en choisir un et de le personnaliser.
• Constructeur de formulaires basé sur l'IA : Décrivez votre formulaire en langage clair, par exemple « J'ai besoin d'un formulaire d'inscription à une conférence avec des choix de repas », et WPForms AI le générera instantanément.
• Design professionnel sans compétences en design : Les formulaires ont un aspect propre et soigné sur votre site automatiquement, correspondant aux normes de design web modernes sans travail de style manuel.
• Support exceptionnel : Lorsque vous avez besoin d'aide, vous obtenez des réponses rapides et expertes de l'équipe WPForms, contrairement à la dépendance des forums communautaires pour les plugins gratuits.

Comment styliser un formulaire dans WPForms

Lors de la création de votre formulaire de contact, allez dans la section Paramètres » Thèmes à l'intérieur du constructeur par glisser-déposer de WPForms.

Une fois à l'intérieur, vous choisissez parmi plus de 40 thèmes magnifiques et prédéfinis pour correspondre instantanément au design de votre site.

Ces thèmes sont entièrement personnalisables. Vous pouvez :

• Ajuster la taille, les bordures et les couleurs des champs
• Modifier les polices des étiquettes, des sous-étiquettes et des messages d'erreur
• Style the submit button to match your branding

Voici à quoi cela peut ressembler sur votre écran :

Alternativement, vous pouvez appliquer un thème WPForms depuis l'éditeur de blocs WordPress.

Après avoir ajouté votre formulaire à une page, ouvrez le panneau des paramètres de bloc à droite et faites défiler jusqu'à la section « Thèmes ». Vous y trouverez les thèmes de formulaire intégrés de WPForms, la même liste que celle à l'intérieur du constructeur de formulaire.

Vous trouverez également des options de personnalisation pour le champ de formulaire, l'étiquette, le bouton, le conteneur et l'arrière-plan.

Pour des instructions étape par étape, consultez notre guide sur comment personnaliser et styliser les formulaires WordPress.

En résumé : Si vous voulez sauter le tutoriel CSS et mettre en ligne des formulaires professionnels dès aujourd'hui, WPForms est votre meilleure option. Il permet d'économiser des heures de travail de style et donne des résultats qui semblent avoir été créés par un designer.

FAQ : Styliser Contact Form 7 dans WordPress

Si vous débutez avec Contact Form 7 ou si vous souhaitez affiner votre design, ces FAQ rapides vous aideront avec les questions de style les plus courantes.

Comment styliser le bouton de soumission de Contact Form 7 ?

Vous pouvez styliser le bouton de soumission de Contact Form 7 avec du CSS en ciblant la classe de soumission par défaut .wpcf7-submit. Ajoutez ensuite vos styles personnalisés dans Apparence » Personnaliser » CSS additionnel.

Comment configurer Contact Form 7 dans WordPress ?

Pour configurer Contact Form 7, vous pouvez ouvrir votre formulaire, aller dans l'onglet « Mail », définir l'adresse « À » (où les messages doivent être envoyés) et vous assurer que les balises de courrier correspondent à vos champs de formulaire.

Contact Form 7 est-il gratuit ?

Oui, Contact Form 7 est entièrement gratuit à télécharger et à utiliser depuis le répertoire officiel des plugins WordPress.org. Le plugin principal ne coûte rien, bien que certains modules complémentaires ou intégrations tiers optionnels puissent être payants.

Contact Form 7 est-il bon ?

Contact Form 7 est une option fonctionnelle et largement utilisée si vous souhaitez un plugin de formulaire gratuit et flexible et que vous ne craignez pas une configuration légèrement plus technique.

Il est puissant lorsqu'il est combiné avec du HTML personnalisé et du CSS, mais il n'offre pas de constructeur visuel par glisser-déposer, de sorte que les modifications de style et de mise en page nécessitent souvent de modifier le code ou d'utiliser des outils supplémentaires.

Puis-je mettre Contact Form 7 dans Canva pour l'éditer ?

Non, vous ne pouvez pas modifier un formulaire Contact Form 7 dans Canva car Contact Form 7 est un plugin WordPress et nécessite un environnement WordPress pour fonctionner. Vous pouvez, cependant, concevoir l'apparence de votre formulaire dans Canva comme une maquette, puis recréer cette conception dans WordPress.

Ressources supplémentaires pour la personnalisation de formulaires WordPress

Nous espérons que cet article vous a aidé à apprendre comment styliser les formulaires Contact Form 7 dans WordPress.

Vous voudrez peut-être aussi consulter nos autres guides utiles sur :

• Comment ajouter des choix d'images dans les formulaires WordPress
• Comment ajouter l'autocomplétion pour les champs d'adresse dans WordPress
• Conseils pour créer des formulaires plus interactifs dans WordPress
• Utiliser la logique conditionnelle dans les formulaires WordPress
• Guide ultime pour l'utilisation des formulaires WordPress

Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.