Tutoriel : Ajouter ReCAPTCHA à Contact form 7 dans WordPress (2024)

ReCAPTCHA est un service gratuit de Google qui empêche les robots de vous envoyer des messages SPAM via vos formulaires. Dans ce guide, je vais vous montrer comment ajouter reCAPTCHA à vos formulaires Contact Form 7 dans WordPress.

L’ajout de reCAPTCHA à Contact Form 7 se fait en deux étapes :

  1. Enregistrez votre site web pour reCAPTCHA (Gratuit) et obtenez vos clés
  2. Ajoutez vos clés reCAPTCHA à Contact Form 7

1) Enregistrez votre site web pour reCAPTCHA et obtenez vos clés

Connectez-vous à votre compte Google (par exemple en vous connectant à Gmail), puis accédez à la console d’administration de console d’administration ReCAPTCHA. Vous verrez l’écran ci-dessous. Vous pouvez également vous rendre sur https://www.google.com/recaptcha et cliquer sur le lien“V3 Admin Console“.

Capture d’écran de la console d’administration de reCAPTCHA

Par défaut, vous créerez une“clé reCAPTCHA d’entreprise“, qui est gratuite jusqu’à 1 million d’évaluations par mois, mais qui vous coûtera ensuite de l’argent. Pour les petits sites, cela convient généralement car vous ne dépasserez jamais cette limite, mais je préfère toujours utiliser la version gratuite de reCAPTCHA au cas où les conditions de la version Entreprise changeraient. Si vous souhaitez également utiliser la version gratuite, il vous suffit de cliquer sur le lien“Passer à la création d’une clé classique“, comme indiqué dans la capture d’écran ci-dessous.

Capture d’écran du lien permettant de créer une clé reCAPTCHA classique

Vous devez maintenant faire trois choses pour enregistrer votre reCAPTCHA :

i) Ajouter une étiquette

L’étiquette est simplement un moyen de reconnaître votre reCAPTCHA dans votre console reCAPTCHA la prochaine fois que vous vous connecterez. Il peut s’agir de n’importe quoi, mais la plupart des gens utilisent simplement le domaine pour lequel le code reCAPTCHA est utilisé – par exemple, exemple.com.

ii) Choisissez votre type de reCAPTCHA

Il existe actuellement deux types de reCAPTCHA. La version 2 (V2) est l’ancienne version de reCAPTCHA et exige de l’utilisateur qu’il coche la case“Je ne suis pas un robot” ou qu’il passe un test visible, comme celui illustré ci-dessous.

ReCAPTCHA Version 3 (V3) est la version la plus récente, dans laquelle l’évaluation de l’humanité du visiteur s’effectue automatiquement en arrière-plan, ce qui signifie que l’utilisateur n’a pas à cliquer sur une case à cocher ou à passer un test.

Dans cet exemple, j’utiliserai la V3 car c’est la version la plus utilisée et la version compatible avec les dernières versions du plugin Contact Form 7.

Note : Vous ne pouvez utiliser ReCAPTCHA V3 qu’avec Contact Form 7 version 5.1 et supérieure. Vous pouvez utiliser V2 avec les anciennes versions de Contact Form 7. Par conséquent, vous ne pouvez pas utiliser les clés V2 sur Contact Form 7 5.1 ou supérieur, et V3 sur Contact Form 7 5.0 ou inférieur.

Capture d’écran d’un test reCAPTCHA V2

iii) Ajouter le domaine de votre site web

Sous“Domaines“, ajoutez simplement le domaine pour lequel le reCAPTCHA est utilisé – par exemple, exemple.com. Une fois que vous aurez cliqué sur “soumettre”, vous serez dirigé vers une nouvelle page contenant votre“clé de site” et votre“clé secrète” reCAPTCHA, comme indiqué ci-dessous.

Note : Vous pouvez choisir d’utiliser le même reCAPTCHA pour plusieurs domaines, et c’est pourquoi vous avez la possibilité d’ajouter plus d’un domaine. Cependant, la plupart des gens n’ajouteront qu’un seul domaine ici.

Capture d’écran de reCAPTCHA Keys

2) Ajoutez vos clés reCAPTCHA à Contact Form 7

Pour ajouter le reCAPTCHA à tous vos formulaires Contact Form 7, allez dans votre backend WordPress (page d’administration) et cliquez sur Contact > Integration comme indiqué dans la capture d’écran ci-dessous.

Descendez jusqu’à la case“reCAPTCHA” et cliquez sur Configurer l’intégration.

Capture d’écran de la page d’intégration de Contact form 7

L’étape suivante consiste à prendre la“clé du site” et la“clé secrète” du reCAPTCHA que vous venez de créer, à les ajouter aux champs de saisie et à cliquer sur “Enregistrer”, comme le montre la capture d’écran ci-dessous.

Note : Ne pas utiliser les touches ci-dessous. Ces informations sont données à titre d’exemple uniquement. Utilisez vos propres clés reCAPTCHA qui ont été générées dans les étapes précédentes.

Capture d’écran de la page d’intégration de Contact form 7 reCAPTCHA

Une fois que vous aurez enregistré vos clés, tous les formulaires Contact Form 7 de votre site utiliseront automatiquement reCAPTCHA V3. Désormais, vos formulaires de contact utilisent le score de reCAPTCHA pour vérifier si la soumission du formulaire provient d’un humain ou d’un robot spammeur.

Si vous utilisiez reCAPTCHA V2, vous devriez ajouter [recaptcha] form-tags à chaque formulaire sur lequel vous voulez qu’un reCAPTCHA V2 apparaisse. C’est ainsi que la case à cocher“Je ne suis pas un robot” apparaît.

Si vous passez de la V2 à la V3, vous n’avez pas besoin de revenir en arrière et de supprimer les balises [recaptcha] de vos formulaires. Si elles se trouvent dans un modèle de formulaire, Contact Form 7 5.1 ou plus les ignore et les remplace par une chaîne vide.

Une fois que vous avez cliqué sur enregistrer, vous verrez une boîte comme celle ci-dessous, vous indiquant que reCAPTCHA est maintenant actif sur tous vos formulaires Contact Form 7.

Capture d’écran de l’intégration réussie de Contact form 7 reCAPTCHA

Qu’en pensez-vous ? Ce tutoriel a-t-il été facile à suivre ? Cela vous a-t-il aidé ? Faites-le moi savoir dans les commentaires ci-dessous !

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Contact

Je suis Aidan, un développeur web international et un expert en référencement.  Jefournis des services de développement web et de référencement à des centaines de clients satisfaits dans le monde entier depuis plus de 20 ans. 

 Si vous avez besoin d’aide pour la conception d’un site web, le développement d’un site web, le marketing numérique ou le référencement, n’hésitez pas à me contacter

Messages récents

S'inscrire à notre lettre d'information

Cliquez sur le bouton “Modifier” pour modifier ce texte. Lorem ipsum dolor sit amet, consectetur adipiscing elit