Un utilisateur remplit un formulaire, clique sur «Envoyer», et rien ne se produit. La page se recharge, les champs se vident, mais impossible de savoir si l’email a bien été envoyé.

Contact Form 7 n’affiche pas de notification visuelle après soumission par défaut. Les messages de succès ou d’erreur apparaissent sous le formulaire en petits caractères, sans animation, sans mise en avant. Les utilisateurs ne les remarquent tout simplement pas et quittent la page sans savoir si leur demande a été prise en compte.

Vous pouvez corriger cela en 10 minutes. Il vous suffit de Contact Form 7 lui-même, d’un plugin de popup avec une API JavaScript et de 25 lignes de code. Résultat: après soumission du formulaire, une fenêtre de grande taille s’affiche en douceur par-dessus la page (vert pour le succès, rouge pour l’erreur) et disparaît automatiquement après un délai défini. Pas de rechargement de page, pas de lead perdu.

💡 Aperçu rapide:

• Quels événements DOM Contact Form 7 déclenche et en quoi les noms modernes diffèrent des anciens
• Comment créer des popups de succès et d’erreur dans n’importe quel plugin de popup WordPress
• Styles CSS pour les popups: superposition, animation, z-index
• Un script jQuery prêt à l’emploi: liaison des événements CF7 à l’ouverture et à la fermeture automatique des popups
• Une alternative moderne utilisant addEventListener sans jQuery
• Configuration de la durée d’affichage séparément pour le succès et l’erreur

Quels événements DOM Contact Form 7 déclenche

Contact Form 7 génère des événements DOM personnalisés à chaque étape du traitement du formulaire. Voici la liste complète issue de la documentation officielle:

Pour les popups post-soumission, vous avez besoin de deux événements: wpcf7mailsent (succès) et wpcf7invalid (erreur de validation). Vous pourriez aussi utiliser wpcf7spam pour une fenêtre d’avertissement distincte, mais en pratique les deux premiers suffisent.

Remarque importante: dans les anciens tutoriels et extraits de code, les événements sont écrits avec deux-points. Par exemple, wpcf7:mailsent et wpcf7:invalid. Cette syntaxe était utilisée dans les hooks jQuery des premières versions de CF7. Aujourd’hui, elle fonctionne encore pour la rétrocompatibilité, mais les noms canoniques n’incluent pas les deux-points. Dans le code ci-dessous, je fournirai les deux variantes: la version moderne utilisant addEventListener et la variante jQuery pour les projets où jQuery est déjà chargé.

L’objet event.detail contient des propriétés utiles: contactFormId (l’ID du formulaire concerné), pluginVersion (version de CF7), inputs (tableau des données saisies). Si vous avez plusieurs formulaires sur une page, filtrez par contactFormId pour que la popup ne s’ouvre que pour le formulaire souhaité.

Étape 1: choisir un plugin de popup et créer les fenêtres

Vous avez besoin d’un plugin de popup doté d’une API JavaScript pour pouvoir ouvrir la fenêtre de manière programmatique depuis un script. Deux options gratuites éprouvées disponibles sur le répertoire de plugins WordPress.org:

• Popup Maker, plus de 700 000 installations actives, note de 4,9/5. Appel: PUM.open(popup_id). Noyau gratuit puissant, ciblage par page, déclencheurs temporels et au scroll, intégration avec les formulaires les plus courants. La plus grande communauté, où vous trouverez réponse à toutes vos questions.
• WP Popups, plus de 20 000 installations actives. Appel: SPU.show(popup_id). Éditeur visuel basé sur Gutenberg, filtres d’affichage, prise en charge native de Contact Form 7. Léger et rapide.

Créez deux popups: une pour la soumission réussie, une autre pour les erreurs. Dans chacune, placez une image, un texte et, si vous le souhaitez, un bouton «Fermer». Notez l’ID de chaque fenêtre, vous en aurez besoin dans le script à l’étape 3. Les exemples ci-dessous utilisent les ID 1068 (succès) et 1065 (erreur); les vôtres seront différents.

Voici à quoi ressemblent les popups avec les styles configurés:

Popup de soumission réussie: fond vert, icône de confirmation et texte.

Fenêtre d’erreur: fond rouge, icône d’avertissement et demande de vérification des données saisies.

Et voici les images à placer à l’intérieur des popups:

Vous pouvez remplacer ces images par les vôtres en indiquant des chemins différents dans les paramètres du plugin de popup.

Étape 2: styles CSS pour les popups

Les plugins de popup n’exportent pas toujours le CSS personnalisé. Si les styles ne sont pas appliqués après la création des fenêtres, ajoutez-les manuellement: Paramètres du plugin → CSS personnalisé, ou Appearance → Customize → Additional CSS.

Styles pour la popup de soumission réussie (superposition verte, z-index maximum):

1
div#spu-bg-1068 {
2
    opacity: 0.6;
3
    background-color: green;
4
    z-index: 9999999;
5
}
6
div#spu-1068 {
7
    z-index: 99999999;
8
}

Styles pour la popup d’erreur (superposition rouge):

1
div#spu-bg-1065 {
2
    opacity: 0.6;
3
    background-color: #F44336;
4
    z-index: 9999999;
5
}
6
div#spu-1065 {
7
    z-index: 99999999;
8
}

Voici ce qui se passe: #spu-bg-N est l’arrière-plan semi-transparent (superposition). #spu-N est la fenêtre elle-même. Le z-index élevé garantit que la popup recouvre tous les éléments de la page, y compris la barre d’administration.

Si vous utilisez un autre plugin de popup, remplacez les sélecteurs. Popup Maker génère #pum-N et .pum-overlay[data-popmake*="N"]. WP Popups utilise ses propres préfixes; vérifiez dans l’inspecteur du navigateur (F12) les identifiants réels de vos fenêtres.

Étape 3: script jQuery liant CF7 et les popups

Le script peut être inséré de trois manières: dans le fichier functions.php de votre thème enfant, via le plugin Code Snippets, ou dans la section JavaScript personnalisé de votre thème. Avant de modifier functions.php, faites une sauvegarde; une seule erreur de syntaxe peut planter le site.

Voici le code complet avec commentaires. Il intercepte deux événements de Contact Form 7 et appelle l’API du plugin de popup:

1
// START: Contact Form 7 + Popups — popups for success and error
2
jQuery(document).ready(function($) {
3
 
4
    // Popup for validation ERROR (fields empty or invalid)
5
    $(".wpcf7").on('wpcf7:invalid', function(event) {
6
        SPU.show(1065);   // Error popup ID — replace with yours
7
        setTimeout(function() {
8
            $('div#spu-1065, div#spu-bg-1065').fadeOut(600, 'swing');
9
        }, 5500);          // auto-close after 5.5 seconds
10
    });
11
 
12
    // Popup for SUCCESSFUL submission
13
    $(".wpcf7").on('wpcf7:mailsent', function(event) {
14
        SPU.show(1068);   // Success popup ID — replace with yours
15
        setTimeout(function() {
16
            $('div#spu-1068, div#spu-bg-1068').fadeOut(600, 'swing');
17
        }, 3500);          // auto-close after 3.5 seconds
18
    });
19
 
20
});
21
// END: Contact Form 7 + Popups

Ce que vous devez remplacer pour votre projet:

• SPU.show(N) par la méthode de votre plugin de popup. Pour Popup Maker: PUM.open(N).
• 1065 et 1068 par vos identifiants de popup. Vous les trouverez dans le panneau d’administration du plugin.
• Le temps dans setTimeout (en millisecondes). 5500 = 5,5 secondes, 3500 = 3,5 secondes. Ajustez selon vos préférences.
• Les sélecteurs div#spu-N et div#spu-bg-N; remplacez-les si votre plugin génère des identifiants différents.

Alternative moderne sans jQuery. Si votre thème ne charge pas jQuery ou si vous souhaitez une option plus légère, utilisez les événements natifs de CF7 via addEventListener:

1
document.addEventListener('wpcf7mailsent', function(event) {
2
    // event.detail.contactFormId — ID of specific form (if there are multiple)
3
    PUM.open(1068);
4
    setTimeout(function() {
5
        document.querySelector('#pum-1068').style.display = 'none';
6
        document.querySelector('.pum-overlay[data-popmake*="1068"]').style.display = 'none';
7
    }, 3500);
8
}, false);
9
 
10
document.addEventListener('wpcf7invalid', function(event) {
11
    PUM.open(1065);
12
    setTimeout(function() {
13
        document.querySelector('#pum-1065').style.display = 'none';
14
        document.querySelector('.pum-overlay[data-popmake*="1065"]').style.display = 'none';
15
    }, 5500);
16
}, false);

Cette variante fonctionne avec Popup Maker et ne nécessite pas jQuery. Les événements wpcf7mailsent et wpcf7invalid (sans les deux-points) sont la norme moderne.

Si vous avez plusieurs formulaires sur une page, filtrez par contactFormId:

1
document.addEventListener('wpcf7mailsent', function(event) {
2
    if ('123' === event.detail.contactFormId) {
3
        PUM.open(1068);  // popup only for form ID=123
4
    }
5
}, false);

Configuration du délai de fermeture automatique

L’intervalle pour chaque popup se définit séparément via le deuxième argument de setTimeout, en millisecondes. Recommandations pratiques:

• Succès: 3 à 5 secondes. L’utilisateur a déjà lu «envoyé», il est donc inutile de le maintenir plus longtemps.
• Erreur: 5 à 7 secondes. La personne a besoin de temps pour assimiler le problème, relire le message et comprendre quels champs corriger.
• Spam (wpcf7spam): 8 à 10 secondes. Laissez suffisamment de temps pour lire l’avertissement en entier, sans pour autant bloquer complètement la page.

La valeur 600 dans fadeOut(600, 'swing') correspond à la durée de l’animation de fondu en millisecondes. Moins de 400 donne un effet saccadé, plus de 800 semble lent. 600 est le juste milieu.

Si vous avez plusieurs popups et souhaitez des durées différentes selon les formulaires, encadrez l’appel à setTimeout dans une vérification de contactFormId, comme illustré dans l’exemple ci-dessus.

Tutoriel vidéo étape par étape: configurer une popup après soumission de Contact Form 7 à partir de zéro. Si vous débutez avec WordPress ou préférez regarder plutôt que lire du code, ces 8 minutes de vidéo couvrent la moitié de l’article.

⁉️🤔 Foire aux questions

La popup ne s’ouvre pas après l’envoi du formulaire. Quel est le problème?

La cause la plus fréquente: l’ID de la popup ne correspond pas à celui indiqué dans le script. Rendez-vous dans le panneau d’administration de votre extension de popup, trouvez l’ID réel de la fenêtre et remplacez-le dans l’appel SPU.show(N) ou PUM.open(N). Deuxième cause possible: jQuery n’est pas chargé ou entre en conflit. Vérifiez la console du navigateur (F12 → Console) pour détecter d’éventuelles erreurs. Les extensions de popup attribuent de nouveaux numéros aux fenêtres lors du clonage ou de l’importation, alors que l’ancien ID du snippet reste en place; vérifiez toujours les numéros après un import.

Dois-je installer une extension de popup séparée? Puis-je simplement utiliser une alerte?

Techniquement, oui: remplacez SPU.show(N) par alert('Thank you!') et une notification apparaîtra. Mais l’alerte bloque la page, semble étrangère au site et agace les visiteurs. Une popup personnalisée avec votre design, une icône et une animation fluide fait partie intégrante du site, contrairement à une boîte de dialogue système du navigateur. D’après notre expérience sur plusieurs projets, remplacer l’alerte par une popup à votre image réduit sensiblement le taux de rebond immédiat.

Le code ne fonctionne que pour un seul formulaire. Comment faire pour qu’il fonctionne avec plusieurs?

Utilisez le filtrage par event.detail.contactFormId. Pour la variante jQuery, encadrez l’appel dans une condition: if (event.detail.contactFormId === 123) { SPU.show(1068); }. Pour le JavaScript vanilla, un exemple avec condition est fourni à l’étape 3.

Que faire si jQuery n’est pas chargé sur le site?

Utilisez la variante avec addEventListener de l’étape 3. Elle ne nécessite pas jQuery et fonctionne sur tous les navigateurs modernes. Seule nuance: la fermeture de la popup via le DOM natif se fait en masquant manuellement l’élément, car la méthode fadeOut n’est pas disponible. Comme alternative, vous pouvez ajouter une classe CSS avec transition et la basculer.

Puis-je utiliser une seule popup pour tous les formulaires du site?

Oui, si le texte de notification est universel. Créez une popup de succès et une popup d’erreur, puis ouvrez-les pour tous les événements wpcf7mailsent et wpcf7invalid sans filtrer par contactFormId. Cependant, si les formulaires sur différentes pages ont des contextes différents, il est préférable de créer des fenêtres distinctes. «Demande de consultation reçue» et «Abonnement confirmé» n’ont pas la même apparence.

Popup Maker ou WP Popups: lequel choisir pour votre projet

Le choix se résume à trois scénarios:

• Vous avez besoin d’un maximum de fonctionnalités et d’intégrations? Optez pour Popup Maker. Ciblage par page, déclencheurs temporels et au scroll, intégration avec des dizaines d’extensions de formulaire, vaste communauté. Le noyau gratuit couvre 90% des cas d’usage.
• Vous recherchez la simplicité et un éditeur visuel Gutenberg? Votre choix se porte sur WP Popups. Interface moderne, configuration rapide, moins de charge. Fonctionne avec Contact Form 7 sans configuration supplémentaire.
• Vous avez besoin d’une popup contenant un formulaire Contact Form 7? C’est un scénario différent (pas une notification après soumission, mais un formulaire dans une fenêtre modale déclenchée par un clic sur un bouton). Pour cela, il existe l’extension spécialisée WPB Popup for Contact Form 7, qui ouvre un formulaire CF7 dans une popup plutôt que de réagir à son envoi.

Les deux extensions de notification sont gratuites et disponibles dans le répertoire WordPress.org. Choisissez celle qui s’intègre le mieux à votre stack et remplacez son appel API dans le script de l’étape 3. Le sujet des popups peut être exploré sans fin: tests A/B du texte de notification, délais basés sur le temps de lecture, fenêtres différentes selon les formulaires. Mais la base (événement CF7 + appel popup + fermeture automatique) couvre la grande majorité des besoins réels sur les sites WordPress.