Dodanie captchy do formularza kontaktowego PrestaShop


Masz problem z niechcianymi mailami wysyłanymi przez Twój formularz kontaktowy? Chcesz sobie z tym poradzić w 4/5 krokach? Poniżej prezentujemy szybkie rozwiązanie.

Poniższy poradnik dotyczy sklepu opartego o wersję 1.7. Wdrożenie dla wersji 1.6. można zrobić w analogiczny sposób. Uwagi dodane są kursywą.

Przeczytaj również: zabezpieczenie formularza rejestracji PrestaShop przed botami

Uwaga: poradnik jest przeznaczony dla zaawansowanych użytkowników. Wszelkie zmiany wprowadzasz na własną odpowiedzialność!

Jeśli chcesz uniknąć tysięcy maili wysyłanych za pomocą Twojego formularza kontaktowego sprawdź jak można się przez tym zabezpieczyć poprzez zaimplementowanie Captchy w sklepie PrestaShop. Nasza propozycja to wprowadzenie darmowego reCaptcha od Google. Efekt końcowy można zobaczyć na poniższym zdjęciu:

 PrestaShop Captcha

Pierwszym etapem jest wygenerowanie pary kluczy (site key i secret key) dla reCaptchy. Do tego będzie potrzebne konto Google (użytkownicy poczty Gmail mają już takie konto). Aby wygenerować klucze odwiedzamy https://www.google.com/recaptcha/intro/index.html i naciskamy przycisk "get reCaptcha", następnie z listy wybieramy typ (reCAPTCHA v2) i uzupełniamy dane.

PrestaShop reCaptcha

Teraz wystarczy kliknąć przycisk register. Końcowym efektem powinno być uzyskanie dwóch kluczy, które będą potrzebne w dalszej części tego poradnika.

Presta Shop Captcha

Kolejnym krokiem jest modyfikacja pliku widoku formularza kontaktowego. W tym celu edytujemy plik:
themes/NAZWA_TWOJEGO_SZABLONU/modules/contactform/views/templates/widget/contactform.tpl.

Zaraz nad znacznikiem kończącym form-fields </section> dodajemy poniższy kod:

          <div class="row">
              <div class="col-xs-12 col-sm-12 offset-md-3 col-md-9">
                <div class="g-recaptcha" data-sitekey="6LclChYTAAAAAGBPp4Wml_BkLS7k8fZpcppuOlc_"></div>
              </div>
          </div>



Presta Shop reCaptcha

Wartość  data-sitekey w powyższym kodzie podmieniamy własnym kluczem pozyskanym ze strony Google (site key).

W przypadku PrestaShop 1.6. zmian należy dokonać w pliku formularza (contact-form.tpl) przed kodem buttona wysyłającego formularz.

W górnej części pliku contactform.tpl wklejamy poniższy kod, który odpowiada za doładowanie biblioteki reCaptcha:

{block name='head' append}
    <script src='https://www.google.com/recaptcha/api.js'></script>
{/block}



W przypadku PrestaShop 1.6. środkową linijkę można dodać do pliku header.tpl

Teraz kolej na dodanie klasy nadpisującej domyślne zachowanie formularza. W tym celu w katalogu głównym wyszukujemy katalog override/modules. Wewnątrz katalogu dopisujemy katalog contactform, a w nim plik contactform.php. W pliku dodajemy poniższy kod:

<?php

if (!defined('_PS_VERSION_'))
    exit;

class ContactformOverride extends Contactform {
   
}



Z nadpisywanej klasy kopiujemy metodę sendMessage (z bazowego pliku). Metodę należy nadpisać dodatkowym warunkiem:

elseif (!($gcaptcha = (Tools::getValue('g-recaptcha-response')))) {
            $this->context->controller->errors[] = $this->trans('Please use captcha', array(), 'Shop.Notifications.Error'); 

 

oraz poniższym kodem: (cały fragment na poniższym zrzucie)

            //captcha verification
            $googleVerificationUrl = 'https://www.google.com/recaptcha/api/siteverify';
            $googleSec = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
           
            $ch = curl_init();

            curl_setopt_array($ch, [
                CURLOPT_URL => $googleVerificationUrl,
                CURLOPT_POST => true,
                CURLOPT_POSTFIELDS => [
                    'secret' => $googleSec,
                    'response' => $gcaptcha,
                    'remoteip' => $_SERVER['REMOTE_ADDR']
                ],
                CURLOPT_RETURNTRANSFER => true
            ]);

            $output = curl_exec($ch);
            curl_close($ch);            
            
            $googleResponseObj = json_decode($output);
            if($googleResponseObj->success !== true)
            {
                $this->context->controller->errors[] = $this->trans('Captcha verification failed', array(), 'Shop.Notifications.Error'); 
            } 



PrestaShop google reCaptcha

Wartość zmiennej $googleSec podmieniamy własną wartością pozyskaną z Googla (secret key).

W przypadku PrestaShop 1.6. analogiczną zmianę należy wykonać dla pliku ContactController i metody postProcess.

Ostatnim krokiem jest wyczyszczenie plików cache i można już testować Captche w formularzu kontaktowym sklepu.

Dzięki zaimplementowaniu reCaptche w Twoim sklepie PrestaShop zminimalizujesz ryzyko ataku przez boty i unikniesz masowego mailingu, pośród którego możesz przeoczyć ważne zapytanie od Klienta lub zawiesić serwer sklepu.

W celu zapewnienia maksymalnej wygody użytkowników przy korzystaniu z witryny ta strona stosuje pliki cookies. Szczegóły w naszej Polityce prywatności. Kliknij " Zgadzam się", aby ta informacja nie wyświetlała się więcej