Petit Tip #2 Comment cacher le badge reCAPTCHA (V3) ?

Bienvenue dans ce nouvel article concernant le badge reCAPTCHA de Google.

Si Contact Form 7 est votre plugin pour vos formulaires de contact, vous avez sûrement choisi de vous protéger au mieux contre les spams.

Pour cela, plusieurs possibilités existent y compris reCAPTCHA. C’est le fameux « Je ne suis pas un robot » à cocher lorsque vous complétez un formulaire contact.

Cette case à cocher est la version V2 du reCAPTCHA. Quand le visiteur clique, le reCAPTCHA l’invite à répondre à une (voir plusieurs) question afin de prouver qu’il n’est pas un robot. C’est le format « challenge ».

Pour sa dernière version, le reCAPTCHA V3 vérifie à l’aide d’un score si l’interaction du visiteur est légitime sans demander d’action de sa part. Un badge s’affiche alors sur vos pages comme cela :

L’intégration du badge est facilitée par l’utilisation du plugin de Contact Form 7 et aucune connaissance en JavaScript vous sera nécessaire. Pour cela, suivez simplement les instructions de la section « Integration » du plugin.

Une fois activée, votre site est protégé.

Malheureusement, la visibilité importante du badge peut vous poser problème notamment dans votre version mobile.

Je me suis ainsi rendue compte que l’expérience du visiteur était grandement affectée par le badge sur la version mobile de mon site. Voyez plutôt l’image de la capture mobile de ma page d’accueil :

Le badge empiète sur mon menu, empêchant le visiteur de cliquer sur mon dernier bouton « Contact ».

Est-il alors possible de rendre le badge invisible tout en maintenant son bon fonctionnement ?

La réponse est : oui !

Cependant, certaines règles sont à respecter.

En effet, reCAPTCHA nous protège certes de façon invisible, mais le crédit du travail doit tout de même être accordé à Google.

Ainsi sur le site officiel, voici ce qui est précisé :

« Vous pouvez cacher le badge tant que vous insérez un crédit pour reCAPTCHA visible lors de la visite de l’utilisateur. Merci d’insérer le texte suivant :

Ce site est protégé par reCAPTCHA et Google
    <a href="https://policies.google.com/privacy">Politique de confidentialité</a> et
    <a href="https://policies.google.com/terms">Conditions d'utilisation</a>.

« . A noter que je vous fournis une version traduite par mes soins que vous pouvez retrouver en anglais ici.

Pour rendre le badge invisible, le code CSS suivant doit être inséré sur votre site :

.grecaptcha-badge { visibility: hidden; }

Attention cependant si l’insertion de code CSS ou l’utilisation du plugin Contact Form 7 ne vous sont pas familières, pensez à demander de l’aide à votre webmaster.

Source : reCAPTCHA