Vous avez besoin d’un formulaire de contact qui s’adapte aux choix de l’utilisateur: le support technique affiche un jeu de champs, le service commercial un jeu complètement différent. Contact Form 7 standard ne sait pas faire cela. Sans logique conditionnelle, la page affiche un mur de champs d’un seul bloc, dont la moitié ne sert à rien au visiteur. Le résultat est brouillon et source de confusion.

Le plugin Conditional Fields** for Contact Form 7** résout ce problème: les champs apparaissent et disparaissent en fonction de ce que l’utilisateur sélectionne. Voici un guide pas à pas pour construire un véritable formulaire de support, de l’installation du plugin jusqu’aux réponses email personnalisées. La même approche s’applique aux calculateurs, aux enquêtes et aux candidatures en plusieurs étapes.

💡 Aperçu rapide:

• Installez CF7 et Conditional Fields, créez un formulaire de base avec un type de demande
• Encadrez les groupes de champs avec [group]…[/group], configurez les conditions d’affichage via l’onglet «Conditional fields»
• Construisez le formulaire final avec des groupes imbriqués, des libellés dynamiques et une branche personnalisée «Autre»
• Mettez en place un email personnalisé: texte et jeux de champs différents pour le support technique et le service commercial

Ce qu’apportent les champs conditionnels

Contact Form 7 est le constructeur de formulaires le plus répandu pour WordPress: plus de 10 millions d’installations actives, une empreinte minimale. Mais par défaut, il est statique: tous les champs sont visibles en permanence. Si le formulaire comporte trois branches logiques (support technique, commercial, partenariats), le visiteur voit neuf champs supplémentaires qui n’ont rien à voir avec sa demande.

Conditional Fields for Contact Form 7 ajoute une logique «si-alors» directement dans l’éditeur de formulaire. Le plugin est gratuit, noté 4,8 sur WordPress.org, et compte plus de 100 000 installations actives. Son auteur, Jules Colle, développe également la version Pro avec des champs répétables, des formulaires multi-étapes et des valeurs calculées.

Important: le plugin ne retire pas les champs masqués du balisage; il les cache uniquement via JavaScript. Par conséquent, tous les champs situés dans des groupes masqués sont tout de même envoyés au serveur. Les noms de champs doivent être uniques, même entre différents groupes, sans quoi les valeurs seront écrasées. C’est la règle numéro un, et en pratique, c’est l’écueil le plus fréquent.

Installation et formulaire initial

Installez les deux plugins via Extensions → Ajouter:

• Contact Form 7, le constructeur de formulaires lui-même
• Conditional Fields for Contact Form 7, le moteur de logique conditionnelle

Après activation, allez dans Contact → Ajouter et collez le modèle de formulaire. Pas encore de groupes conditionnels, simplement tous les champs d’un coup:

1
Your name: [text your-name]
2
Your email address: [email your-email]
3
 
4
What kind of support do you want?
5
[select support-type first_as_label "-- Choose support type --" "Technical support" "Sales"]
6
 
7
Your operating system: [select operating-system first_as_label "-- Choose your operating system --" "Android" "iOS" "Linux" "Windows"]
8
 
9
In case you selected Technical support:
10
Please specify your OS version: [text version]
11
 
12
In case you selected Sales:
13
Where is your business located? [select continent first_as_label "-- Choose your continent --" "Europe" "America" "Africa" "Asia" "Oceania" "Antarctica"]
14
 
15
[textarea comments]
16
 
17
[submit "Send"]

Voici à quoi ressemble le formulaire sans logique: la sélection du système d’exploitation et les champs de support technique sont toujours visibles, même si le visiteur a choisi «Commercial». Il n’y a pas d’option «Autre OS» du tout, et le libellé du champ de version ne change pas en fonction du système sélectionné. Nous allons corriger cela avec des groupes.

Créer des groupes de champs

Un groupe est une paire de balises [group group-name] ... [/group]. Tout ce qui se trouve entre elles est masqué par défaut et n’apparaît que lorsqu’une condition est déclenchée. Les groupes peuvent être imbriqués les uns dans les autres, ce qui est pratique pour une logique en cascade.

Dans l’éditeur de formulaire, cliquez sur le bouton Conditional group au-dessus de la zone de texte; il ajoute les balises automatiquement.

Dans la fenêtre qui apparaît, définissez le nom du groupe et les options:

• Clear on hide vide tous les champs du groupe lorsqu’il devient masqué. Utile pour que les valeurs des champs invisibles ne soient pas envoyées dans l’email.
• Inline affiche le groupe comme un élément en ligne. Pratique lorsque vous devez insérer un morceau de texte directement dans une phrase (je vous montrerai cela plus loin).

Créez le premier groupe technical-support-selected et déplacez-y les champs de système d’exploitation et de version:

1
[group technical-support-selected]
2
  Your operating system: [select operating-system first_as_label "-- Choose your operating system --" "Android" "iOS" "Linux" "Windows"]
3
  [group os-selected]
4
    Please specify your OS version: [text version]
5
  [/group]
6
[/group]

Il y a déjà deux groupes ici, l’un dans l’autre. Le groupe extérieur (technical-support-selected) représente le fait que le support technique a été sélectionné. Le groupe intérieur (os-selected) est la précision sur la version de l’OS, qui apparaîtra UNIQUEMENT lorsque l’utilisateur choisit un système d’exploitation spécifique. Sans condition, les deux groupes restent invisibles pour le moment.

Même chose pour le service commercial:

1
[group sales-support-selected]
2
  Where is your business located?
3
  [select continent first_as_label "-- Choose your continent --" "Europe" "America" "Africa" "Asia" "Oceania" "Antarctica"]
4
[/group]

Enregistrez le formulaire, et les groupes disparaîtront de la partie publique. C’est normal: il n’y a encore aucune condition.

Mise en place de la logique conditionnelle

Après avoir enregistré le formulaire, allez dans l’onglet Conditional fields. Deux modes sont disponibles: visuel (listes déroulantes) et texte (vous écrivez les règles manuellement). Le mode texte est plus rapide pour les formulaires complexes, nous allons donc l’utiliser.

Cliquez sur Add new conditional rule et saisissez la première règle:

1
show [technical-support-selected] if [support-type] equals "Technical support"

La syntaxe est simple: show <group> if <field> equals "<value>". Une fois la règle enregistrée, le groupe technical-support-selected deviendra visible dès que l’utilisateur choisira «Technical support» dans la liste déroulante.

Ajoutez la règle pour les ventes:

1
show [sales-support-selected] if [support-type] equals "Sales"

Le formulaire bascule maintenant entre deux branches, mais à l’intérieur du support technique, le champ de version reste affiché en permanence. Nous voulons qu’il n’apparaisse qu’après la sélection d’un système d’exploitation spécifique:

1
show [os-selected] if [operating-system] not equals ""

La vérification not equals "" fonctionne parce que nous utilisons first_as_label; la valeur -- Choose your operating system -- n’est pas considérée comme sélectionnée. Le champ operating-system est vide tant que le visiteur n’a pas cliqué sur une option.

Poursuivons: nous devrions ajouter une option «Autre» à la liste déroulante des OS. Si l’utilisateur sélectionne «Autre», nous ne savons pas quel OS il utilise, nous lui proposons donc deux champs texte: le nom du système et sa version. Nous avons besoin d’un nouveau groupe os-other-selected et d’une règle avec l’opérateur AND:

1
show [os-selected] if [operating-system] not equals ""
2
               and if [operating-system] not equals "Other"
3
show [os-other-selected] if [operating-system] equals "Other"

Deux règles pour un même groupe: la première affiche os-selected pour tout OS sauf «Autre», la seconde affiche os-other-selected uniquement pour «Autre». La logique est mutuellement exclusive, il n’y aura donc aucun conflit.

Formulaire final: étiquettes dynamiques et branche «Autre»

Rassemblons maintenant tous les éléments. Nous allons ajouter des groupes en ligne qui modifient l’étiquette du champ de version en fonction de l’OS sélectionné (Android, iOS, Linux ou Windows). Le texte de l’étiquette est «intégré» directement dans le groupe et n’apparaît que lorsque la condition est remplie:

1
Your name: [text your-name]
2
Your email address: [email your-email]
3
 
4
What kind of support do you want?
5
[select support-type first_as_label "-- Choose support type --" "Technical support" "Sales"]
6
 
7
[group technical-support-selected]
8
  Your operating system: [select operating-system first_as_label "-- Choose your operating system --" "Android" "iOS" "Linux" "Windows" "Other"]
9
 
10
  [group os-selected]
11
    Please specify your [group os-android inline]Android[/group][group os-ios inline]iOS[/group][group os-linux inline]Linux[/group][group os-windows inline]Windows[/group] version:
12
    [text version]
13
  [/group]
14
 
15
  [group os-other-selected]
16
    Please specify your OS and version.
17
    [text other-os "Operating System"][text other-version "Version"]
18
  [/group]
19
[/group]
20
 
21
[group sales-support-selected]
22
  Where is your business located?
23
  [select continent first_as_label "-- Choose your continent --" "Europe" "America" "Africa" "Asia" "Oceania" "Antarctica"]
24
[/group]
25
 
26
[textarea comments]
27
 
28
[submit "Send"]

Le point clé: les groupes en ligne avec les noms d’OS ([group os-android inline]Android[/group]). L’attribut inline transforme le groupe en élément en ligne, de sorte que le texte de l’étiquette ne provoque pas de retour à la ligne. Les conditions pour ces groupes dans l’onglet Conditional fields:

1
show [technical-support-selected] if [support-type] equals "Technical support"
2
show [sales-support-selected] if [support-type] equals "Sales"
3
show [os-selected] if [operating-system] not equals ""
4
               and if [operating-system] not equals "Other"
5
show [os-android] if [operating-system] equals "Android"
6
show [os-ios] if [operating-system] equals "iOS"
7
show [os-linux] if [operating-system] equals "Linux"
8
show [os-windows] if [operating-system] equals "Windows"
9
show [os-other-selected] if [operating-system] equals "Other"

Cliquez sur Save conditions, puis enregistrez le formulaire. Copiez le shortcode [contact-form-7 id="..." title="..."] sur une page et testez-le en partie publique. Le basculement entre les branches doit être instantané, sans rechargement de page.

Personnalisation de la réponse par e-mail

Les groupes conditionnels ne fonctionnent pas seulement dans le formulaire, mais aussi dans le modèle d’e-mail. Cela signifie que l’utilisateur peut recevoir un e-mail différent selon ce qu’il a sélectionné.

Ouvrez l’onglet Mail dans l’éditeur de formulaire. Dans le champ Message body, encadrez le texte avec les mêmes groupes que ceux utilisés dans le formulaire:

1
[technical-support-selected]
2
Thank you for submitting your technical support question
3
[/technical-support-selected][sales-support-selected]
4
Thank you for your sales question
5
[/sales-support-selected]

La balise fermante [/technical-support-selected] et la balise ouvrante [sales-support-selected] se suivent immédiatement, sans espace; sinon un saut de ligne supplémentaire apparaîtra dans l’e-mail.

Ajoutons maintenant un tableau avec les champs renseignés. À l’intérieur de chaque groupe, nous listons UNIQUEMENT les champs pertinents:

1
<table>
2
<tr><td>your-name</td><td>[your-name]</td></tr>
3
<tr><td>your-email</td><td>[your-email]</td></tr>
4
<tr><td>support-type</td><td>[support-type]</td></tr>
5
[technical-support-selected]
6
  <tr><td>operating-system</td><td>[operating-system]</td></tr>
7
  [os-selected]
8
    <tr><td>version</td><td>[version]</td></tr>
9
  [/os-selected]
10
  [os-other-selected]
11
    <tr><td>other-os</td><td>[other-os]</td></tr>
12
    <tr><td>other-version</td><td>[other-version]</td></tr>
13
  [/os-other-selected]
14
[/technical-support-selected]
15
[sales-support-selected]
16
  <tr><td>continent</td><td>[continent]</td></tr>
17
[/sales-support-selected]
18
<tr><td>comments</td><td>[comments]</td></tr>
19
</table>

Lorsque le formulaire est soumis, le plugin supprimera de l’e-mail tout ce qui appartient aux groupes masqués. Le support technique recevra les lignes avec l’OS et la version; les ventes recevront uniquement le continent. Propre et clair.

Si vous devez construire les e-mails manuellement et modifier le balisage, l’auteur du plugin a créé un convertisseur web de code CF7 en corps d’e-mail. Collez le code du formulaire et obtenez un modèle de tableau pour l’e-mail.

⁉️🤔 Foire aux questions

Pourquoi tous les groupes sont-ils visibles? Les conditions ne fonctionnent pas.

Commencez par vérifier la console du navigateur (F12) pour détecter d’éventuelles erreurs JavaScript. Conditional Fields charge son script en dernier, et toute erreur JS antérieure casse l’ensemble de la logique. Ensuite, votre thème doit appeler wp_footer() dans footer.php. Sans ce hook, le script ne se chargera pas. Le plus souvent, le coupable est un conflit de plugin: désactivez tout sauf CF7 et Conditional Fields, puis testez le formulaire. Si cela fonctionne, réactivez les plugins un par un jusqu’à identifier le responsable.

Les champs dans l’email arrivent avec des valeurs incorrectes ou vides.

Les noms de TOUS les champs du formulaire doivent être uniques, même si les champs se trouvent dans des groupes différents et ne sont jamais visibles en même temps. Le plugin ne supprime PAS les champs masqués à la soumission; il les masque uniquement visuellement. Deux champs nommés a dans des groupes différents = deux valeurs pour la même clé, et l’une d’elles l’emportera. Assurez-vous que chaque champ possède son propre nom.

Comment créer un formulaire avec des étapes et des champs répétables?

La version gratuite ne le permet pas; vous avez besoin de Conditional Fields Pro. Elle ajoute le multi-étapes (découpage du formulaire en étapes avec des boutons «Suivant»), les blocs de champs répétables (repeater) et les champs calculés. Le coût, sur le site du développeur, dépend du nombre de sites. Si votre formulaire est simple et sans répéteur, la version gratuite est largement suffisante.

Que faire si le plugin entre en conflit avec mon thème?

Activez un thème WordPress standard (Twenty Twenty-Five) et testez le formulaire dessus. Si cela fonctionne, le problème vient de votre thème. En général, appeler manuellement wp_footer() ou déplacer le formulaire vers une page différente sans scripts de thème lourds résout le problème. Si le thème est sur mesure, demandez au développeur de s’assurer que le hook wp_footer() est bien appelé sur toutes les pages contenant des formulaires.

Puis-je utiliser les champs conditionnels pour un calculateur de prix?

Oui, et c’est l’un des scénarios les plus courants. Un ensemble de listes déroulantes (type de service, volume, urgence) avec des groupes conditionnels pour chaque option. La version Pro ajoute de véritables champs calculés; si vous avez besoin de multiplier et d’additionner des valeurs directement dans le formulaire, orientez-vous dans cette direction.

Prochaine étape: du prototype au formulaire de production

Nous avons construit un formulaire de support avec deux branches logiques, des groupes imbriqués et un email personnalisé. La même approche fonctionne pour tout scénario avec conditions: sondages à embranchements, calculateurs, inscriptions avec différents rôles.

Points d’attention avant la mise en ligne:

• Vérifiez l’unicité de TOUS les noms de champs; encore une fois, c’est la règle numéro un.
• Testez le formulaire sur mobile: les longues listes d’options et les groupes imbriqués peuvent ralentir les appareils peu performants.
• Mettez en place une protection anti-spam; Contact Form 7 fonctionne bien avec reCAPTCHA v3, Akismet et Turnstile.

Si la logique de votre formulaire dépasse le simple «afficher/masquer» et que vous avez besoin de répéteurs, de calculs ou de multiples étapes, jetez un œil à Conditional Fields Pro. Mais pour la plupart des besoins, la version gratuite est suffisante: elle est stable, mise à jour toutes les quelques semaines et compatible avec Contact Form 7 version 6.1.6 et WordPress 7.0.

Regardez la démonstration vidéo de l’ensemble du processus, de l’installation au formulaire terminé; elle consolidera chaque étape avec un exemple concret: