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

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.

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.

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