Les styles par défaut de Contact Form 7 sont la première chose que vous remarquez après avoir installé le plugin. Des champs de saisie étroits, un bouton d’envoi basique et des messages d’erreur sans le moindre effort de conception. Après avoir configuré une dizaine de sites, vous ne comptez plus le nombre de fois où vous avez modifié manuellement style.css, et c’est toujours la même routine.

Un fichier d’export de formulaire prêt à l’emploi résout ce problème. Vous importez un formulaire déjà conçu avec des styles préconfigurés: les champs, le bouton, la validation et reCAPTCHA ont un aspect correct dès l’activation. Il ne reste plus qu’à remplacer les adresses e-mail et le chemin du logo pour votre projet spécifique.

Voici une description complète des règles CSS que nous utilisons sur nos projets, ainsi qu’un fichier d’export pour un démarrage rapide. Les styles ont été testés sur Contact Form 7 version 6.x et sont à jour en 2026.

💡 Aperçu rapide:

• Téléchargez le fichier d’export du formulaire et importez-le dans WordPress via la méthode standard
• Remplacez les adresses e-mail dans le modèle d’e-mail et le chemin du logo
• Copiez les styles CSS dans le style.css de votre thème ou dans les CSS additionnelles
• Adaptez les couleurs et les polices à la charte graphique de votre projet si nécessaire

1. Fichier d’export: importation et configuration initiale

Le fichier d’export contient un formulaire de contact prêt à l’emploi avec les champs: nom, e-mail, téléphone, zone de texte et Google reCAPTCHA. Le formulaire est créé en quatre versions linguistiques: russe, ukrainien, anglais et allemand.

L’importation s’effectue via l’outil standard de WordPress: Outils → Importer → Contact Form 7 → Lancer l’importateur. Sélectionnez le fichier XML téléchargé et les formulaires apparaîtront dans la section «Formulaires».

Immédiatement après l’importation, allez dans le modèle d’e-mail de chaque formulaire sous l’onglet Courriel. Remplacez trois éléments:

• Le champ «À»: saisissez votre adresse e-mail réelle;
• Le champ «De»: l’adresse doit appartenir au domaine du site (par exemple, [email protected]), sinon les e-mails finiront en spam;
• Le chemin du logo: trouvez la balise <img src="/Logo-150x150.png"> dans le corps de l’e-mail et remplacez-la par l’URL complète du logo de votre site.

Sans remplacer les adresses e-mail, le formulaire n’enverra pas de messages. C’est une raison fréquente pour laquelle CF7 «ne fonctionne pas» après l’importation.

2. Styles CSS: description complète

Voici l’ensemble de styles que nous appliquons à chaque nouveau projet. Copiez-le dans le style.css du thème actif ou dans les CSS additionnelles (Apparence → Personnaliser → CSS additionnelles). La seconde option est préférable: les styles ne seront pas perdus lors de la mise à jour du thème.

2.1. Messages de réponse et validation

1
/* Form response — top margin */
2
div.wpcf7-response-output {
3
    margin-top: -30px;
4
}
5
 
6
/* Validation hint — centering and spacing */
7
span.wpcf7-not-valid-tip {
8
    margin-top: -14px;
9
    margin-bottom: -10px;
10
    text-align: center;
11
    color: #a01414;
12
    font-size: 1em;
13
    display: block;
14
    font-weight: 700;
15
}

.wpcf7-response-output est le bloc qui apparaît après l’envoi (succès ou erreur). Par défaut, il perturbe le flux; la margin-top négative le rapproche du formulaire. .wpcf7-not-valid-tip est l’indication rouge sous un champ non rempli; ici, le texte est centré et en gras pour une meilleure visibilité.

2.2. Champs de saisie et zones de texte

1
/* Unified font for all form elements */
2
input.wpcf7-form-control,
3
textarea#TextareaJA,
4
input.wpcf7-form-control.wpcf7-submit {
5
    font-family: "Open Sans", sans-serif;
6
    font-size: 15px;
7
    line-height: 30px;
8
    font-weight: 700;
9
}
10
 
11
/* Text area height */
12
textarea {
13
    height: 150px !important;
14
}
15
 
16
/* Border highlight on focus */
17
form.wpcf7-form input:focus,
18
form.wpcf7-form textarea:focus,
19
form.wpcf7-form input[type="text"]:focus {
20
    border-color: #709242;
21
}

Le sélecteur input.wpcf7-form-control cible tous les champs texte de CF7. textarea#TextareaJA est un identifiant personnalisé de notre formulaire; si votre formulaire a un ID différent, remplacez-le par le bon. La couleur de bordure au focus #709242 est un vert olive calme et reposant pour les yeux.

2.3. Bouton d’envoi

1
/* Submit button — main style */
2
input.wpcf7-form-control.wpcf7-submit {
3
    color: #ffffff;
4
    background: #5a8f2b;
5
    font-weight: 600;
6
    border: 2px dashed #ffffff;
7
    margin-top: -25px;
8
    font-family: FuturaDemiC, sans-serif;
9
    padding: 10px 30px;
10
    border-radius: 0;
11
    transition: all .3s ease 0s;
12
}
13
 
14
/* Hover — color inversion */
15
input.wpcf7-form-control.wpcf7-submit:hover {
16
    background: #ffffff;
17
    color: #5a8f2b;
18
    border: 2px dashed #5a8f2b;
19
}

Le bouton a un fond vert #5a8f2b avec une bordure blanche en pointillés. Au survol, les couleurs s’inversent: fond blanc, texte et bordure verts. Si le vert ne fait pas partie de votre palette de marque, remplacez #5a8f2b par votre couleur d’accent dans les deux règles (par défaut et au survol).

2.4. Préchargeur et indicateur de chargement

1
/* Centering the ajax loader */
2
span.ajax-loader {
3
    margin-left: auto !important;
4
    margin-right: auto !important;
5
    float: inherit !important;
6
    width: 15px !important;
7
    display: block !important;
8
    margin-top: 10px !important;
9
    margin-bottom: -15px !important;
10
}

L’indicateur de soumission tournant de CF7 reste collé au bord par défaut. Ici, il est centré de force via margin-left/right: auto et display: block. Les déclarations !important sont nécessaires car le plugin applique lui-même des styles en ligne au chargeur.

2.5. Alignement de Google reCAPTCHA

1
/* Centering the reCAPTCHA block */
2
.wpcf7-form-control-wrap {
3
    width: 100%;
4
}
5
 
6
.wpcf7-form-control.g-recaptcha.wpcf7-recaptcha {
7
    margin-top: -28px;
8
    margin-left: auto;
9
    margin-right: auto;
10
    width: 300px;
11
}

Le bloc reCAPTCHA est aligné à gauche par défaut. L’utilisation de margin-left/right: auto avec une largeur fixe de 300px le centre dans le formulaire.

2.6. Adaptation mobile

1
@media screen and (max-width: 768px) {
2
    span.wpcf7-not-valid-tip {
3
        margin-bottom: 15px;
4
    }
5
 
6
    input.wpcf7-form-control.wpcf7-text {
7
        max-height: 30px;
8
    }
9
}

Sur les écrans de moins de 768px, l’indice de validation reçoit une marge inférieure supplémentaire pour éviter de chevaucher le champ suivant. Les champs texte ont une hauteur limitée, ce qui empêche un étirement excessif sur les appareils mobiles.

2.7. Masquage des éléments de service

1
/* Hide list markers in error messages */
2
.screen-reader-response ul {
3
    display: none;
4
}
5
 
6
/* Hide the green success message */
7
.wpcf7-response-output.wpcf7-display-none.wpcf7-mail-sent-ok {
8
    display: none !important;
9
}
10
 
11
/* Hide the duplicate validation error message */
12
.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
13
    display: none !important;
14
}
15
 
16
/* Text color for screen-reader block on dark backgrounds */
17
.screen-reader-response {
18
    color: white;
19
    margin-bottom: 10px;
20
}

CF7 duplique les erreurs de validation par défaut: à la fois dans l’infobulle et dans le bloc général sous le formulaire. Nous masquons le bloc général (.wpcf7-validation-errors) et le message de succès (.wpcf7-mail-sent-ok), car les indications .wpcf7-not-valid-tip sont suffisantes. Les styles pour .screen-reader-response sont pertinents lorsque le formulaire est placé sur un fond sombre.

2.8. Centrage des textes indicatifs

1
/* Centering placeholder in textarea field for different browsers */
2
textarea#TextareaJA::-webkit-input-placeholder {
3
    text-align: center;
4
}
5
 
6
textarea#TextareaJA:-moz-placeholder {
7
    text-align: center;
8
}
9
 
10
textarea#TextareaJA::-moz-placeholder {
11
    text-align: center;
12
}
13
 
14
textarea#TextareaJA:-ms-input-placeholder {
15
    text-align: center;
16
}

Le texte indicatif à l’intérieur du champ est centré uniquement lorsque le champ est vide. Dès que l’utilisateur commence à taper, le texte suit l’alignement normal. #TextareaJA est l’identifiant de notre formulaire; remplacez-le par celui qui correspond à votre formulaire.

2.9. Bonus: styles pour fonds sombres

1
/* Error styles for forms on dark background */
2
.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
3
    color: aliceblue;
4
    font-weight: 800;
5
}
6
 
7
span.wpcf7-not-valid-tip {
8
    font-weight: 900;
9
    background-color: antiquewhite;
10
}

Si le formulaire est placé dans un bloc avec un fond sombre, les messages d’erreur doivent rester lisibles. Le texte d’erreur devient blanc (aliceblue) et l’infobulle reçoit un fond clair.

2.10. Améliorations supplémentaires

1
/* Bottom error message margin */
2
.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
3
    margin-top: -60px;
4
}
5
 
6
/* Centering text fields */
7
span.wpcf7-form-control-wrap input#Email,
8
span.wpcf7-form-control-wrap input#PhoneJA,
9
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
10
    text-align: center;
11
}
12
 
13
/* reCAPTCHA in popups — additional spacing */
14
div#recapcha-popups .wpcf7-form-control-wrap {
15
    padding-top: 25px;
16
    margin-left: -11px;
17
    padding-bottom: 38px;
18
}

Les champs texte pour l’email et le téléphone sont centrés, ce qui donne un aspect plus net lorsque le formulaire se compose de 3 ou 4 champs. Le bloc div#recapcha-popups est un sélecteur spécifique pour les cas où le formulaire est intégré dans une fenêtre popup.

3. Configuration du modèle d’email

Après avoir importé les formulaires, pensez à vérifier l’onglet Mail dans l’éditeur de chaque formulaire. CF7 utilise ces paramètres pour envoyer les notifications par email:

• To: l’adresse à laquelle les soumissions arrivent. Par défaut, elle contient un espace réservé provenant de l’export; remplacez-le par le vôtre;
• From: l’en-tête de l’email. L’adresse de l’expéditeur doit appartenir au domaine du site, sinon les emails tombent dans les spams ou ne sont pas délivrés du tout;
• Subject: vous pouvez conserver l’objet par défaut ou y ajouter le nom du site;
• Message Body: un modèle HTML avec le logo. Remplacez src="/Logo-150x150.png" par l’URL complète de votre logo.

Si vous avez besoin de balises supplémentaires pour le modèle, la liste complète est disponible dans la documentation officielle sur contactform7.com.

4. Optimisation du chargement des scripts CF7

Par défaut, Contact Form 7 charge le CSS et le JavaScript sur chaque page du site, même là où il n’y a pas de formulaire. Ce sont des requêtes inutiles qui ralentissent le chargement.

À partir de la version 5.9, le développeur a ajouté une option native pour contrôler le chargement: dans wp-config.php, vous pouvez définir les constantes WPCF7_LOAD_JS et WPCF7_LOAD_CSS à false, et les scripts ne se chargeront que sur les pages contenant un formulaire. Plus de détails dans la documentation CF7.

Pour un contrôle plus fin (uniquement des pages spécifiques), utilisez un extrait de code dans functions.php:

1
add_action('wp_enqueue_scripts', 'cf7_dequeue_scripts', 99);
2
function cf7_dequeue_scripts() {
3
    if (!is_page(array('contact', 'order'))) {
4
        wp_dequeue_script('contact-form-7');
5
        wp_dequeue_style('contact-form-7');
6
    }
7
}

Cet extrait supprime les scripts CF7 de toutes les pages, sauf celles spécifiées dans le tableau is_page(). Remplacez 'contact' et 'order' par les slugs de vos pages contenant des formulaires.

⁉️🤔 Foire aux questions

Les formulaires ne s’envoient pas après l’import. Que faire?

Vérifiez d’abord l’onglet «Mail»: les champs «To» et «From». Le fichier d’export contient des espaces réservés à ces endroits. «To» doit contenir une adresse email réelle, et «From» doit être une adresse appartenant au domaine du site. Si le domaine ne correspond pas, le serveur de messagerie du destinataire rejettera l’email comme spam.

Où est-il préférable de placer les styles CSS: dans le style.css du thème ou dans CSS additionnel?

Le CSS additionnel est préférable. Lors de la mise à jour du thème, style.css est écrasé, contrairement au CSS additionnel. L’inconvénient: les styles du CSS additionnel sont chargés en ligne dans le <head> plutôt que sous forme de fichier externe, mais pour 100 à 150 lignes de CSS, la différence de vitesse est négligeable.

Comment modifier les couleurs des boutons pour les adapter à la charte graphique du client?

Repérez les deux règles pour input.wpcf7-form-control.wpcf7-submit dans les styles (état normal et survol). Remplacez #5a8f2b par la couleur d’accent de la marque dans la propriété background de la règle principale et dans les propriétés color et border de la règle de survol. Rien d’autre n’a besoin d’être modifié.

Pourquoi le reCAPTCHA se décale-t-il vers la gauche sur mobile?

Le bloc .g-recaptcha dans nos styles a une largeur standard fixe. Sur les écrans très étroits, il peut ne pas tenir. Ajoutez une règle avec transform: scale() et transform-origin: left dans la media query, et le reCAPTCHA se réduira proportionnellement pour s’adapter à n’importe quel écran.

Les styles ne sont pas appliqués. Quelle en est la cause?

Trois causes fréquentes: (1) le cache du navigateur (ouvrez le site en navigation privée); (2) le cache d’un plugin de performance (WP Rocket, LiteSpeed) qui doit être vidé; (3) l’ordre de chargement, car CF7 charge son CSS en dernier. Ajoutez !important à la règle en conflit ou augmentez la spécificité du sélecteur en ajoutant une classe parente.

Comment vérifier que le formulaire fonctionne réellement après configuration?

Envoyez un email de test via le formulaire directement sur le site. Si l’email n’arrive pas, vérifiez votre dossier spam. S’il ne s’y trouve pas non plus, configurez un plugin SMTP (par exemple, FluentSMTP ou Post SMTP). Sans SMTP, WordPress envoie via wp_mail(), et de nombreux hébergeurs bloquent ces emails.

Styliser CF7: rapidement, une fois pour tous les projets

Un fichier d’export préparé et un jeu de styles affiné font gagner 15 à 30 minutes sur chaque nouveau projet. Au lieu de régler manuellement margin-top: -14px par tâtonnements, vous obtenez un formulaire avec des champs, un bouton et une validation déjà agencés. Il ne reste plus qu’à insérer l’email et le logo.

Si la palette verte #5a8f2b ne correspond pas au design, remplacez la couleur d’accent par la vôtre. Si le formulaire est intégré dans une popup, ajoutez un sélecteur avec l’ID de la popup comme indiqué dans la section 2.10. Si le site est multilingue, utilisez les doublons de langue de l’export (RU/UK/EN/DE).

Sur les projets sans designer, ce jeu de styles couvre la grande majorité des besoins pour un formulaire de contact à l’aspect soigné. Sur les projets avec un designer, il sert de base pour une personnalisation plus fine.

Enregistrez les styles comme snippet, et votre prochaine configuration de CF7 prendra exactement deux minutes.