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.