Un utilisateur ouvre un formulaire, voit un bouton «Envoyer», clique dessus et reçoit des erreurs de validation. La fenêtre surligne des champs en rouge: «Obligatoire.» Cela vous semble familier?

Contact Form 7, l’extension de formulaires la plus populaire pour WordPress, compte plus de 5 millions d’installations actives. Mais par défaut, elle affiche toujours le bouton d’envoi, même lorsque les champs sont vides. Pour l’utilisateur, cela signifie un clic supplémentaire et de la frustration. Pour le propriétaire du site, cela signifie des prospects perdus: un tiers des visiteurs qui rencontrent une erreur de formulaire quittent la page et ne reviennent jamais.

Vous pouvez corriger cela avec trois lignes de jQuery. Ou vous pouvez le faire sans aucun script, en utilisant du CSS pur. Dans cette analyse, vous obtenez les deux approches, plus une extension prête à l’emploi pour ceux qui ne veulent pas toucher au code.

💡 Aperçu rapide:

• Suivi jQuery: masquer le bouton et ne l’afficher que lorsque la longueur du texte dans tous les champs atteint vos limites
• CSS pur: une astuce avec :valid, :has() et l’attribut required, sans une seule ligne de JavaScript
• Extension Conditional Fields pour Contact Form 7: un constructeur visuel de conditions pour une logique complexe sans code

Pourquoi masquer le bouton d’envoi

Un utilisateur ne devrait pas avoir à deviner ce qui n’a pas fonctionné. Lorsqu’un bouton est visible et cliquable mais que le formulaire n’est pas prêt, cela crée une dissonance cognitive. La personne clique, reçoit une erreur, cherche les champs surlignés, les corrige, clique à nouveau. Chaque cycle de ce type diminue la conversion.

Un bouton masqué jusqu’à ce que tout soit prêt résout trois problèmes:

• Élimine les tentatives d’envoi infructueuses. Pas de bouton, pas de clic prématuré.
• Fournit un retour visuel. L’apparition du bouton = un signal que le formulaire est prêt à être envoyé.
• Réduit les frictions. L’utilisateur remplit les champs, le bouton apparaît, un clic, terminé.

Contact Form 7 n’a pas de mécanisme intégré pour ce comportement. Mais l’ajouter prend 10 minutes de travail.

Méthode 1: suivi des saisies avec jQuery

L’approche la plus flexible. Vous définissez vos propres règles: combien de caractères chaque champ doit contenir avant que le bouton n’apparaisse. Fonctionne avec tout type de champ (texte, email, zone de texte, téléphone).

Corps du formulaire Contact Form 7

À titre d’exemple, prenons un formulaire de contact standard avec trois champs, Google reCAPTCHA et un bouton d’envoi. Voici son balisage dans l’éditeur CF7:

1
[text text-776 id:bim-name class:bim-name placeholder "Name"]
2
[email email-498 id:bim-email class:bim-email placeholder "Email"]
3
[textarea textarea-697 id:bim-message class:bim-message placeholder "Message"]
4
 
5
<style>
6
.g-recaptcha > div {
7
    width: 100% !important;
8
}
9
.g-recaptcha iframe {
10
    width: 100% !important;
11
}
12
div#GoogleReCapchaFullWidth {
13
    width: 100% !important;
14
    padding-bottom: 6px;
15
}
16
</style>
17
 
18
[recaptcha id:GoogleReCapchaFullWidth]
19
 
20
[submit id:bim-button class:bim-button "Submit"]

Le bloc CSS à l’intérieur du formulaire est une astuce pour étirer reCAPTCHA sur toute la largeur du conteneur; cela s’avère utile si le formulaire se trouve dans une colonne étroite.

Script jQuery

Copiez ce code dans le fichier custom.js de votre thème ou dans le champ «Scripts additionnels» de l’extension Code Snippets:

1
jQuery(document).ready(function ($) {
2
 
3
    // Initially the button is hidden
4
    $('#bim-button').css('display', 'none');
5
 
6
    // Listen for input on all three fields
7
    $('#bim-name, input#bim-email, #bim-message').on('input', function () {
8
        var nameVal = $('#bim-name').val().trim();
9
        var emailVal = $('#bim-email').val().trim();
10
        var messageVal = $('#bim-message').val().trim();
11
 
12
        // Conditions: name > 4 characters, email > 6, message > 20
13
        if (nameVal.length > 4 && emailVal.length > 6 && messageVal.length > 20) {
14
            $('#bim-button').fadeIn(200);
15
        } else {
16
            $('#bim-button').fadeOut(200);
17
        }
18
    });
19
 
20
});

Voici ce qui se passe ici:

• Ligne 4: le bouton est masqué immédiatement au chargement de la page (display: none).
• Ligne 7: la méthode .on('input', ...) écoute tout changement de texte dans les trois champs (frappe au clavier, collage depuis le presse-papiers, suppression de caractères). Auparavant, on utilisait .keyup(), mais input est plus fiable: il se déclenche aussi lors d’un collage à la souris.
• Lignes 8-10: nous lisons les valeurs actuelles et supprimons les espaces aux extrémités via .trim().
• Ligne 13: vérification de la condition. Vous pouvez modifier les nombres selon vos besoins: par exemple, > 1 peut suffire pour un champ nom, > 10 pour un message.
• Lignes 14 et 16: fadeIn et fadeOut produisent une apparition et une disparition fluides du bouton sur 200 millisecondes. C’est plus propre qu’un show()/hide() brutal.

Physiquement, l’élément bouton est toujours dans l’arbre DOM de la page; la visibilité est contrôlée par la propriété CSS display. C’est sûr: même si le script ne se charge pas (problème réseau, bloqueur de publicité), le bouton reste simplement visible et l’utilisateur ne perd pas la possibilité d’envoyer le formulaire.

Comment adapter à votre formulaire

Modifiez trois choses:

• IDs des champs: dans le balisage CF7, remplacez bim-name, bim-email et bim-message par vos propres identifiants.
• Limites de caractères: dans la condition if, insérez les nombres dont vous avez besoin. Pour un champ téléphone, vous pouvez vérifier .replace(/\D/g, '').length > 9 (chiffres uniquement, au moins 10).
• Liste des champs: si vous avez 5 champs, ajoutez-les au sélecteur $('#id1, #id2, ...') et à la condition if.

Pour les types de champs [checkbox], [select] ou [radio], la longueur du texte ne fonctionne pas; vérifiez la sélection elle-même:

1
var agreeChecked = $('#bim-agree').is(':checked');

Méthode 2: CSS pur sans scripts

Pour les formulaires simples avec un ou deux champs, vous pouvez vous passer totalement de JavaScript. L’idée est que les navigateurs modernes peuvent vérifier la validité des champs via la pseudo-classe :valid, et le combinateur CSS :has() (pris en charge par tous les navigateurs depuis 2023) vous permet de regarder «à l’intérieur» d’un élément parent.

Cela fonctionne ainsi:

1
form.wpcf7-form .wpcf7-submit {
2
    display: none;
3
}
4
 
5
form.wpcf7-form:has(input[required]:invalid) .wpcf7-submit {
6
    display: none;
7
}
8
 
9
form.wpcf7-form:not(:has(input[required]:invalid)) .wpcf7-submit {
10
    display: block;
11
}

Mais il y a une nuance: CF7 n’ajoute pas automatiquement l’attribut required aux champs. Vous devez l’ajouter manuellement dans le balisage du formulaire; un astérisque * à côté du nom du champ dans l’éditeur CF7 suffit:

1
[text* text-776 id:bim-name placeholder "Name"]
2
[email* email-498 id:bim-email placeholder "Email"]

L’astérisque après le type de champ (text*, email*) active le statut obligatoire. CF7 lui-même insérera l’attribut HTML required dans la balise <input>, et le sélecteur CSS fonctionnera.

L’avantage de la méthode CSS: zéro script, elle ne casse pas en cas de conflits jQuery et elle fonctionne même avec JavaScript désactivé. L’inconvénient: la logique est plus simple («tous les champs obligatoires sont remplis» contre «le champ nom contient plus de 4 caractères»). Pour la plupart des formulaires de contact, cela est suffisant.

Méthode 3: extension Conditional Fields for Contact Form 7

Lorsque la logique devient plus complexe (par exemple, afficher le bouton uniquement si un élément spécifique de [select] est choisi et que l’email est rempli), le code jQuery s’allonge. C’est là que l’extension gratuite Conditional Fields for Contact Form 7 vient à la rescousse (plus de 100 000 installations actives, note de 5 étoiles).

L’extension ajoute un éditeur visuel de conditions directement dans l’interface de CF7. Vous définissez des règles en quelques clics:

• «Afficher le bouton si le champ 'Nom' n’est pas vide ET que le champ 'Email' n’est pas vide ET que le champ 'Message' contient plus de 20 caractères.»
• Ou: «Afficher le champ 'Adresse de livraison' si le bouton radio 'Livraison par coursier' est sélectionné.»

Aucun code requis. Les conditions peuvent être appliquées à n’importe quel champ ou groupe de champs, y compris le bouton d’envoi lui-même. L’extension est activement maintenue et régulièrement mise à jour; en juin 2026, elle est compatible avec la version actuelle de WordPress.

Quelle solution choisir

Trois approches couvrent trois scénarios différents:

• CSS pur: idéal pour une page d’atterrissage avec un formulaire simple de 2 à 3 champs. Un minimum de pièces mobiles, rien qui puisse casser.
• Script jQuery: votre choix lorsque vous avez besoin de limites fines («nom plus long que 4 caractères, message plus long que 20»). Contrôle total des conditions.
• Conditional Fields: à utiliser lorsque la logique se ramifie (différents ensembles de champs pour différents choix, conditions imbriquées, affichage/masquage de sections entières du formulaire). Le constructeur visuel fait gagner des heures de débogage.

Pour la plupart des sites WordPress, la combinaison «jQuery + bon sens» est suffisante. Le script ci-dessus (20 lignes) est inséré une fois et fonctionne pendant des années sans mises à jour.

Vidéo: configuration pas à pas

Ce tutoriel de 8 minutes parcourt l’ensemble du processus, de la création d’un formulaire dans CF7 à un script finalisé de masquage du bouton qui vérifie si tous les champs sont remplis:

⁉️🤔 Foire aux questions

Le script fonctionne-t-il avec les extensions de cache?

Oui, à condition d’utiliser l’enveloppe jQuery(document).ready(...) appropriée. Si le site utilise une minification agressive (Autoptimize, WP Rocket avec combinaison de scripts), excluez le fichier de script de la combinaison ou utilisez l’extension Code Snippets: elle insère le code dans le pied de page comme un bloc séparé que les minificateurs ne touchent pas.

Que se passe-t-il si un utilisateur a désactivé JavaScript?

Avec JavaScript désactivé, le bouton reste visible; le script ne le masque tout simplement pas. C’est une dégradation gracieuse: CF7 effectuera la validation côté serveur et affichera les erreurs de manière standard. Pour la méthode CSS utilisant :has(), la situation est la même: sans validation JS, CF7 vérifie toujours les champs sur le serveur lors de l’envoi.

Puis-je masquer le bouton pour un formulaire spécifique s’il y en a plusieurs sur la page?

Le moyen le plus simple est de donner au bouton un id unique dans l’éditeur CF7, puis d’utiliser cet ID comme sélecteur dans le script. S’il y a plusieurs formulaires, dupliquez le bloc de code pour chaque bouton avec son propre ID, ou trouvez dynamiquement le bouton à l’intérieur du formulaire courant via $(this).closest('form').find('.wpcf7-submit').

Pourquoi ne pas simplement utiliser required sur les champs et se fier à la validation du navigateur?

Parce que required ne masque pas le bouton; il bloque seulement l’envoi du formulaire et affiche une infobulle native du navigateur. Notre objectif est de supprimer la possibilité même d’un clic erroné. De plus, la validation standard du navigateur ne vérifie pas la longueur du texte, seulement le fait que le champ soit rempli, et pour un message de 2 caractères, c’est une protection faible.

Dois-je encore valider les champs côté serveur?

Oui, absolument. La logique côté client pour masquer le bouton ne remplace pas la validation côté serveur de CF7. Configurez toujours les champs obligatoires dans l’éditeur de formulaire (le * dans le balisage) et vérifiez que les emails sont bien délivrés. Deux couches de protection: frontend pour la commodité, backend pour la sécurité.

Bouton masqué, prospects propres: que retenir pour votre site

L’approche consistant à masquer le bouton d’envoi fait partie de ces micro-améliorations invisibles à l’œil mais perceptibles à l’usage. Un utilisateur ne dira pas «super, le bouton est apparu au bon moment». Mais il remplira le formulaire et ne partira pas après le premier clic dans le vide.

Pour un formulaire de contact simple, utilisez la méthode CSS avec :has(): 5 lignes de code, zéro dépendance. Pour des limites de longueur personnalisées sur les champs, utilisez le script jQuery de la méthode 1 (copiez et collez dans Code Snippets). Pour les formulaires complexes avec une logique ramifiée, utilisez Conditional Fields.

Essayez dès maintenant: ouvrez l’éditeur de votre formulaire de contact dans CF7, ajoutez id: aux champs et au bouton, collez le script et vérifiez comment le bouton apparaît uniquement lorsque tous les champs sont remplis de manière significative, et non au hasard.