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

PrestaShop
  • Accueil
  • Blog
  • [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

recaptcha v2 prestashop
Le formulaire de contact de PrestaShop 1.7 est une porte ouverte aux spams !

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

recaptcha v2 prestashop
installer le module reCAPTCHA puis configurer-le

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.
recaptcha v2 prestashop
recaptcha v2 prestashop
recaptcha v2 prestashop
 

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.
recaptcha v2 prestashop
 

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 !

recaptcha v2 prestashop
Aperçu du module reCAPTCHA pour le formulaire de contact

recaptcha v2 prestashop
Aperçu du module reCAPTCHA pour le formulaire de création de compte

 

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

66 commentaires sur “[PrestaShop 1.7] Ajouter reCAPTCHA v2 pour éviter le spam

  1. Hello,
    Merci pour l’astuce, je dois avouer que chez mes clients j’ai pas souvent des tentatives de SPAM via le formulaire de contact Prestashop, mais si on a le problème reCaptcha c’est vraiment une méthode fiable pour bloquer les indésirables.
    Sinon ben c’est super, je vois que tu t’y mets aux vidéos YouTube 😉
    A bientôt !

    1. Salut Germain,
      J’ai eu le cas avec 3 clients qui étaient submergés et la solution a corrigé le problème de spam. C’est immédiat !
      Je suis la tendance pour la vidéo et puis pas mal de gens préfèrent aussi 😉
      @+

  2. 267/5000
    J’ai chargé le module eicaptcha-master.zip mais je ne peux pas l’installer dans Prestashop 1.7.2.4. Le module n’est pas reconnu comme module Prestashop valide.
    S’il vous plaît aider.
    Désolé pour les erreurs de langue. J’ai traduit le texte de NL en FR avec Google translate.

    1. Bonjour Benny,

      1. Une fois l’archive téléchargée et dézippée sur votre ordinateur, renommez le dossier du module par « eicaptcha » au lieu de « eicaptcha-master ».
      2. Ensuite, envoyez le dossier renommé sur votre serveur dans le dossier www/modules/

      3. Installez le module via l’admin de PrestaShop.

      Dîtes-moi si c’est bon, j’ai testé en local et ça fonctionne bien 🙂

  3. Bonjour,
    Je vois que mon module est utile et fait l’objet de tutoriels intéressants 🙂
    Concernant le fix css est-ce que vous pouvez le publier sur github ou est-ce que je peux l’intégrer dans le code de base du module ?
    Je pense que c’est un plus si le fonctionnement natif n’est pas optimum sur mobiles.
    Cordialement,
    Hervé

    1. Bonjour Hervé,
      En effet, ça me semblait évident de faire un tuto pour aider ceux qui ont des spams.
      Pour l’ajout, le mieux est de le poster directement sur Github.
      Merci !

  4. Bonjour,
    Je n’arrive pas à installer le module. J’ai suivi votre manip’ en le dézippant, renommant eicaptcha et en l’envoyant sur le serveur. Mais il n’apparait quand même pas dans la liste des modules
    Une astuce ?

  5. Merci beaucoup pour cet article qui m’a permis par la même occasion de découvrir l’excellent travail de Nenes25! J’ai pu installer la toute dernière version, il est bien présent, tout marche… sauf qu’il n’est apparemment pas obligatoire de cocher le captcha pour pouvoir envoyer un mail! Avez-vous une manip pour rendre le captcha obligatoire?

    1. Bonjour Ju,
      Avec plaisir aussi testé sur plusieurs clients et en local, le captcha est bien obligatoire une fois le tuto terminé.
      Avez-vous bien tout suivi ?

    2. Bonjour,
      J’ai exactement le même pb. Le module est bien installé (la version adéquate pour prestashop 1.7), et le captcha est bien visible dans le formulaire de contact ; mais je peux envoyer l’email sans avoir à cocher la case. J’utilise un theme qui n’est pas celui par défaut.
      Merci d’avance

  6. Bonjour,
    J’obtiens un message d’erreur après avoir installé le module :
    This module need composer to work, please go into module directory /xxxxxx/x/xxxxxxxxxxx/xxxxxx/xxxxxxxxxxxx/xx/modules/eicaptcha and run composer install or dowload and install latest release from https://github.com/nenes25/eicaptcha/releases.
    Je ne sais pas comment installer ce Composer sur Prestashop…
    Pouvez-vous m’aider ?
    Merci beaucoup d’avance à vous

    1. Bonjour Jérôme,
      Quelle est votre version de PrestaShop ?
      Quelle est la version du module utilisée ?
      Avec une installation classique comme indiqué dans l’article, aucun composer requis.
      Bonne journée 🙂

    2. Bonjour Jérôme,
      La solution à votre problème est dans le message d’erreur.
      Le lien tel qu’il est proposé dans cet article ( https://github.com/nenes25/eicaptcha/archive/master.zip ) n’est plus bon car des librairies nécessaires ne sont pas inclues sur le dépôt github
      Il faut télécharger la dernière version du module depuis la page des releases du module sur github.
      A date d’aujourd’hui le lien direct est le suivant : https://github.com/nenes25/eicaptcha/releases/download/2.0.1/eicaptcha.zip
      Cordialement,
      Hervé

  7. Bonjour Arnaud,
    Merci pour ce tutoriel et votre plugin (je reçois du spam de russie via le formulaire de contact)
    J’ai un soucis à l’installation de la version 2.02 (je suis en Prestashop 1.7.2.1) / le module refuse de s’installer sous prétexte que je n’ai pas le module contactform alors que si puisqu’il est installé par défaut.
    En supprimant le contrôle, votre module s’installe mais du coup ne fonctionne pas comme prévu.
    Affichage de recaptcha sur le formulaire de contact qui fonctionne très bien sauf que … je peux valider le formulaire même si le captcha n’est pas renseigné.
    Une idée pour orienter mes recherche ?
    Nicolas.

    1. Bonjour Nicolas,
      Vous devriez désinstaller tout, puis réinstaller contactform puis recaptcha.
      Si cependant cela ne bloquait toujours pas les spams, une autre piste : changer l’url de la page contact puis installer ce module : fail2ban.
      Non testé sur PrestaShop 1.7.

      1. Bonjour Arnaud,
        Merci pour votre retour.
        J’ai un doute sur contactform. Comme il est installé par défaut en 1.7, comment le désinstaller et le réinstaller autrement qu’en supprimant le répertoire et en le recopiant ? Une archive est-elle disponible ?
        Je le trouve dans le répertoire des modules mais également dans celui de mon thème.
        Nicolas.

        1. Bonjour Nicolas,
          Je vous conseille de voir dans l’archive de votre version si il y a le dossier du module contactform pour avoir une sauvegarde d’abord.
          Dans le dossier du thème, il s’agit de l’override donc pas besoin de le supprimer.
          Bonne journée 🙂

  8. Que faire lorsque à l’installation du module on a : L’action install est impossible pour le module eicaptcha. Ce module n’est pas compatible avec votre version de PrestaShop.
    Je suis sous PS 1.7.2.4.

    1. Bonjour Nickelou,
      Attention quand vous dézippez le module, le dossier doit alors s’appeler exactement « eicaptcha ».
      A bientôt 🙂

    2. Idem et pourtant j’ai bien renommé le fichier en « eicaptcha ». On est bloqué et ca spam fort en de Russie 🙂
      Il n’y à aucune autre solution pour mettre un quelconque captcha ?

  9. Bonjour,
    Merci pour ce tuto.
    Je suis en version 1.7 de prestashop. Tout a bien fonctionné… sauf que je ne voie pas le recapcha apparaître sur mon site.
    J’ai rentré les clés google, coché les cases pour le formulaire de contact, mais rien à faire…
    Comment puis-je faire?
    Merci

    1. Bonjour Emptas,
      Comme pour Audrey, difficile à dire. Vous avez peu être un conflit avec un autre module / override / script sur ce site web.
      Essayez d’afficher les erreurs également.

  10. Bonjour, merci pour ce tuto !
    L’installation sur la version 1.7.2.3 n’a pas posé de problème particulier. Néanmoins, je m’aperçois que le module reCaptcha figure sur la page ‘création de compte’ mais pas sur le formulaire de contact… Vous auriez une piste d’explication ?
    Merci par avance

  11. Bonjour,
    installé à l’instant sans vraiment de difficulté, merci pour cette aide précieuse !
    Pierre / Guitare Garage

  12. Bonjour,
    l’installation et le module fonctionne sur prestashop 1.7.3.0, par contre dans paramètre avancés du module lorsque je click sur vérifier si le module est bien installé il est indiqué :
    Errors
    contacform.php override does not exists.
    Quelle solution pour ne plus avoir d’erreur
    Merci

    1. Bonjour,
      Merci pour votre commentaire,
      Vous avez dans le dossier du module un fichier modules/eicaptcha/override/controllers/front/ContactController.php que vous pouvez déplacer dans /override/controllers/ et ça devrait être bon
      Pensez à supprimer le fichier de cache des classes class_index.php aussi
      A bientôt 🙂

      1. Bonjour,
        J’ai déplacé le fichier AuthController.php qui était dans Controller/front, pour le replacer dans Controller. Puis supprimer le dossier index.php qui était dans le même dossier Controller/front.
        Cela ne fonctionne pas…
        Que dois-je faire?
        Merci
        A bientôt

    2. Cool merci bien :).
      Ps: une mise a jour du module avec recpatcha invisible est elle prévue, car certain client pour cliquer sur des magasins, voitures …. c pas top 🙁

  13. Le fichier ContactController.php n’existe pas. j’ai fait plusieurs test avec plusieurs nouvelles installations (prestashop 1.7.3.1 et la version eicaptcha 2.0.4) et rien pas de fichier dans modules/eicaptcha/override/controllers/front/ et toujours l’erreur : Errors
    contacform.php override does not exists
    Une solution ou je peu trouver ce fichier
    Merci

    1. Bonjour Zyadya,
      Merci pour votre commentaire,
      Il y a bien un fichier dans le dossier /eicaptcha/override/controllers/front/ContactController.php
      Suivant votre configuration serveur, vous serez peu être obligé de le copier manuellement
      Bon courage 🙂

  14. Pour moi impossible d’utilisé l’archive du github fournie, l’installation ne veut pas ce faire.
    Auriez-vous un autre lien ou idée de pourquoi cela ne veut pas marcher ?

  15. Bonjour,
    Tout d’abord, merci beaucoup pour cet article !!!
    Je viens également de ramer un peu pour l’installation car même en renommant l’archive eicaptcha-master.zip en eicaptcha.zip et/ou en l’envoyant sur le serveur pour par l’upload du ZIP cela ne fonctionnait pas.
    Mais par contre L’URL donné par NENES25 https://github.com/nenes25/eicaptcha/releases/download/2.0.1/eicaptcha.zip fonctionne très bien pour moi à ce jour 🙂
    Et il n’y a à priori plus besoin de surcharger les styles CSS.

    1. Bonjour Mijsoot,
      Merci pour votre retour et pour les éclaircissement pour les autres.
      Bonne continuation 🙂

  16. Merci pour votre article, et merci à nenes25. On en apprend beaucoup en lisant aussi tous les commentaires.
    J’ai installé eicaptcha sur mon PS 1.7.4.2 et ma fois, ça fonctionne !
    A bientôt,
    Patrick

  17. Bonjour,
    Merci pour ce tuto de qualité, qui doit vous prendre du temps a réalisé.
    Serait il possible de modifier votre module pour avoir une reCaptcha sur la newsletter ?
    Car j’ai beaucoup de fausses adresses mail qui s’inscrive.
    Cela éviterait a de « vrais » potentiel clients de validé le mail vérification après inscription.
    Cordialement, Mathieu

    1. Bonjour Mathieu,
      Merci pour le retour, ça fait plaisit et ça encourage à continuer 😉
      Je me note de faire un tuto sur ce sujet pour la suite.
      A bientôt !

      1. Merci Arnaud,
        Ce module fonctionne parfaitement sous PS 1.7.4.2.
        Je rejoins les 2 derniers avis. C’est devenu tellement pénible ces tentatives de spam en passant par les inscriptions à la newsletter, que j’ai du retirer cette option pour le moment. Sans reCAPTCHA, je le remettrai pas.
        Cordialement,
        Patrick

  18. Bonjour,
    Super, ça fonctionne correctement avec le lien de NENES25
    Par contre je voulais savoir comment le mettre en place aussi pour le champ d’inscription à la newsletter … ou alors utiliser le recaptcha invisible ?
    Merci par avance pour votre aide
    Julien

    1. Bonjour Julien,
      Comme indiqué à Mathieu, je vais voir pour rédiger ce tuto à l’avenir.
      Merci pour le retour et à bientôt 🙂

  19. Bonjour Arnaud,
    Tout fonctionne bien pour les formulaires de contact et création de compte.
    +1 pour le Recaptcha sur l’inscription à la newsletter !
    (c’est pas pour mettre la pression hein… 😉 )
    Merci pour les diffrents tutos qui nous sont bien utiles.

  20. Je viens de subir une attaque de Ruskoffs et grâce à ce module, cela semble réglé maintenant, mais je vais surveiller. Mille mercis… et joyeux Noël !
    J’ai eu un petit souci d’installation : j’avais bien le module contacform installé et paramétré, mais introuvable dans la liste du panneau d’administration et donc le module eicaptcha ne voulait pas s’installer. J’ai du forcer une fausse réinstallation du module contacform (avec renommages successifs) et le problème a été réglé ainsi. Il y avait sans doute plus propre, mais je ne connaissais pas la manip. Existe-t’il une routine ou manipulation pour forcer la mise à jour de l’affichage dans le panneau d’administration des modules qui n’apparaissent pas bien qu’ils soient installés ?

    1. Bonjour Denis,
      C’est là un autre problème que je n’ai pas reproduis jusqu’à présent donc pas de solution
      Dans l’idéal il faut désinstaller et réinstaller le module depuis l’admin.
      Bon courage 🙂

    2. Bon alors voilà, je viens faire le bilan de la mise en place du module. Et bien, après 3 semaines d’utilisation, c’est impeccable, plus aucune attaque. Donc je tiens à remercier Arnaud pour son efficacité et sa réponse en pleine période de Noël et pour cela, j’offre une remise de 10 %
      sur tous les couteaux de poche de mon site à Arnaud et tous ses lecteurs (remise valable 1 fois par client, jusqu’au 15 avril 2019, hors frais de livraison, pour toute commande à partir de 25 €uros). Il suffit de renseigner le code promo Z63N91HE dans la commande sur http://www.sauvagnat.shop. La remise s’appliquera lors de la confirmation du panier.
      Encore mille merci et très bonne année à tous…

  21. Bonjour,
    Avant tout, vous remercier pour vos tutos sur Prestashop qui me sont d’une aide précieuse.
    A propos de l’install de recaptcha-v2, j’ai le même souci que ZYADYA, à savoir le message d’erreur suivant :
    contacform.php override does not exists
    no class_index.php found
    Le captcha s’affiche bien dans le formulaire de contact et l’envoi se passe correctement mais pas de réception de mail !
    J’ai bien supprimé le fichier de cache : www/app/cache/prod/class_index.php
    Mais, par contre, le fichier ContactController.php n’est pas présent dans modules/eicaptcha/override/controllers/front/
    (le dossier « front » contient : un fichier index.php et modules/eicaptcha/override/controllers/front/AuthController.php)
    Merci d’avance si vous avez la solution !
    Cordialement
    Yves

  22. Bonjour,
    A la date d’aujourd’hui, le seul module de captcha que me propose Prestashop (1.7) coûte 30€…
    Je suis dégoûtée !

  23. Bonjour Arnaud et encore merci pour ce tuto 🙂
    Le zip donné le lien ne marche pas pour moi, meme si je mets le vrai nom du module, par contre j’ai pris la dernier version pour prestashop 1.7 sur github et tout s’est bien installé. J’ai tout configuré comme il faut, mais le pb, le captcha s’affiche sur la page de création de compte mais pas sur la page de contact…=/
    En regardant dans l’onglet « Positions » de le back-office, je me rends compte que le eicaptcha n’a qu’un seul Hook Display => displayCustomerAccountForm , et n’en a aucun pour la page contact. Je pense que l’erreur vient de là. Je ne vois pas d’autres hook display ou afficher ce module dans le choix =/
    Dans mon contactform.tpl, je vois la forme que ca pourrait avoir (ici le RGPD):
    {if isset($id_module)}
    {hook h=’displayGDPRConsent’ id_module=$id_module}
    {/if}
    des idées pour faire apparaitre ce module dans la page contact ? je suis sur 1.7.5.2
    Merci et bon weekend
    Steve

    1. Bonjour Steve,
      De tête le module se greffe via du jQuery sur le formulaire via une class ou un id.
      Cela dépend de votre thème donc, bon courage 😉

  24. Bonjour,
    après avoir installé tant bien que mal ce module sur prestashop 1.7.4.2, je mets à jour en 1.7.5.2 et rebelote : « contacform.php override does not exists » Quelle plaie!
    Malheureusement j’ai oublié de noter comment j’avais résolu le problème sur l’ancienne version… Après avoir recherché pendant 2h sur GIT et dans les commentaires… je vous sollicite, ça serait bien d’avoir une liste exhaustive de ce qu’il faut checker pour que tout le monde en profite.
    Fichier bien présent override/modules/contactform/contactform.php
    Suppression de var/cache/prod/class_index.php
    Suppression de var/cache/dev/class_index.php
    Doit-on vérifier les droits de certains dossiers?
    Utilisant un thème classic-child, doit-on ajouter contactform.tpl dans le thème classic-child?
    Merci néanmoins pour le module gratuit… Une petite Mise à jour ne serait pas de refus.

    1. Bonjour,
      Pour les droits, tout dépend de la configuration serveur.
      Si vous avez un thème enfant, il faut placer le fichier dans le dossier du thème enfant.
      A bientôt !

  25. Bonjour, tout est configuré comme il faut, mais le captcha s’affiche seulement sur la page de création de compte mais pas sur la formulaire de contact… version prestashop 1.7.6.1… une idée ? Merci

Laisser un commentaire

Consultez les autres articles