Tuto gratuit : ajouter reCAPTCHA à PrestaShop

Vous avez une boutique sous PrestaShop ? Vous avez donc sûrement déjà reçu des spams et on sait tous combien c’est anti-productif et désagréable. Voyons comment s’en débarrasser…

Tu reçois du spam sur PrestaShop ? T’es loin d’être seule…

Entre les faux messages de contact, les spams russes qui s’invitent dans tes formulaires, et les « demandes de partenariat douteuses », je parie que tu perds un temps fou à trier ce qui est vraiment important.

Et au-delà du temps que ça te bouffe, c’est aussi :

• Stressant (tu ne sais plus ce qui est légitime ou non)

• Dangereux (certains spams contiennent des liens malveillants)

• Et franchement anti-pro, surtout si une cliente reçoit un accusé de réception automatique après un message envoyé par un bot.

Pourquoi c’est arrivé (et pourquoi ça va empirer si tu ne réagis pas)

Tu vois, dès que tu as un formulaire public sur ton site, c’est comme si tu ouvrais la porte à tout le monde… y compris aux robots. Et crois-moi, ils n’ont rien à voir avec les clients adorables qui te posent des questions sur tes accessoires cheveux mariage.

Les spams ciblent :

• Le formulaire de contact

• Les zones d’inscription à la newsletter

• Les comptes clients

Et ça, ça touche toutes les versions de PrestaShop : 1.6, 1.7, 8, 9… Peu importe.

Petit détour utile : c’est quoi exactement un reCAPTCHA ?

Un captcha, c’est un petit test pour prouver que tu es bien humaine et pas un robot.
Un reCAPTCHA, c’est la version moderne, créée par Google.

Tu l’as sûrement déjà croisé :
☐ Je ne suis pas un robot
…ou les images de feux rouges à cliquer, tu vois ?

Il y a plusieurs versions :

• reCAPTCHA v2 : le plus courant, avec la case à cocher

• Invisible reCAPTCHA : aucun clic, détection automatique

• reCAPTCHA v3 : fonctionne avec un score, totalement invisible pour l’utilisateur

Ici, on va partir sur la v2, parce qu’elle est simple à mettre en place, visible pour le client (rassurant), et surtout gratuite.

Ce que tu trouves sur Google quand tu cherches « ajouter reCAPTCHA à PrestaShop »

Tu vas tomber sur :

• Des forums techniques pas toujours à jour

• Des modules payants pas super clairs

• Des tutos mal expliqués, sans captures, et pas forcément adaptés à ta version

C’est pour ça que j’ai voulu faire un tuto clair, pas à pas, gratuit, que tu peux suivre même si t’es pas développeuse.

Et si tu veux creuser le sujet de la sécurité sur PrestaShop, tu peux aussi aller lire ça :
Comment sécuriser votre boutique PrestaShop
Ajouter reCAPTCHA à PrestaShop 1.7

Comment intégrer un captcha à PrestaShop ?

Voici exactement ce que tu dois faire (tuto complet).

Avant tout, un petit rappel sur deux notions :

• spam : il s’agit des courriels indésirables.
• captcha : il s’agit d’un test / questionnaire visant à prouver que le répondant n’est pas un ordinateur.

Penchons-nous à présent sur l‘intégration sous PrestaShop d’un captcha et plus précisément du reCAPTCHA de Google.

Étape 1 – Créer ton compte Google reCAPTCHA

Paramétrer votre compte à Google reCAPTCHA à https://www.google.com/recaptcha
Libellé : nom indicatif pour le reCAPTCHA
Domaines : indiquez votre nom de domaine sous la forme « arnaud-merigeau.fr » et « www.arnaud-merigeau.fr »
Vous aurez ainsi les clés fournies par Google ; ne fermez pas la page.

Étapes :

1. Va sur https://www.google.com/recaptcha

2. Clique sur « Admin Console »

3. Donne un nom à ton projet (juste pour toi, exemple : Bohomane)

4. Choisis la version : reCAPTCHA v2 > case à cocher

5. Indique ton nom de domaine (ex. bohomane.com et www.bohomane.com)

6. Accepte les conditions d’utilisation

7. Clique sur envoyer

Tu obtiens deux clés :

• clé publique

• clé secrète

Laisse cette page ouverte, tu vas en avoir besoin tout à l’heure.

Étape 2 – Installer le module captcha PrestaShop

Télécharger le module PrestaShop captcha et installer le module de manière classique : module PrestaShop captcha.

Tu peux aussi acheter ce module Recaptcha plus complet mais payant.

Étapes :

1. Télécharge un module gratuit compatible (ex : « Google reCAPTCHA v2 » pour PrestaShop)

2. Va dans ton back office > Modules > Gestion des modules

3. Clique sur « Ajouter un module », puis charge le fichier ZIP

4. Installe-le comme n’importe quel module

Étape 3 – Configurer le module avec les clés Google

Configurer le module PrestaShop captcha dans le back office et coller les clés publique et secrète fournies par Google reCAPTCHA.

Étapes :

• Une fois installé, clique sur « Configurer »

• Copie-colle ta clé publique dans le champ dédié

• Copie-colle ta clé secrète dans l’autre champ

• Choisis où tu veux afficher le reCAPTCHA (formulaire de contact, création de compte, etc.)

• Enregistre

Étape 4 – Modifier ton thème si nécessaire

Dans certains cas (version 1.6 notamment), tu dois modifier ton fichier contact-form.tpl.

1. Connecte-toi en FTP

2. Va dans :
   www/themes/ton-theme/contact-form.tpl

3. Fais une copie de sécurité du fichier

4. Ouvre le fichier et repère l’emplacement du formulaire

5. Colle le code du reCAPTCHA juste avant le bouton d’envoi
   (remplace "YOUR_PUBLIC_KEY" par ta clé)

<div class="g-recaptcha" data-sitekey="YOUR_PUBLIC_KEY"></div>
<script src="https://www.google.com/recaptcha/api.js"></script>

Étape 5 – Tester le résultat

Étapes :

• Rafraîchis ta page de contact

• Vérifie que la case reCAPTCHA s’affiche bien

• Fais un test d’envoi : si tu ne coches pas la case, le message ne doit pas partir

• Si tu vois une erreur : vide ton cache, re-vérifie les clés

Ouvrir le fichier www/themes/mon-theme/contact-form.tpl et chercher le code suivant (ligne 148 pour PrestaShop 1.6.1.6) :

<div class="submit">
<button type="submit" name="submitMessage" id="submitMessage" class="button btn btn-default button-medium"><span>{l s='Send'}<i class="icon-chevron-right right"></i></span></button>
</div>

Coller juste avant le code suivant en remplaçant « YOUR_PUBLIC_KEY » par votre clé publique fournie par Google reCAPTCHA :

{if $captcha}
<script src='https://www.google.com/recaptcha/api.js'></script>
<div class="g-recaptcha" data-sitekey="YOUR_PUBLIC_KEY"></div>
{/if}

Enregistrer le fichier et renvoyer sur le serveur via votre client FTP si votre site est en ligne.

Etape 6 – Résultat

Rafraichir la page contact et admirer le résultat 😀

Et si tu veux aller plus loin ?

Tu peux aussi ajouter un captcha :

• sur le formulaire de création de compte client
• sur la page « mot de passe oublié »
• sur tout autre formulaire personnalisé

Regarde aussi si ton module captcha gère ces zones, ou si tu dois faire d’autres modifs dans les fichiers .tpl.

Bonus pour ceux qui sont sous WordPress et qui ont besoin d’un captcha

Le problème reste entier pour les propriétaire des sites sous WordPress.

Voici donc une liste non exhaustive de plugins pour intégrer un captcha sous WordPress :

• Contact Form 7 Simple Recaptcha : à utiliser avec le connu plugin Contact Form 7.
• Captcha Bank : puissant plugin avec configuration aisée pour une protection maximale.
• Confident CAPTCHA : plugin basé sur la reconnaissance d’images, simple et efficace.
• SweetCaptcha : protège vos formulaires, commentaires et autres zones de saisie laissées via des énigmes visuelles très simples.
• FunCaptcha : plugin affichant des lettres entremêlées ou des jeux visuels, le tout en anglais.

Conclusion – Résumé rapide du tuto

Tu vois, pas besoin d’être développeuse pour sécuriser ta boutique PrestaShop contre les spams. Il suffit :

1. D’un compte Google reCAPTCHA

2. D’un module gratuit

3. D’un peu de méthode

Et si tu veux que tes formulaires fassent le tri entre clients et robots, ce tuto est exactement ce qu’il te fallait.