Comment créer un formulaire de contact avec Contact Form 7

Contact Form 7 : créer des formulaires WordPress professionnels

Contact Form 7 (CF7) est le plugin de formulaires WordPress le plus utilisé au monde — plus de 5 millions d’installations actives. Il est gratuit, léger et extensible. Ce guide couvre tout : création basique, formulaires avancés, stylisation CSS, validation, envoi d’emails et résolution de problèmes.

1. Installation et premier formulaire

1. Installez Contact Form 7 depuis Extensions → Ajouter
2. Allez dans Contact → Formulaires de contact
3. Un formulaire par défaut « Formulaire de contact 1 » est déjà créé
4. Pour l’afficher, copiez le shortcode et collez-le dans n’importe quelle page :

[contact-form-7 id="123" title="Formulaire de contact"]

2. Syntaxe des champs CF7

CF7 utilise une syntaxe à balises simples. Voici les champs essentiels :

L’astérisque (*) rend le champ obligatoire. Le texte entre guillemets est le placeholder.

3. Formulaires concrets prêts à l’emploi

Formulaire de contact simple

<div class="form-row">
  <div class="form-group">
    <label>Nom complet *</label>
    [text* nom placeholder "Prénom Nom"]
  </div>
  <div class="form-group">
    <label>Téléphone *</label>
    [tel* telephone placeholder "+221 7X XXX XX XX"]
  </div>
</div>

<div class="form-group">
  <label>Email *</label>
  [email* email placeholder "votre@email.com"]
</div>

<div class="form-group">
  <label>Sujet</label>
  [select sujet "Demande d'information" "Demande de devis" "Support technique" "Partenariat" "Autre"]
</div>

<div class="form-group">
  <label>Message *</label>
  [textarea* message placeholder "Décrivez votre demande..."]
</div>

[acceptance rgpd] J'accepte que mes données soient traitées conformément à la <a href="/politique-de-confidentialite">politique de confidentialité</a>. [/acceptance]

[submit "Envoyer le message"]

Formulaire de demande de devis

<h3>Demande de devis gratuit</h3>

<div class="form-row">
  <div class="form-group">
    <label>Nom / Entreprise *</label>
    [text* nom placeholder "Nom ou raison sociale"]
  </div>
  <div class="form-group">
    <label>Téléphone *</label>
    [tel* telephone placeholder "+221 7X XXX XX XX"]
  </div>
</div>

<div class="form-group">
  <label>Email *</label>
  [email* email placeholder "votre@email.com"]
</div>

<div class="form-group">
  <label>Service souhaité *</label>
  [select* service "Création de site vitrine" "Site e-commerce" "Refonte de site" "SEO / Référencement" "Community Management" "Logo / Identité visuelle"]
</div>

<div class="form-group">
  <label>Budget estimé</label>
  [select budget "Moins de 200 000 FCFA" "200 000 - 500 000 FCFA" "500 000 - 1 000 000 FCFA" "Plus de 1 000 000 FCFA" "Je ne sais pas encore"]
</div>

<div class="form-group">
  <label>Délai souhaité</label>
  [select delai "Urgent (moins de 2 semaines)" "1 mois" "2-3 mois" "Pas de deadline"]
</div>

<div class="form-group">
  <label>Décrivez votre projet *</label>
  [textarea* description placeholder "Décrivez votre projet : objectifs, fonctionnalités souhaitées, inspiration..."]
</div>

<div class="form-group">
  <label>Fichier joint (optionnel)</label>
  [file cahier_charges limit:5mb filetypes:pdf|doc|docx|jpg|png]
</div>

[submit "Demander mon devis gratuit →"]

Formulaire de candidature

<div class="form-row">
  <div class="form-group">
    <label>Prénom *</label>
    [text* prenom]
  </div>
  <div class="form-group">
    <label>Nom *</label>
    [text* nom_famille]
  </div>
</div>

<div class="form-group">
  <label>Email *</label>
  [email* email]
</div>

<div class="form-group">
  <label>Téléphone *</label>
  [tel* telephone]
</div>

<div class="form-group">
  <label>Poste visé *</label>
  [select* poste "Développeur web" "Designer graphique" "Community Manager" "Chef de projet" "Stagiaire"]
</div>

<div class="form-group">
  <label>CV (PDF, max 5 Mo) *</label>
  [file* cv limit:5mb filetypes:pdf]
</div>

<div class="form-group">
  <label>Lettre de motivation</label>
  [textarea motivation placeholder "Présentez-vous en quelques lignes..."]
</div>

[submit "Envoyer ma candidature"]

4. Configuration de l’email

Dans l’onglet « E-mail » du formulaire, configurez le message reçu :

À : votre@email.com
De : [nom] <[email]>
Objet : Nouveau message de [nom] — [sujet]

Corps du message :
Nom : [nom]
Téléphone : [telephone]
Email : [email]
Sujet : [sujet]

Message :
[message]

---
Envoyé depuis le formulaire de contact de votresite.com

Email de confirmation au visiteur (Email 2)

Activez « Email (2) » en bas de la page pour envoyer une confirmation automatique :

À : [email]
De : Votre Entreprise <noreply@votresite.com>
Objet : Nous avons bien reçu votre message

Bonjour [nom],

Merci pour votre message. Nous l'avons bien reçu et nous 
vous répondrons dans les 24 heures.

En attendant, n'hésitez pas à nous contacter sur WhatsApp : 
+221 77 000 00 00

Cordialement,
L'équipe de Votre Entreprise

5. Styliser le formulaire en CSS

CF7 génère du HTML simple que vous pouvez styliser entièrement. Ajoutez dans CSS additionnel :

/* Style complet pour Contact Form 7 */

/* Conteneur du formulaire */
.wpcf7-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 30px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

/* Lignes de formulaire côte à côte */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
}

/* Groupes de champs */
.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
}

/* Champs de saisie */
.wpcf7-form-control:not(.wpcf7-submit) {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.3s, box-shadow 0.3s;
  box-sizing: border-box;
}

.wpcf7-form-control:focus {
  border-color: #e94560;
  box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.1);
  outline: none;
}

/* Textarea */
.wpcf7-textarea {
  min-height: 120px;
  resize: vertical;
}

/* Select */
.wpcf7-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23666' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* Bouton d'envoi */
.wpcf7-submit {
  width: 100%;
  padding: 15px 30px;
  background: #e94560;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  margin-top: 10px;
}

.wpcf7-submit:hover {
  background: #c73550;
  transform: translateY(-2px);
}

/* Message de validation */
.wpcf7-not-valid-tip {
  color: #e94560;
  font-size: 13px;
  margin-top: 4px;
}

.wpcf7-not-valid {
  border-color: #e94560 !important;
}

/* Message de succès */
.wpcf7-mail-sent-ok,
.wpcf7-response-output {
  border: none !important;
  padding: 15px !important;
  border-radius: 8px !important;
  margin: 15px 0 0 !important;
  text-align: center;
}

.wpcf7 form.sent .wpcf7-response-output {
  background: #d4edda;
  color: #155724;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output {
  background: #f8d7da;
  color: #721c24;
}

/* Spinner de chargement */
.wpcf7-spinner {
  display: block;
  margin: 10px auto;
}

/* Case RGPD */
.wpcf7-acceptance {
  font-size: 13px;
  color: #666;
}

.wpcf7-acceptance a {
  color: #e94560;
}

6. Validation avancée

Validation du numéro sénégalais

// Valider le format du numéro de téléphone sénégalais
add_filter('wpcf7_validate_tel*', function($result, $tag) {
    $tel = isset($_POST[$tag->name]) ? trim($_POST[$tag->name]) : '';
    
    // Accepter les formats : +221XXXXXXXXX, 221XXXXXXXXX, 7XXXXXXXX, 0XXXXXXXXX
    $tel_clean = preg_replace('/[\s\-\.]/', '', $tel);
    
    if (!preg_match('/^(\+?221)?[0-9]{9}$/', $tel_clean)) {
        $result->invalidate($tag, 'Numéro de téléphone invalide. Format : +221 7X XXX XX XX');
    }
    
    return $result;
}, 10, 2);

Anti-spam sans CAPTCHA

// Honeypot : champ caché que les bots remplissent
// Ajoutez dans le formulaire CF7 :
<div style="display:none;">
  [text honeypot]
</div>

// Dans functions.php, rejetez si rempli :
add_filter('wpcf7_validate', function($result, $tags) {
    if (!empty($_POST['honeypot'])) {
        $result->invalidate(
            wpcf7_scan_form_tags(['name' => 'honeypot'])[0],
            ''
        );
    }
    return $result;
}, 10, 2);

7. Résoudre les problèmes d’envoi

Les emails ne sont pas reçus

C’est le problème n°1 avec CF7. La solution : WP Mail SMTP

1. Installez WP Mail SMTP
2. Configurez avec Brevo (ex-Sendinblue) :
   • Créez un compte gratuit sur brevo.com (300 emails/jour)
   • Obtenez votre clé API dans Paramètres → SMTP & API
   • Dans WP Mail SMTP : service = « Brevo (Sendinblue) », entrez la clé API
3. Envoyez un email test depuis WP Mail SMTP pour confirmer

Le formulaire tourne en rond (spinner infini)

• Vérifiez que le shortcode CF7 n’est pas dans un shortcode ou widget incompatible
• Désactivez temporairement les autres plugins pour trouver un conflit
• Vérifiez la console du navigateur (F12) pour des erreurs JavaScript

8. Extensions utiles pour CF7

Installez au minimum Flamingo : si votre email tombe en panne, vous aurez toujours les messages sauvegardés dans WordPress.

9. Redirection après envoi

// Rediriger vers une page de remerciement après soumission
add_action('wp_footer', function() {
    ?>
    <script>
    document.addEventListener('wpcf7mailsent', function(event) {
        // Redirection vers la page de remerciement
        window.location.href = '/merci/';
        
        // Ou tracker la conversion avec Google Analytics
        if (typeof gtag !== 'undefined') {
            gtag('event', 'form_submit', {
                'event_category': 'Contact',
                'event_label': event.detail.contactFormId
            });
        }
    });
    </script>
    <?php
});

Contact Form 7 est gratuit, léger et fait le travail pour la grande majorité des sites. Avec un bon CSS et les extensions Flamingo + WP Mail SMTP, vous avez un système de formulaires complet et fiable.

Contact Form 7 en 2026 — toujours utile ?

Contact Form 7 (CF7), lance en 2007 par Takayuki Miyoshi, reste l un des plugins WordPress les plus telecharges (5 millions d installations actives en 2026). Sa longevite tient a trois qualites : gratuit sans limite, leger, et flexible via une syntaxe de balises courte. Sa limite tient en une chose : interface admin datee qui demande de connaitre la syntaxe. En 2026, les alternatives modernes (Fluent Forms, WPForms, Forminator, Gravity Forms) offrent une experience drag-and-drop plus accessible aux non-developpeurs et des fonctionnalites natives qui demandent des extensions sur CF7.

Le verdict pragmatique : pour un developpeur qui veut un formulaire simple, leger, et performant, CF7 reste pertinent. Pour un client qui doit gerer ses formulaires lui-meme, Fluent Forms (alternative moderne et gratuite) ou WPForms (alternative payante avec UX raffinee) sont plus appropries.

Le bon usage de CF7

La syntaxe CF7 est concise une fois apprise. Les principales balises :

[text* nom placeholder "Votre nom"][email* email placeholder "votre@email.com"][textarea* message placeholder "Votre message"][submit "Envoyer"]

L asterisque apres le type rend le champ obligatoire. CF7 valide cote serveur et affiche les erreurs sous chaque champ. L envoi declenche un email selon le template defini dans l onglet Mail. Configuration en 5 minutes pour un formulaire simple.

Securite — les points indispensables

Sans precautions, CF7 est largement spamme par les bots. Quatre mesures sont indispensables.

Honeypot via le plugin compagnon Honeypot for Contact Form 7. Ajoute un champ cache que les bots remplissent et les humains ignorent. Detecte 80-90 pour cent des spams basiques sans friction utilisateur.

reCAPTCHA v3 ou Turnstile. Verification invisible qui evalue le comportement de la requete. Activable dans Reglages CF7. Couvre les spams plus sophistiques. Recaptcha v3 reste populaire mais Cloudflare Turnstile (gratuit, sans cookie, RGPD-friendly) le remplace dans les projets modernes.

Akismet ou CleanTalk. Filtres anti-spam intelligents qui analysent le contenu des soumissions. CleanTalk (5 USD/mois) est plus efficace qu Akismet pour les formulaires de contact, avec moins de faux positifs.

Limite de soumissions par IP. Via un plugin comme Limit Login Attempts ou en regle nginx, bloquer plus de 10 soumissions/heure depuis une meme IP. Stoppe les attaques de bruteforce sur les endpoints d envoi.

Migrer vers Fluent Forms

Pour une organisation qui veut moderniser, Fluent Forms offre une experience UX superieure tout en restant gratuit pour les usages courants. Avantages : drag-and-drop visuel, validation conditionnelle native, integration Mailchimp/ActiveCampaign/Slack/Zapier sans plugin tiers, dashboards de soumissions, export Excel.

Migration depuis CF7 : Fluent Forms inclut un import CF7 dans son admin. Conversion automatique des formulaires avec quelques ajustements manuels pour les configurations avancees. Comptez 1-2 heures pour migrer 10 formulaires.

FAQ

Mes emails CF7 n arrivent pas en boite — pourquoi ?
Probleme de deliverabilite. Par defaut, CF7 utilise wp_mail qui passe par PHP mail server. Sans configuration SMTP, les emails sont souvent classes en spam ou refuses. Installer WP Mail SMTP, FluentSMTP ou Post SMTP, et configurer un service transactionnel (Postmark, Mailgun, Brevo, Resend). Cout : gratuit jusqu a 100-300 mails/mois, 10-30 USD/mois ensuite.

Comment sauvegarder les soumissions en base ?
CF7 par defaut envoie en email sans stocker. Le plugin Flamingo (officiel CF7) sauvegarde toutes les soumissions en base. Fluent Forms les sauvegarde nativement avec dashboard.

Comment integrer CF7 a un CRM ?
Le plugin CF7 to Hubspot, CF7 to ActiveCampaign, ou Zapier (action wpforms when form submitted) pour les integrations courantes. Fluent Forms a tout ca natif.

CF7 est-il RGPD compliant ?
Pas par defaut. Ajouter une case a cocher consentement (que le visiteur doit cocher avant envoi), mentionner la politique de confidentialite dans le formulaire, et configurer une duree de conservation explicite (suppression auto des soumissions Flamingo apres 12-24 mois).

References

• Contact Form 7 — contactform7.com
• Fluent Forms — fluentforms.com
• WPForms — wpforms.com
• Cloudflare Turnstile — cloudflare.com/products/turnstile
• FluentSMTP — fluentsmtp.com