💡 Comment configurer un formulaire CF7 universel avec un champ caché

• Installez l’extension Dynamic Text Extension et activez-la dans la section Extensions
• Ajoutez un tag caché dynamique avec l’identifiant id:HIDDENINPUT à votre formulaire pour transmettre le titre du bloc
• Créez une popup dans Popup Maker, insérez le shortcode du formulaire et configurez le déclencheur Click Open
• Connectez un script jQuery qui capture le titre du bloc et l’insère dans le champ caché
• Ajoutez [dynamichidden-120] au modèle d’email pour savoir de quel bloc provient la soumission
• Testez la soumission: popup d’erreur sur un formulaire vide et popup de succès après une soumission réussie

Étape 1: l’extension pour champ caché, Dynamic Text Extension

L’extension de base Contact Form 7 ne permet pas d’ajouter des champs cachés en standard. Jusqu’à récemment, l’extension Contact Form 7** Modules** gérait cette tâche, mais elle n’a pas été mise à jour depuis 2017 et n’a pas été testée avec les versions récentes de WordPress.

La solution de remplacement actuelle est Contact Form 7 - Dynamic Text Extension (DTX). Cette extension est activement maintenue (dernière mise à jour en juin 2026), fonctionne avec WordPress 7.0 et fait bien plus que les simples champs cachés: valeurs dynamiques issues d’URL, de cookies, de champs meta de publication, de données de l’utilisateur connecté et de shortcodes personnalisés.

Installez l’extension via Extensions → Ajouter une extension, recherchez «Dynamic Text Extension», cliquez sur «Installer» puis activez. Deux nouveaux boutons apparaîtront dans le menu déroulant du générateur de tags de l’éditeur de formulaire Contact Form 7: dynamic text et dynamic hidden.

Pour notre scénario, nous avons besoin de dynamic hidden. Créez un champ caché avec un identifiant par lequel le script jQuery transmettra le titre du bloc:

1
[dynamichidden dynamichidden-120 id:HIDDENINPUT]

Si DTX ne vous convient pas pour une raison quelconque, vous pouvez toujours utiliser l’ancienne extension Contact Form 7 Modules: elle reste fonctionnelle pour les champs cachés basiques, mais elle n’a pas été testée avec les versions récentes de WordPress et n’a pas été mise à jour depuis 2017. Le shortcode ressemblerait à ceci: [hidden hidden-120 id:HIDDENINPUT].

Étape 2: formulaire et modèle d’email

Le formulaire est construit à partir des champs CF7 standards auxquels s’ajoute notre champ caché. Voici un modèle fonctionnel; copiez-le dans l’éditeur de formulaire:

1
[text* text-59 placeholder "Your Name*"]
2
[tel* tel-116 placeholder "Phone*"]
3
[email Email placeholder "Email"]
4
[recaptcha]
5
[submit "Send"]
6
[dynamichidden dynamichidden-120 id:HIDDENINPUT]

Les champs text-59, tel-116 et Email sont obligatoires (astérisque après le type). reCAPTCHA protège contre le spam. Le bouton d’envoi et le champ caché complètent le formulaire.

Configurez maintenant le modèle d’email dans l’onglet «Mail» de l’éditeur de formulaire. Le point clé est d’ajouter [dynamichidden-120] (ou [hidden-120] pour les modules CF7) dans le corps de l’email afin de voir de quel bloc provient la soumission:

To: moc.niamodruoy@liame-ruoy

From: [Email]

Objet: Demande site web, [dynamichidden-120]

Corps de l’email:

1
Selected product/service: [dynamichidden-120]
2
---
3
Name: [text-59]
4
Phone: [tel-116]
5
Email: [Email]
6
---
7
Message sent from page: [_url]

Veillez à cocher la case «Use HTML content type», sinon la mise en forme sera cassée. Pour une délivrabilité fiable des emails, configurez SMTP (via n’importe quel plugin SMTP: Post SMTP, WP Mail SMTP ou l’API Google Gmail); sans cela, les emails de CF7 finissent souvent en spam.

Étape 3: créer une popup dans Popup Maker

L’ancien plugin Popups - WordPress Popup a été fermé en juillet 2022 en raison d’une vulnérabilité et n’est plus disponible à l’installation. Le remplaçant moderne est Popup Maker: plus de 780 000 installations actives, intégration native de CF7 et des dizaines de déclencheurs et de règles de ciblage.

Installez Popup Maker via Extensions → Ajouter une extension, puis allez dans Popup Maker → Créer une popup. Donnez un nom à la popup et insérez le shortcode du formulaire dans l’éditeur de contenu:

1
[contact-form-7 id="123" title="Universal Form"]

Trouvez l’ID du formulaire dans la liste des formulaires CF7 (colonne «Shortcode»). Dans les paramètres de la popup à droite, dans le bloc Déclencheurs, sélectionnez Click Open et spécifiez le sélecteur CSS du bouton qui ouvrira la popup (par exemple, .jet-button-order). Cela est analogue au «Manual Triggering» de l’ancien plugin Popups.

Trouvez maintenant l’ID de la popup que vous avez créée. Ouvrez la popup dans l’éditeur et regardez l’URL du navigateur: post.php?post=4197&action=edit; le nombre après post= est l’ID (4197 dans cet exemple). Vous en aurez besoin pour le script de l’étape suivante.

Étape 4: script jQuery pour capturer le titre du bloc

Le script résout la tâche principale: lors du clic sur un bouton à l’intérieur d’un bloc, il capture le texte du titre de ce bloc et l’insère à la fois dans le titre de la popup et dans le champ caché du formulaire. Détaillons-le.

Tout d’abord, attribuez une classe CSS commune à tous les blocs où vous devez trouver le titre (par exemple, ForContactForm7HiddenInput). Dans Elementor, cela se fait via «Avancé → Classes CSS» pour la section conteneur.

Le script lui-même est connecté via le fichier functions.php du thème enfant ou le plugin Code Snippets (plus sûr, ne sera pas perdu lors de la mise à jour du thème):

1
add_action('wp_enqueue_scripts', function () {
2
    wp_enqueue_script(
3
        'cf7-universal-form',
4
        get_stylesheet_directory_uri() . '/cf7-universal-form.js',
5
        ['jquery'],
6
        '1.0',
7
        true
8
    );
9
});

Contenu du fichier cf7-universal-form.js:

1
jQuery(document).ready(function ($) {
2
 
3
    // Variable for storing the block title
4
    var blockTitle = '';
5
 
6
    // Capture the title text on button click
7
    $('.ForContactForm7HiddenInput .jet-button-order').on('click', function () {
8
        blockTitle = $(this)
9
            .closest('.ForContactForm7HiddenInput')
10
            .find('h3.elementor-heading-title')
11
            .text()
12
            .trim();
13
    });
14
 
15
    // Wait for popup to open via MutationObserver
16
    var popupId = '4197'; // Your popup ID from Popup Maker
17
    var observer = new MutationObserver(function (mutations) {
18
        mutations.forEach(function (mutation) {
19
            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
20
                var $popup = $('#popmake-' + popupId);
21
                if ($popup.hasClass('active') && blockTitle) {
22
                    // Insert the title into the popup
23
                    $popup.find('.popup-title').text(blockTitle);
24
                    // Insert the title into the form's hidden field
25
                    $('#HIDDENINPUT').val(blockTitle);
26
                }
27
            }
28
        });
29
    });
30
 
31
    // Start observing the popup
32
    var $popupContainer = $('#popmake-' + popupId);
33
    if ($popupContainer.length) {
34
        observer.observe($popupContainer[0], {
35
            attributes: true,
36
            attributeFilter: ['class']
37
        });
38
    }
39
 
40
});

Voici ce qui se passe:

• Capture du titre: lorsque l’on clique sur le bouton portant la classe .jet-button-order, le script remonte le DOM jusqu’au bloc parent .ForContactForm7HiddenInput, y trouve le h3.elementor-heading-title et stocke son texte dans la variable blockTitle.
• Surveillance de la popup: au lieu de l’obsolète attrchange.js (dont le CDN rawgit.com est fermé), le script utilise l’API native MutationObserver, qui surveille les changements de classe sur le conteneur de Popup Maker. Lorsque la classe active apparaît (la popup est ouverte), le script insère le titre sauvegardé dans l’en-tête de la popup et dans le champ caché #HIDDENINPUT.
• Sélecteurs: .jet-button-order est la classe du bouton JetElements d’Elementor; remplacez-la par la classe de votre bouton. Popup Maker génère un conteneur avec l’ID #popmake-{ID}, le code utilise donc #popmake-4197; remplacez 4197 par l’ID de votre popup.

Sous le bloc jQuery se trouve un exemple visuel d’une page comportant plusieurs blocs et boutons «Commander»:

Après avoir cliqué sur le bouton du premier bloc, le script capture le texte «Roller Blinds», l’insère dans le titre de la popup et dans le champ caché du formulaire:

Le même principe s’applique aux cinq blocs: le titre change dynamiquement tandis que le formulaire reste identique.

Étape 5: popups pour la confirmation et l’erreur

Popup Maker vous permet de créer autant de popups que nécessaire. Pour les messages de statut (succès / erreur), créez deux popups supplémentaires comme à l’étape 3. Vous n’avez pas besoin de les lier manuellement à des déclencheurs; CF7 les contrôle via des événements JavaScript.

La popup d’erreur s’affiche lorsque le formulaire échoue à la validation. Contenu:

1
<p style="text-align: center;">
2
    <img src="/wp-content/uploads/2019/02/flag.svg" alt="Error icon" width="177" height="161">
3
</p>
4
<p style="text-align: center;">
5
    The form has errors. Check the messages under the input fields and try again.
6
</p>

La popup de succès s’affiche après un envoi réussi. Contenu:

1
<p style="text-align: center;">
2
    <img src="/wp-content/uploads/2019/02/like.svg" alt="Successful submission icon" width="177" height="161">
3
</p>
4
<p style="text-align: center; padding-top: 15px;">
5
    Done! Your message has been sent successfully. We will contact you shortly.
6
</p>

Ces icônes SVG étaient utilisées dans l’ancienne popup pour indiquer le statut de l’envoi. Vous pouvez les remplacer par les vôtres ou les laisser telles quelles; elles sont neutres et ne sont liées à aucun plugin spécifique.

Reliez les popups de statut via les événements CF7. Ajoutez ce code au même fichier JS cf7-universal-form.js après le script principal:

1
// Show popup on CF7 validation error
2
document.addEventListener('wpcf7invalid', function () {
3
    $('#popmake-1065').popmake('open');
4
}, false);
5
 
6
// Show popup on successful submission
7
document.addEventListener('wpcf7mailsent', function () {
8
    $('#popmake-1068').popmake('open');
9
}, false);

Remplacez 1065 et 1068 par les ID réels de vos popups de statut dans Popup Maker.

Les styles CSS de base pour les popups de statut sont connectés via Apparence → Personnaliser → CSS additionnel ou dans le fichier du thème:

1
/* Error popup */
2
div#popmake-1065 {
3
    z-index: 99999999;
4
}
5
div#popmake-1065 .popmake-close {
6
    font-size: 30px;
7
    color: #9e9e9e;
8
}
9
 
10
/* Success popup */
11
div#popmake-1068 {
12
    z-index: 99999999;
13
}
14
div#popmake-1068 .popmake-close {
15
    font-size: 30px;
16
    color: #9e9e9e;
17
}

Étape 6: tests et débogage

Avant de lancer sur un site en production, vérifiez chaque scénario:

• Clic sur différents blocs: le titre dans la popup et le champ caché change correctement pour chaque bloc.
• Formulaire vide: une soumission sans remplir les champs obligatoires affiche la popup d’erreur.
• Soumission complète: l’email arrive, et le champ caché contient le bon titre du bloc.
• Réouverture: après avoir fermé et rouvert la popup, le titre se met à jour.

Si le titre n’est pas inséré, vérifiez dans la console du navigateur (F12 → Console) que:

• Le sélecteur jQuery .ForContactForm7HiddenInput h3.elementor-heading-title trouve bien un élément sur la page;
• La variable popupId correspond à l’ID réel de la popup dans l’administration;
• La classe du bouton (.jet-button-order) correspond à la classe réellement présente sur la page.

Les sélecteurs dans le code sont liés à Elementor + JetElements. Si vous utilisez un autre constructeur (Gutenberg, Bricks, Oxygen), remplacez par vos propres classes et votre structure de titre. Le principe reste le même: bouton → bloc parent → titre → champ caché.

Regardez cette vidéo pour une démonstration visuelle de la mise en place d’un formulaire en popup avec Contact Form 7:

⁉️🤔 Foire aux questions

Puis-je me passer d’un plugin supplémentaire pour le champ caché?

CF7 de base ne prend pas en charge les champs cachés. DTX est une solution légère et activement maintenue. En théorie, vous pourriez ajouter <input type="hidden"> directement dans le DOM du formulaire via JavaScript, mais c’est moins fiable: le script peut ne pas s’exécuter avant la soumission, et la valeur n’apparaîtra pas dans l’email si elle n’est pas liée à un tag CF7 spécifique. Utilisez DTX ou l’ancien module Contact Form 7 Modules; les deux ajoutent la prise en charge des champs cachés au niveau des tags, et la valeur est garantie d’apparaître dans l’email.

Pourquoi Popup Maker est-il meilleur que l’ancien plugin Popups?

Popup Maker est activement mis à jour (dernière version avril 2026), dispose d’une intégration native avec CF7 et d’autres formulaires, et prend en charge des dizaines de déclencheurs et de règles de ciblage. L’ancien plugin Popups a été officiellement fermé par WordPress.org en juillet 2022 en raison d’une vulnérabilité non corrigée et ne doit pas être utilisé sur des sites en production. Popup Maker est son successeur direct et sécurisé, avec plus de 780 000 installations actives. Avantage clé: l’intégration native avec CF7 (les événements wpcf7mailsent / wpcf7invalid fonctionnent sans code supplémentaire) et un éditeur visuel de popup.

Pourquoi utiliser MutationObserver plutôt que attrchange.js?

La bibliothèque attrchange.js était distribuée via rawgit.com, qui a fermé en 2020. Le dépôt GitHub lui-même est toujours actif, mais y connecter le script n’est pas pratique. MutationObserver est une API native du navigateur, prise en charge par tous les navigateurs modernes depuis 2014, ne nécessite aucune dépendance externe et résout la même tâche: surveiller les changements d’attributs dans le DOM. Moins de requêtes HTTP, aucune mise à jour de dépendance nécessaire.

Que faire si le titre dans le champ caché apparaît en caractères cyrilliques illisibles dans l’email?

Vérifiez l’encodage dans les paramètres de CF7 et du plugin SMTP; il doit être en UTF-8. Assurez-vous que l’objet de l’email ne contient pas de caractères corrompus. Si vous utilisez SMTP via l’API Gmail, le problème peut venir de l’encodage de l’en-tête de l’email; vérifiez les paramètres du plugin Post SMTP ou WP Mail SMTP. En général, la source du problème est le serveur de messagerie, pas le script. Vérifiez: (1) wp-config.php, la ligne define('DB_CHARSET', 'utf8'); sans espaces supplémentaires avant <?php; (2) les paramètres du plugin SMTP, encodage des emails en UTF-8; (3) l’objet de l’email CF7, supprimez les caractères non standard, ne laissez que [dynamichidden-120] sans crochets ni guillemets supplémentaires.

Puis-je utiliser cette approche pour plusieurs formulaires différents sur un même site?

Oui. Créez un formulaire distinct dans CF7 pour chaque type de bloc et une popup distincte dans Popup Maker. Dans le script, dupliquez la logique pour chaque paire «sélecteur de bloc → ID de popup → ID de champ caché». Vous pouvez aussi utiliser une seule popup et un seul formulaire avec différentes classes de blocs; le champ caché recevra le titre du bloc sur lequel on a cliqué, sans configuration supplémentaire.

Un formulaire universel pour tous les blocs de la page est l’intérêt principal de cette solution. Pour des types de blocs complètement différents (produits vs services), créez deux ensembles: formulaire_produit + popup_produit et formulaire_service + popup_service. Dans le script, dupliquez simplement le bloc de code avec des sélecteurs différents.

Quelle stack de plugins utiliser en 2026

Un formulaire universel avec un champ caché est une solution éprouvée pour les pages d’atterrissage comportant des dizaines de blocs similaires. Au lieu de 30 formulaires distincts, vous en configurez un seul, et le script insère automatiquement le titre du bloc. Voici la stack que nous recommandons en 2026:

• Contact Form 7: plus de 10 millions d’installations, léger, gratuit.
• Dynamic Text Extension (DTX): champs cachés et dynamiques, support actif.
• Popup Maker: popups avec déclencheurs au clic et intégration CF7 native.
• MutationObserver (JS natif): surveillance de l’ouverture de la popup sans bibliothèque externe.

Si vous avez besoin de capturer un titre de bloc et de le transmettre à un formulaire, utilisez cette stack. En pratique, cela fonctionne sans problème, et la mise en place prend environ une heure, même avec des connaissances de base de WordPress.

🔗 Dynamic Text Extension sur WordPress.org | 🔗 Popup Maker sur WordPress.org