Google reCaptcha v3 est apparu sans crier gare dans Divi 4.0.7.
Pour s’en apercevoir, il fallait lire le changelog de Divi ou tomber par hasard sur l’option lors de la création d’un nouveau formulaire.
Quelle que soit la manière dont vous l’avez découverte, l’important est que cette fonctionnalité soit enfin venue enrichir le module Formulaire de Divi.
Auparavant il fallait avoir recours à un plugin premium tel que Divi Contact Extended que nous vous avions présenté il y a peu.
Voyons donc comment configurer Google reCaptcha v3 dans vos formulaires Divi.
Google reCaptcha v3 c’est quoi ?
Google reCaptcha est le système de protection contre le spam made in Google.
La v2 ajoutait une case à cocher “Je ne suis pas un robot” et si le système doutait de vous, vous pouviez être amené à identifier des images de véhicules, de batiments, etc.
La v3 simplifie les choses en ne réclamant aucune action de la part de l’utilisateur. Elle analyse l’activité du visiteur sur le site et détermine s’il s’agit d’un humain ou d’un robot en lui attribuant une note entre 0,0 et 1,0.
Seul un badge en bas à droite du site précise que le site est protégé par Google reCaptcha v3.
Comment mettre en place Google reCaptcha v3 sur son site Divi ?
Configurer Google reCaptcha v3
Tout d’abord, rendez-vous sur le site de Google reCaptcha.
En haut à droite de la fenêtre, cliquez sur le bouton bleu Admin Console.
Bien sûr, comme pour utiliser n’importe quel service de Google, vous devez posséder un compte Google.
Toujours en haut à droite de votre écran, cliquez sur le bouton + pour enregistrer le site sur lequel vous souhaitez ajouter votre reCaptcha.
Commencez par donner un nom à votre site afin d’être en mesure de l’identifier facilement lorsque vous en aurez plusieurs d’enregistrés.
Choisissez le type de reCaptcha que vous souhaitez : la v3 en l’occurence.
Précisez le nom de domaine de votre site (sans https:// et www.)
Si vous utilisez des sous-domaines, il n’est pas nécessaire de les inscrire, le domaine principal est suffisant.
Par défaut, le compte Google avec lequel vous êtes connecté sera défini comme propriétaire du domaine.
Mais vous pouvez autoriser d’autres comptes Google à administrer ce domaine et à recevoir des alertes si celles-ci sont activées.
Il est préférable de laisser activé l’envoi de notifications si une erreur est détectée.
Quand votre configuration est terminée, cliquez sur le bouton Envoyer pour valider vos paramètres.
Vous arriverez ensuite sur une page de confirmation sur laquelle vous obtiendrez les clés qui vont vous servir à configurer Google reCaptcha v3 dans votre module Formulaire de Divi.
Gardez donc cet onglet ouvert et affichez votre site dans un autre onglet.
Configurer le module Formulaire de Divi pour ajouter Google reCaptcha v3
Dans les paramètres de votre module Formulaire, rendez-vous à la section Spam Protection.
- Passez sur Oui le switch “Use a spam protection service”
- Choisissez ReCaptcha comme fournisseur de service (pour l’instant c’est le seul choix, mais la liste déroulante suggère que d’autres solutions pourraient venir dans le futur)
- Cliquez sur le bouton Ajouter pour ajouter un nouveau compte (CF capture et explicatif ci-dessous)
- Nommez votre compte pour l’identifier facilement (il n’est pas nécessaire qu’il porte le même nom que lorsque vous avez configuré votre compte dans la console d’administration de Google reCaptcha).
- Collez la clé de votre site que vous avez obtenue précédemment
- Collez la clé secrète que vous avez obtenue précédemment
- Cliquez sur le bouton Envoi pour valider
Le dernier paramètre du module Formulaire de Divi pour configurer Google reCaptcha v3 correspond au score minimum toléré comme une interaction correcte. En-dessous, l’utilisateur sera considéré comme un robot et au-dessus comme un humain.
Je vous conseille de laisser la valeur par défaut ; vous pourrez l’ajuster si besoin.
Enfin, il ne vous reste plus qu’à valider les modifications effectuées sur votre module Formulaire et à enregistrer les changements sur la page.
Vous pourrez ensuite constater, en bas à droite de la fenêtre de votre site, la présence du badge annonçant que Google reCaptcha v3 est actif et protège votre site Divi des robots spammeurs.
Le mot de la fin
L’ajout très discret de la part d’Elegant Themes de l’option Google reCaptcha v3 dans le module Formulaire de Divi est une belle surprise qui permet d’éviter le recours à un plugin tiers.
De plus, vous venez de voir que sa configuration était très rapide et aisée.
Vous pouvez donc désormais supprimer le “vieux” captcha de calcul qui embarrassait jusqu’à maintenant les visiteurs de sites créés avec Divi.
Car votre site Divi est maintenant efficacement et discrètement protégé par Google reCaptcha v3.
Bonjour,
Je viens de l’implémenter sur un de mes sites et je confirme qu’il fonctionne parfaitement.
Adieu le système de calcul qui nous faisait perdre (un peu) de conversion sur nos sites !
Bonjour,
Mille mercis pour ce nouveau tutoriel très intéressant.
Ma question : Il y a le logo de reCaptcha v3 qui s’affiche en permanence en bas à droite des pages du site.
Si ce n’est pas gênant dans la version PC, c’est plus envahissant dans le version Smartphone où cela couvre certaines parties du texte.
Y a-t-il moyen de ne pas afficher ce logo ou de ne l’afficher qu’en-dessous du formulaire ?
Merci d’avance pour votre réponse.
Henri Elias
Tu peux le masquer sur les petits écrans avec des CSS :
@media only screen and ( max-width: 479px ) {
.grecaptcha-badge {
visibility: hidden!important;
}
}
Mille mercis, Pierre !
Euh… Petite question complémentaire: je place le code dans quel partie du site ? La page d’accueil ?
Soit dans le fichier style.css de ton thème enfant, soit dans les options de Divi -> Général -> Personnaliser CSS.
Plus d’infos sur le sujet dans cet article.
Bonjour Pierre
J’étais ravi de cette nouvelle option, jusqu’à ce que je m’aperçoive que sa mise en place provoque un bug énorme sur mon site : des modules qui disparaissent !
Pourtant ces derniers apparaissent bien dans le builder mais pas en public.
J’ai désactivé quelques modules pour voir une incompatibilités mais rien n’y fait 🙁
Aurais-tu une solution ?
Merci par avance
Ça me surprend que Google reCaptcha puisse avoir un tel impact sur Divi… 🤔
Viens en parler sur notre groupe Facebook en partageant l’URL de ton site.
J’ai modifié mon code car je viens de tomber sur une info qui explique qu’il faut préférer visibility: hidden à display: none, sinon l’antispam sera désactivé.
Bonjour Pierre,
Merci Pierre pour ce tuto aussi bien fait que diffusé rapidement après la mise à jour Divi.
J’ai une adresse professionnelle, et le recaptcha 3 ne peut se faire qu’avec du gmail, donc si je mets mon adresse pro dans le site avec le recaptcha lié à mon google est-ce que l’efficacité est la même ?
Merci encore pour votre site et votre page Facebook.
Merci pour tes encouragements. 🙂
Pas de souci pour utiliser un mail différent car reCaptcha v3 analyse l’activité du visiteur sur le site, ça n’a donc rien à voir avec l’adresse mail.
Hello
Merci pour ce super tuto. j’ai appliqué sur 2 sites.
Mais sur un site j’ai du modifier le réglage du minimum score à 0.7 car je commençais a redevoir des spams.
Bonsoir,
Merci pour ce tutos.
Du coup si on utilises cette fonction, Askimet est encore utile ou pas ?
Bonjour, Akismet protège essentiellement les formulaires de commentaires, pas de contact de Divi. Donc oui il est encore utile 😉
Bonsoir, merci de ta réponse.
Je laisse les deux et je verrais si j’ai des bugs ou pas.
Bonjour, J’ai bien fait tout comme il est décrit. Tout fonctionne sauf que je reçois bien l’avis qu’un commentaire a été posté mais pas le texte du commentaire lui même, ce qui un peu dommage !
Quelle est mon erreur ?
merci pour votre aide.
Bonjour !
J’ai sur mon site l’extension Advanced noCaptcha & invisible captcha Settings qui concerne bien la version V3 du reCaptcha.
Pourtant dans mes formulaires je n’ai pas de section “spam protection”, je n’ai qu’une section “Elements” qui me laisse choisir si je montre ou non le captcha (et dans ce cas il s’agit du captcha addition).
Avez-vous une idée de comment ça se fait ?
Merci !
Merci pour ce tuto qui m’a été très utile ! Je vous rejoins sur Facebook.
Très cordialement,
Christophe.
Bonjour,
ta version de Divi est à jour?
Bonjour,
Oui elle est à jour !
Bonjour à tous,
moi j’ai un reel problème avec le captcha car il ne s’affiche pas !
Une idée ?
Je t’invite à bien revérifier la marche à suivre.
Concernant le captcha qui ne s’affiche pas pour Audrey, j’ai eu le même problème.
Première chose à faire, passer le Spam Score à 1. Puis faites un test d’envoi de votre formulaire. Si l’envoi ne passe pas c’est que le capcha est bien actif.
Dans mon cas, il était masqué. Pour le faire apparaître, j’ai ajouté le CSS suivant :
div.grecaptcha-badge {
z-index:1;
}
Le problème est apparu sur seulement 2 de mes sites. Sur les autres pas de soucis.
Bonjour Pierre,
Merci pour ce tuto super clair tout semble fonctionner à la perfection. Juste un peu gêné, effectivement comme mentionné ci-dessus par Heni Elias sur la taille du logo reCAPTCHA et sa présence constante sur la page et pas seulement au niveau du formulaire.
Bonsoir, tout d’abord merci pour votre tuto clair et précis mais malgré cela j’ai un bug sur le Captcha. Il marche trop bien, je n’arrive plus à envoyé un seul formulaire. Chaque fois il me dit que je suis un bot, j’ai fais le test avec le minimum score à 0 rien n’y fait. Auriez vous une idée ? merci d’avance
Bonjour, moi je viens de l’activer sur mon formulaire mais il n’apparaît pas sur ma page contact et j’ai bon désactiver les plugins tiers rien à faire 🙁
Salut la community,
Pour faire disparaitre le reCaptcha moi j’ai utilisé ses lignes :
.grecaptcha-badge {
visibility: collapse !important;
}
Cette propriété est plutôt adaptée aux cellules de tableaux…
display: none;est à privilégier ici.Bonjour,
J’ai beau suivre les directives ainsi que les conseils de Moa pour faire apparaître le captcha, rien n’y fait, il est bien actif, mais je ne le vois pas, je commence à désespérer, mes clients se retrouvent sans protections spam…
Ça n’est pas parce que tu ne vois pas le badge que reCaptcha n’est pas actif. Revérifie tes CSS.
Comment remplacer les clés existantes ? Pas moyen d’afficher le bouton permettant d’ajouter un nouveau compte.
Salut,
Super tuto !
Après quelques recherches, il semble que le système ReCaptcha de Google n’est pas conforme avec les lois RGPD. Problèmes de cookies.
Existe-il une astuce pour le rendre conforme sans trop de prise de tête ?
Merci.