Comment ajouter un reCAPTCHA à 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

Par

Camille

•

5 mins

mins de lecture

Formations

Codelius

Sommaire

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)

https://university.webflow.com/lesson/recaptcha

Prenez <contact> avec nous

Nous aimons les challenges

Contactez-nous

</style><style data-rc-order="prependQueue" data-css-hash="1his0cd" data-token-hash="himppx">.anticon{display:inline-flex;align-items:center;color:inherit;font-style:normal;line-height:0;text-align:center;text-transform:none;vertical-align:-0.125em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.anticon >*{line-height:1;}.anticon svg{display:inline-block;}.anticon .anticon .anticon-icon{display:block;}</style><style>.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}</style><meta charset="utf-8"><title>Portfolio - Codelius</title><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" name="description"><meta content="Portfolio - Codelius" property="og:title"><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" property="og:description"><meta content="Portfolio - Codelius" property="twitter:title"><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" property="twitter:description"><meta property="og:type" content="website"><meta content="summary_large_image" name="twitter:card"><meta content="width=device-width, initial-scale=1" name="viewport"><link href="https://cdn.prod.website-files.com/62d15fe5fc13096216837c9f/css/lamrx.webflow.b445a3420.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com" rel="preconnect"><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,regular,500,700%7CIndie+Flower:regular" media="all"><script type="text/javascript">WebFont.load({ google: { families: ["Poppins:300,regular,500,700","Indie Flower:regular"] }});</script><script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script><link href="https://cdn.prod.website-files.com/img/favicon.ico" rel="shortcut icon" type="image/x-icon"><link href="https://cdn.prod.website-files.com/img/webclip.png" rel="apple-touch-icon">
<!--

5/5

Nos clients vous en parlent

Il faut avouer que nous ne sommes pas très objectifs sur nos prouesses, mais eux... oui !

Les avantages de travailler avec Codelius : réactivité, flexibilité et rigueur.

Mathieu

CEO @ hyffen

L'équipe Codelius est exceptionnelle : professionnelle, très compétente et profondément investie dans la réussite du projet. Leur contribution a été essentielle au développement de notre site. Ils nous ont apporté une vraie valeur, aussi bien dans le prototypage avancé que dans le suivi en production. Nous les considérons vraiment comme une extension de notre équipe.

Juliet Clark

Head of Product, BoxMedia

Travailler avec Codelius et Camille a été une expérience fantastique. Camille est une véritable experte avec une connaissance et une expérience très étendues de Webflow. La collaboration s’est toujours faite d’égal à égal et la communication était simple et agréable. J’ai vraiment apprécié son initiative lorsqu’elle proposait des retours sur les idées de design et sa volonté de mettre en place une structure solide pour les couleurs et les composants derrière le design. J’ai beaucoup appris grâce à notre collaboration et je choisirais Codelius à nouveau sans hésiter.

Isabell H.

Senior Product Designer

Collaborer avec Camille a été très simple. Nous avons travaillé via un Google Doc et WhatsApp, et une seule visioconférence rapide a suffi. J’ai été très satisfait du prix ainsi que de la qualité du site.

Chris Tyler

Founder @ Search Party Capital

Camille est tellement forte que je ne vous la recommanderai pas je veux la garder pour moi tout seul ;p Super fluide, rapide et diablement efficace. Clairement au-dessus des mes attentes et brief parfaitement cerné avec finalement peu d'éléments. Une pépite !

Basptiste W.

CEO @ uRoot

[...] Codelius a su répondre à ce besoin, en nous offrant des résultats rapides et propres. Lorsque nous avons eut des besoins un peu plus poussés, [...] ils ont su aller au-delà de la technologie pour créer une solution custom ! Ils sont restés présents et disponibles pour répondre à nos questions et nous aider à prendre en main le tout !

Grégoire G.

CEO @ Albert School

Du design au développement, le rendu est celui voulu, et c'est vraiment très beau. On est ravis du projet. Côté dev pour - mise en place du design, Camille a été superbe de patience et de flexibilité pour s'assurer que j'obtienne, au pixel près, le résultat désiré. Chapeau Camille !

Jeff

Manager @ Relookitchen

Camille est la personne qu’il vous faut pour vos projets webflow, airtable et autres outils nocode. Elle est professionnelle, à l’écoute et réalise un travail de grande qualité. Je recommande sans hésitation !

Sébastien P.

Gérant @ Magicien Professionnel

Camille et l’équipe Codelius ont livré exactement ce dont nous avions besoin, dans les délais — ce fut un plaisir de travailler avec elle et nous avons hâte de retravailler avec eux à l’avenir.

Tessa

Co-Founder @ Pipeline Solution

Travailler avec l’agence Codelius et Camille a rendu l’IT agréable, pas stressant. Elle a cette combinaison unique de compréhension du design global, d’apports expérimentés, de touche artistique française et de capacité à mettre en œuvre des solutions personnalisées de bas niveau. À la fin du projet, j’aurais aimé qu’elle soit une collègue. J’espère retravailler avec elle un jour.

Adam M.

Operations Manager & BI Analyst @ Nordlux Australia

Nous sommes certifiés experts par Webflow eux-même depuis 2020. Il s’agit de notre outil de prédilection, avec Webflow nous pouvons faire des merveilles !

Nos développements Webflows prennent majoritairement leurs base depuis une maquette Figma. Elle permet à nos clients de valider un design avant de le concevoir.

Nous sommes partenaires d’une agence de webdesign pour combiner nos savoirs-faire et proposer à nos clients la meilleure option pour leurs projets les plus fous.

Pourquoi ?

Comment ?

Vos questions, nos réponses

Pourquoi ne pas simplement créer une application avec un “AI builder” ?

L’IA et les AI builders ne sont pas des solutions miracles. Ce sont des outils. Puissants, certes, mais des outils malgré tout.
Chez Codelius, nous les utilisons quotidiennement — non pas comme des solutions “tout-en-un”, mais comme des accélérateurs.

Si vous souhaitez une application fiable, évolutive et réellement adaptée à votre activité, des mains humaines restent indispensables.
L’IA peut générer des idées, des ébauches ou des composants, mais elle ne remplace ni une architecture réfléchie, ni des choix UX cohérents, ni une rigueur technique, ni un accompagnement dans la durée.

En résumé : l’IA accélère la création, mais seule l’expertise humaine garantit un produit durable.
Nous combinons les deux — jamais l’un au détriment de l’autre.

Êtes-vous des experts certifiés Webflow ?

Oui. Notre équipe est officiellement certifiée experte par Webflow depuis début 2022.

Nous nous tenons en permanence informés des meilleures pratiques, des nouvelles fonctionnalités et des évolutions de la plateforme.
Cela nous permet de livrer des projets fiables et évolutifs, ainsi que de proposer des sessions de formation basées sur les connaissances Webflow les plus récentes et les plus exigeantes.

Combien de personnes travaillent chez Codelius ?

Nous sommes actuellement une équipe de trois experts Webflow, chacun avec ses propres spécialisations : développement sur mesure, design et gestion de projet.
Lorsque c’est nécessaire, nous collaborons également avec un réseau restreint d’agences partenaires et de freelances de confiance, afin de répondre à des besoins techniques spécifiques ou à des périodes de forte demande.

Votre expérience, elle, reste toujours simple et fluide : vous disposez d’un interlocuteur unique dédié, et nous nous chargeons de tout le reste en coulisses.

Combien de temps dure le développement ?

Cela dépend de l’ampleur de votre projet : nombre de pages, niveau de complexité, animations, fonctionnalités avancées, ou encore les éléments que vous pouvez fournir (maquettes, images, guidelines, etc.).

Mais comme « ça dépend » n’est jamais une réponse satisfaisante, voici des délais réalistes basés sur les types de projets que nous réalisons.

• Site Web avec maquettes fournies
À partir de 15 jours de développement.

• Site Web conçu avec un design assisté par IA
À partir de 3 semaines (design + développement).

• Site Web avec design professionnel sur mesure
‍(Conçu par une agence partenaire)
À partir de 1 mois (design + développement).

• Application Webflow (comptes utilisateurs, fonctionnalités custom)
À partir de 1 semaine lorsqu’elle est construite sur un site existant.
Des fonctionnalités plus avancées peuvent étendre le délai à plusieurs mois.

• Applications natives ou applications React complexes
Conçues et développées entièrement sur mesure.
Les délais sont établis au cas par cas, mais dépassent rarement 3 mois entre la conception initiale et la mise en production.

Chaque projet a ses particularités.
La manière la plus fiable d’obtenir un délai précis est de nous expliquer ce que vous souhaitez construire : nous vous fournirons alors un planning clair, réaliste et adapté à votre ambition.

‍

Avoir une estimation pour mon projet