Magazine Ebusiness

[PrestaShop 1.7] Ajouter reCAPTCHA v2 pour éviter le spam

Publié le 27 octobre 2017 par Amerigeau @arnaudmerigeau

Perdre du temps, c'est perdre de l'argent ! Voilà pourquoi on va voir comment éviter de perdre du temps à traiter les spams avec PrestaShop.

Pour info, j'ai déjà publié un article pour installer reCAPTCHA sur PrestaShop 1.6 si vous êtes sur une version antérieure.

Constat

Par défaut PrestaShop se compose de 2 formulaires qui peuvent générer du spam, avec des contenus souvent alléchants (référence à l'illustration de l'article) :

  • formulaire d'inscription / connexion
  • formulaire de contact

On a donc 4 portes d'entrées possibles qui peuvent submerger votre boite mail et vous faire perdre un temps fou !

Comment ajouter reCAPTCHA v2 à PrestaShop 1.7 ?

Voyons voir dès à présent comment faire pour intégrer à PrestaShop 1.7 le module reCAPTCHA v2 en quelques étapes très simples.

Etape 1 : installer le module reCAPTCHA

Téléchargez et installez dans PrestaShop le module reCAPTCHA v2 en cliquant sur le lien suivant : télécharger le module reCAPTCHA v2 pour PrestaShop 1.7

Vous devez installer au préalable le module " contactform " présent par défaut dans PrestaShop.

Etape 2 : récupérer les clés Google reCAPTCHA

Rendez-vous à l'adresse suivante https://www.google.com/recaptcha/intro/index.html puis renseignez les différents champs prévus : libellé, version de reCAPTCHA et nom de domaine.

[PrestaShop 1.7] Ajouter reCAPTCHA v2 pour éviter le spam [PrestaShop 1.7] Ajouter reCAPTCHA v2 pour éviter le spam [PrestaShop 1.7] Ajouter reCAPTCHA v2 pour éviter le spam

Etape 3 : configure le module reCAPTCHA

Cette étape est très rapide car il vous suffit de copier-coller les clés du site et secrète dans la configuration du module reCAPTCHA dans PrestaShop. Les clés sont fournies par Google à l'étape précédente.

[PrestaShop 1.7] Ajouter reCAPTCHA v2 pour éviter le spam

Etape 4 : savourez le module reCAPTCHA

C'est terminé, il vous reste à savourer le plaisir d'une boutique PrestaShop libérée de tout spam. Profitez du temps dégagé pour améliorer vos ventes : optimiser la vitesse de PrestaShop !

Bonus : style du reCAPTCHA

Je trouve que l' intégration du module reCAPTCHA n'est pas parfaite dans PrestaShop 1.7 alors je vous donne le style à appliquer pour un rendu plus propre. Le code est à appliquer à la fin du fichier www/themes/votre-theme/assets/css/custom.css :

/*Style reCAPTCHA*/ .contact-form form .form-fields #captcha-box > div{float: right;} .contact-form form .form-footer{clear: both;padding-top: 1rem;} @media screen and (max-width: 767px){ #contact #left-column, #contact #content-wrapper{padding-left: 0!important;padding-right: 0!important;width: 100%;} /*Correction pour affichage correcte sur mobile*/ .contact-form form .form-fields #captcha-box{position: relative;min-height: 78px;} .contact-form form .form-fields #captcha-box > div{float: none;position: absolute;left: 50%;top: 0;transform: translate(-50%,0);} } @media screen and (max-width: 379px){ /*Correction pour affichage correcte sur mobile*/ .register-form form .form-group .g-recaptcha{position: relative;min-height: 78px;} .register-form form .form-group .g-recaptcha > div{float: none;position: absolute;left: 50%;top: 0;transform: translate(-50%,0);} }

Dans ce code, j'applique plusieurs modifications :

  • affichage à droite du bloc reCAPTACHA dans le formulaire de contact
  • affichage non tronqué du bloc reCAPTACHA sur mobile

Bilan : Captcha simple sous PrestaShop

On vient de voir comment installer un captcha gratuit sous PrestaShop 1.7, pas mal du tout ! Si vous êtes sur PrestaShop 1.6, vous pouvez lire cet article : Tuto gratuit : ajouter reCAPTCHA à PrestaShop

A bientôt 🙂

Si vous n'avez pas le temps ou les compétences pour appliquer ce tuto à votre boutique PrestaShop, je peux m'en charger !

Contactez-moi

Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

A propos de l’auteur


Amerigeau 112 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte