Google reCAPTCHA

You can install Google's reCAPTCHA system onto the forms on your website to stop robots/spam-bots submitting the form and filling your website with spam submissions.

You can read more about reCAPTCHA on Google's website at https://www.google.com/recaptcha/intro/index.html

The reCAPTCHA is simple for your visitors to use...

reCAPTCHA can be included on your

  • Contact Us form
  • Customer Registration form
  • Product Review form

Installing the extension

Select 'apps and extensions' from the left menu and then 'available extensions'. Find the 'Google reCAPTCHA' extension and click to activate it on your account.

Once the extension is activated you'll then need to add the relevant code to your website's files (described below). Adding the code will place reCAPTCHA on your website. To add the relevant code you'll need to use the page editor, alternatively you can click the 'request installation' button and we'll install the code for you (a small charge will be made for the installation, which is listed on the extension page).

For self-installation

You'll need to make sure that you install the code on each of the 3 forms on your website. If you don't install the code then the form will stop working once the reCAPTCHA extension is activated.

Contact Us form

1. Locate the contact.twig file (located in /views/other/contact.twig)

2. Add the code shown below before the closing </form> tag. Ideally this will be placed before the <button> code

{% if recaptcha %}
    <div class="g-recaptcha"></div>
{% endif %}

for example,

Please Note: You may want to insert some styling to increase the vertical space between the last field of the form and the reCAPTCHA.

Customer Registration form

3. Locate the account_form.twig file (located in /views/other/account_form.twig)

4. Add the code shown below before the closing </form> tag. Ideally this will be placed before the <button> code

{% if recaptcha %} 
    <div class="g-recaptcha"></div> 
{% endif %}

for example,

Please Note: You may want to insert some styling to increase the vertical space between the last field of the form and the reCAPTCHA.

Product Review form

5. Locate the product.twig file (located in /views/product pages/product.twig)

6. Add the code shown below before the closing </form> tag for the product reviews form. Ideally this will be placed before the <button> code

{% if review_recaptcha %}
    <div class="g-recaptcha"></div>
{% endif %}

for example,

Please Note: You may want to insert some styling to increase the vertical space between the last field of the form and the reCAPTCHA.

Product Q&A

7. If you're using the product Q&A extension you'll need to use the code shown below in order to display reCAPTCHA

{% if question_recaptcha %}
    <div class="g-recaptcha" data-sitekey="{{ question_recaptcha.key }}" data-stoken="{{ question_recaptcha.token }}"></div>
{% endif %}

Testing

It's important that you test each of the 3 forms you've added reCAPTCHA too, to ensure that they are working correctly.

(If you don't have the Product Reviews feature enabled on your account, you won't have access to this form).