Pourquoi ajouter un reCAPTCHA à son site Webflow ?
Les reCAPTCHA permettent d'éviter la soumission de formulaire de manière trop répétitive par des personnes mal intentionnées, et donc vous éviter le spam.
Ils sont disponibles pour tous les formulaires de vos sites Webflow, et gratuit d'utilisation.
Important à savoir
➡️ Important
Quand vous activer les reCAPTCHA sur votre site, ils devront être ajoutés à tous les formulaires sans exception.
Tous les formulaires qui n'auront pas le captcha ne pourront pas être soumis.
🌏 Bon à savoir
Les reCAPTCHA détectent automatiquement le language du visiteur, et affiche le widget dans la bonne langue.
💡 Bon à savoir (bis)
Vous avez gratuitement accès à jusqu'à 1 million d'évaluation par mois
De quoi aurez-vous besoin ?
Si vous souhaitez faire la démarche tout seul, vous aurez besoin de tous les éléments.
Si vous êtes accompagné par votre expert Webflow, seul les deux premiers point sont nécessaires à votre niveau.
Si vous êtes expert Webflow, seul le dernier point vous est nécessaire.
- Des identifiants d'accès à un compte Google (pas forcément un Google Workspace, ça peut très bien être un compte personnel)
- La liste des domaines que vous souhaitez connecter (vous pouvez la demander à votre expert Webflow)
- De l'accès Designer au site Webflow (si vous avez un doute, voir notre article sur les rôles et droits d'accès dans Webflow)
Comment ajouter un reCAPTCHA étape par étape
Etape 1 : Récupérer la clef chez Google
Cette étape ne devrait être faite que par la personne qui possède le domaine.
La clef créée sera liée à un compte Google, et le mieux est que ce soit le propriétaire du site qui la garde, en cas de changement de prestataire par exemple 😉
- Rendez-vous sur https://www.google.com/recaptcha/admin/create
- Vérifiez que vous êtes connecté avec le compte Google auquel vous souhaitez associer la clef (ce n'est pas en soit très grave, pas d'inquiétude)
- Choisissez le nom que vous souhaitez donner à votre clef. Elle n'a aucun intérêt particulier autre que vous permettre de savoir à quoi elle sert 😉
- Sélectionnez Défi (v2) en type de reCAPTCHA. Les v3 ne sont pas encore compatibles avec Webflow.
- Ajoutez les domaines sur lesquels le reCAPTCHA sera utilisé (voir notre article pour trouver la liste exhaustive des domaines utilisés sur votre site Webflow)
- (Lisez) et acceptez les conditions d'utilisation
- Validez votre demande
- Si vous travaillez avec un expert Webflow, c'est terminé pour vous ! Copiez et envoyez à votre développeur la clef du site et la clé secrète. Pensez à lui préciser laquelle est laquelle 😉
Si vous faites l'intégration complète seul, copiez les deux clefs et passez aux étapes suivantes.
Etape 2 : Ajouter les clefs dans les paramètres Webflow
- Rendez-vous sur https://webflow.com/dashboard
- Sur le projet auquel vous souhaitez ajouter le reCAPTCHA, cliquez sur les "...",
- Puis "Settings"
- Rendez-vous dans dans l'onglet "Forms"
- Entrez vos deux clefs récupérées à l'étape 1. Attention à ne pas les inverser !
- Cochez le switch "Enable reCaptcha".
- Enregistrez vos modifications
- Accédez ensuite au designer du site via le bouton violet tout en haut à droite de la page
Etape 3 : Ajouter l'élément reCAPTCHA sur les fomulaires
➡️ Important
Quand vous activer les reCAPTCHA sur votre site, ils devront être ajoutés à tous les formulaires sans exception.
Tous les formulaires qui n'auront pas le captcha ne pourront pas être soumis.
Effectuez les étapes suivantes pour tous les formulaires de votre site :
- Rendez-vous sur une page avec le formulaire
- Sélectionner le formulaire ou un élément dans le formulaire. Vous pouvez par exemple cliquer sur un champ ou entre les champs, ou encore utilisez le panneau "Navigator"
- Ajoutez un élément en tapant CMD + E ou CTRL + E et cherchez "reCAPTCHA" (vous n'aurez pas besoin de tout taper). Vous pouvez aussi utilisez le plus sur la barre de gauche et descendre jusqu'à trouver l'élément reCAPTCHA. Cliquez dessus.
- Placez le à l'endroit désiré dans le formulaire.
Une fois que vous avez fait tous les formulaires de votre site, publiez-le.
Si vous avez besoin de temps avant de publier votre site, vous pouvez tout à fait attendre, et revenir terminer plus tard.
Plus d'informations
Voici la documentation officielle de Webflow (en anglais)
