Install Google Recaptcha v3 on the contact form prestashop 1.7.x.
So, let’s get started. To begin with, let’s take the necessary parameters of the captcha. You must have a Google account. Go to the https://www.google.com/recaptcha/intro/v3.html and click Admin console:
Fill in the domain information. Copy the Site Key and Secret Key. You will only need these two parameters:
For the convenience of implementing the functionality, we will use the contactform module, which comes in the basic version of prestashop:
This module processes requests from the contact form using the widget already installed.
So, find themesclassicmodulescontactformviewstemplateswidgetcontactform.tpl module template, which displays the contact form of the standard theme for the front office.
According to the instructions for installing the captcha, you need to insert the following lines into the template:
|
1 2 3 4 5 6 7 8 |
<script src="https://www.google.com/recaptcha/api.js?render=_reCAPTCHA_site_key"></script> <script> grecaptcha.ready(function() { grecaptcha.execute('_reCAPTCHA_site_key_', {action: 'homepage'}).then(function(token) { ... }); }); </script> |
Insert them at the very beginning of the contactform.tpl file, before the section tag and slightly change, substituting the data (Site Key), which was obtained from the captcha settings. We will also specify action and input to transfer the token. The result is the following code:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{literal} <script src="https://www.google.com/recaptcha/api.js?render=testAACl-xWghm2xyTXDY7hMGo6"></script> <script> grecaptcha.ready(function() { grecaptcha.execute('testAANCl-xWghm2xsYWlyyTXDY7hMGo6', {action: 'contactpage'}).then(function(token) { document.getElementById('g-recaptcha-token').value=token; }); }); </script> {/literal} |
To pass the token, let’s write input in the body of the form (after line 139):
|
1 |
<input id="g-recaptcha-token" name="g-recaptcha-token" type="hidden" /> |
So, the form is ready, the server processing remains. The request will be processed through modules/contactform/contactform.php. Let’s find the sendMessage function in it and change it by inserting the following code at the very beginning of the function:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
captcha changes $g_secret_key = 'testAAAAOrelMxLZqzlewEE5jg1WMlLb'; $g_recaptcha_token = Tools::getValue('g-recaptcha-token'); $g_response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$g_secret_key."&response={$g_recaptcha_token}"); $g_response_arr = json_decode($g_response); if ($g_response_arr->success != true || $g_response_arr->action != 'contactpage' || $g_response_arr->score <= 0.5) { $this->context->controller->errors[] = $this->trans( 'Captcha is not correct.', [], 'Shop.Notifications.Error' ); return; } #captcha changes |
Such code, which receives the token value from the submission form, sends it to the Google server for verification. After receiving a response from the server, an incorrect captcha message is displayed and the function processing is interrupted:
Or continues in case of successful result:
Archive, with two files can be downloaded here. The contactform module version used = 4.1.1: