Rendre aimable le CAPTCHA d’un formulaire contact
Publié le 25 octobre | par Blue Agency| HTML & CSS
Au moment d’envoyer un formulaire contact, on vous a souvent demandé de prouver que vous étiez un humain, et non un petit robot.
Rien de plus énervant lorsqu’on remplit un formulaire, que d’avoir à prouver que oui, on est bien un être conscient, et d’avoir à recopier ou calculer une saisie alphanumérique sans aucun intérêt avec notre demande :
Le CAPTCHA a 11 ans, et a été inventé par les chercheurs de l’Université Carnegie Mellon, aux Etats-Unis. Aujourd’hui, la technique de l’affichage d’image a évolué, pour proposer des solutions en 3D.
Devant ce gros carré inesthétique et franchement patibulaire, vous vous êtes parfois acharné pendant plusieurs minutes à recopier la suite de chiffres et lettres imbriqués et incompréhensibles, en respectant la casse, l’espace de séparation, en cliquant sur « Rafraîchir » (la suite de caractères ignobles), en écoutant le captcha en version audio…
Ou bien vous avez tenté de l’amadouer en :
- tapant F5 (et du coup en perdant votre saisie de formulaire)
- en allant directement dans le code source de la page voir si l’email destinataire ne s’y trouvait pas…
Hum, vous n’avez pas dû arriver à vos fins, et vous avez peut-être fini par… quitter la page ?
Quelques algorithmes actuels de CAPTCHA, lesquels ont tendance à se complexifier pour faire face aux avancées du déchiffrement automatique :
et même des CAPTCHA animés :
Mais on a gardé le meilleur pour la fin :
… Il faut être vraiment motivé, non ? Vous l’êtes certainement, mais vos internautes, un peu moins. Quand vous avez déployé des trésors d’énergie pour acquérir du trafic et faire baisser votre taux de rebond, autant ne pas louper la dernière étape de votre tunnel de conversion.
Après cette série de laideur et de maux de crâne, passons aux choses pratiques.
Alors oui, il s’agit d’éviter le spam (en tout cas issu d’envois automatisés de masse). Mais pour vous protéger des emails non sollicités tout en offrant à vos internautes une expérience efficace voire agréable, plusieurs solutions s’offrent à vous pour neutraliser l’étape obligée du CAPTCHA.
Il convient de garder à l’esprit quelques bonnes pratiques d’e-relation client (ou eCRM). Ce formulaire de vérification doit être :
- rapide (pas plus de 5 secondes)
- logique (n’obligez pas un internaute à réfléchir alors qu’il vient de rédiger sa demande)
- ludique (sollicitez le cortex adulescent de l’internaute pour qu’il réagisse positivement !)
et surtout, faire sens avec la thématique et le graphisme de votre site : garder de la cohérence. Si vous avez conçu un beau template, pourquoi iriez-vous gâcher les pages en insérant un bloc à la couleur et au format qui n’ont rien à voir ?
Les petits modules qui composent votre site doivent être travaillés selon une même charte graphique et fonctionnelle, et faire en sorte que vos internautes adhèrent à votre univers (qu’il s’agisse de ecommerce, de blog…).
Des exemples de bonnes pratiques :
- un CAPTCHA adapté à la thématique du site (ici bien-être) :
Les termes à saisir sont définis et compilés dans des fichiers de langues (fr / en / …).
Vous pouvez aussi personnaliser le message de rafraîchissement en créant une complicité avec l’internaute.
- un CAPTCHA presque enfantin, avec solution de reconnaissance d’image :
Les images et thèmes peuvent être complètement customisés selon vos besoins.
Le module pour Joomla ici : extension flexicontact
- un CAPTCHA minimaliste (mais quand même un peu mathématique
- un CAPTCHA avec un simple déplacement de curseur en drag & drop, en jQuery :
Le script ici : www.myjqueryplugins.com/QapTcha
- un CAPTCHA assembleur d’images, toujours en jQuery :
Plus d’infos ici : www.keycaptcha.com
En janvier dernier, Facebook avait mis en place la méthode de Social Authentification ; identifier vos amis via un panneau de profils à des moments-clés de votre navigation, histoire de vérifier que vous n’êtes ni un robot ni un hacker.
La solution est d’être créatif, et en phase avec votre public. Si vous vous adressez à une cible senior, vous n’allez pas lui demander d’écarquiller les yeux pour recopier des mots. Idem pour une cible « layette », inutile de leur demander des combinaisons mathématiques.
Si vous choisissez un CAPTCHA à rédiger, pourquoi ne pas proposer de courts slogans ou des termes commerciaux surtout si vous vendez des produits ou services sur le site, c’est un excellent moyen de permettre aux internautes de mémoriser votre marque puisqu’ils utilisent leur clavier pour saisir les mots… Mais attention à ne pas en abuser et lasser votre audience.
Avantage : monétisable pour un bloggeur si vous passez par une régie spécialisée en Ad Blindness, comme CAPTCHME, un petit nouveau (et français !) sur le marché depuis août dernier. Le webmarketing est partout !
Vous pouvez aussi faire parler d’eux vos internautes, en transformant cette saisie en véritable champ de qualification, donnée du champ que vous récupérerez bien sûr, via le plain text du formulaire et dans votre base de données.
En résumé, mettez à cette « barrière » un trait de complicité, une pincée de simplicité, une cuillerée d’inventivité, et vos internautes passeront le cap du formulaire avec succès.
Expérience d’un internaute qui résume bien l’expérience contact :
» NB : les codes de sécurité sont très sympa, c’est un plaisir de les entrer !
Joy «
Bon CAPTCHA-day !
A propos de l'auteur
Blue Agency a rédigé 1 articles sur Neoweb Mag
11 ans d'expériences chez l'annonceur et en agences interactives. Très orientée webmarketing et ROI, Morgane aime jouer avec les Rubik's Cube modernes : les CMS Open Source.
Les captcha du style « 13 + 5″ sont totalement inutiles. On peut en venir à bout avec 2 lignes de codes.
Pour les drag & drop qui débloque la soumission, j’ai pas étudié la question, mais vu que ça se passe du côté client, c’est sans aucun doute facilement contournable par un robot.
Pour les captcha assembleurs d’image dans le genre puzzle, non seulement c’est chiant à faire
mais en plus ça me semble relativement simple à faire résoudre informatiquement par un programme.
L’idée de la reconnaissance d’image (on clique sur la maison) est sympa. Simple pour l’utilisateur, mais si la base de donnée comporte moins de 10 000 éléments, on peut en arriver à bout après une petite séance d’apprentissage. Mais la grosse faille de ce système c’est surtout qu’avec 5 images on à quand même 20% de chance que ça passe en répondant au hasard. Ce qui est énorme…
—
En faite je crois qu’il faut distingué deux types de captcha : Les captcha qui nous protège des bots génériques (c’est à dire que les robots est pas spécialement coder pour le site en question) et les captcha destiné à se protéger des attaques ciblés (on code le bot en fonction du site).
Dans le premier cas, il existe une solution vraiment très simple qui marche dans 99% des cas et totalement transparente pour l’utilisateur : Créer deux champs texte dans le formulaire mais les cachés. Pas avec un type=hidden, mais avec du css et de façon la plus subtile possible (même si un simple display:none fonctionne, on peut chercher à place un bloc blanc au dessus par exemple, ou mettre les dimensions à zero, ou avec un z-index très faible). Bref l’idée, c’est d’avoir deux champs que l’utilisateur normal ne voit pas, mais que le bot verra parce que la majorité des bots ne regarde pas la mise en page (donc si le champ est caché ou pas) mais juste si il y’a des champs ou pas. Et si il y’a des champs il les remplit avec des données « SPAM » Donc on va mettre deux champs, un complétement vide, et un avec une sorte de clé (soit une clé fixe, soit une clé variable comme la date du jour ou une connerie comme ça qui change). La plupart du temps le bot va remplacer les valeurs par son texte de spam et on pourra alors facilement le détecter en comparant les valeurs avec celle qui auraient dû être passés.
La deuxième utilisation des captcha c’est la protection contre les attaques ciblés (plutôt réservé au site moyen et gros) et là, il faut absolument quelque chose qu’un ordinateur ne peut pas résoudre ou même s’approcher d’un taux de réussite satisfaisant (25% ça peut être largement satisfaisant).
Bonjour,
je débute en PHP je suis entrain de faire un site, si je t’envoie mon formulaire pourrais-tu me le vérifier avec ton système.
Merci par avance.
Pas besoin d’avoir un Captcha super compliqué pour déjouer les bots. La très grande majorité de ceux-ci ne sont pas très intelligents.
De mon côté, j’utilise une technique qui s’appelle un « honeypot ». C’est ceci donc parle « Kewill Herman » dans le précédent commentaire. C’est facile à mettre en place et c’est invisible pour les utilisateurs : c’est le meilleur des deux mondes!
Moi j’utilise un mélange de calcul mathématique (multiple +, -, x et /) avec affichage mélangé en police, forme, orientation et couleur. Et pour l’instant aucun robot n’a réussi a passer
Bonjour à tous, merci pour vos commentaires « technicisants », que j’apprécie et découvre avec beaucoup d’attention. Le propos de cet article rédigé il y a un an n’était pas tant de sonder la complexité de défense de telle ou telle solution de Captcha face à une armada de guerriers spammeurs toujours plus vindicatifs, mais de mettre en valeur le potentiel « web marketing » c’est-à-dire levier relationnel dans ce cas précis, de cette petite fonctionnalité, devenue si familière mais la plupart du temps rébarbative. Lorsqu’on cherche bien et que l’on repousse les limites des fonctionnalités d’un site en cours de montage, on s’aperçoit qu’on peut potentiellement tirer profit des aspects qu’on considérait comme « faisant partie des murs ». Voilà quel était l’objet de cet article. Bien sûr, concernant la sécurisation des espaces d’édition en front-office, je ne saurais trop vous conseiller de vous tourner vers les récentes avancées en la matière… ou vos propres solutions « maison », inventives et créatives.
Lorsqu’on observe le nombre grandissant d’interfaces qui forcent l’authentification grâce à un compte de réseau social, on ne peut que se dire que finalement le problème de la sécurité, pour ce qui concerne cet aspect, est déporté, et que les (futurs) vrais propriétaires des communautés / acheteurs, ce sont Face… et consorts. Mais là c’est un autre sujet ! Peut-être un peu trop audacieux pour l’heure.
Bon développement,
Morgane
ps : s’il y a parmi vous des talents (passionnés) en html5/css3/php/cms open source, contactez-moi avec un mini-cv et quelques références. Merci