How to add reCaptcha into the forms on Shopify stores?

ByAdam

How to add reCaptcha into the forms on Shopify stores?

Google reCAPTCHA is an effective security solution that protects your Shopify website forms from unwanted form submissions such as spam comments or account registrations from bots. In this tutorial, I will explain how to install Google reCaptcha for the forms on your Shopify store.

But before going into steps, make sure that you have registered your site (your domain) with reCaptcha. If you haven’t, go to https://www.google.com/recaptcha/ to do that, for free. You will get the site key after registering. And now it’s time for setting up.

    1. Disable “submit” button
      Enter the code below to disable “submit” button:

      <input type="submit" id="contactFormSubmit" value="Send" class="btn" disabled />
    2. Adding reCaptcha into the form
      To add reCaptcha into the form, first, enter this code before the closing </head> tag:

      <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

      Next, add the container div tag to show reCaptcha:

      <div id="re-captcha"></div>

      After that, adding the bellow javascript code before the closing </body> tag:

      <script>
        var actCallback = function (response) {
          $('#contactFormSubmit').prop("disabled", false);
          $('#re-captcha').remove();
        };
        var expCallback = function() {
          $('#contactFormSubmit').prop("disabled", true);
        };
       
        var onloadCallback = function () {
          var widget = grecaptcha.render(document.getElementById("re-captcha"), {
            'sitekey' : "123456789", // Sitekey, Retrieving from reCaptcha
            'theme': "light",
            'callback' : actCallback,
            'expired-callback': expCallback,
          });
        }
      </script>
      

You’re done! Now Google reCaptcha is ready to work on your Shopify website forms.
Note: The “submit” button is enabled only after the user confirms “I’m not a robot”. Otherwise, it is still disabled and the form can’t be sent.

Hope that you will find it easy to set up reCaptcha for the forms on your Shopify Store with our guidelines. Thanks for reading!

About the author

Adam administrator

2 Comments so far

Philippa ClarkePosted on4:45 am - May 8, 2019

Thank you for this – but I cant find where to disable the submit button to start with? I have registered with re captcha and got the keys etc – just cant find where to start – I am in edit codes

    AdamPosted on10:49 am - May 10, 2019

    You need to find the exact form you want to place Google reCaptcha. You need to find the exact form you want to place Google reCaptcha. Then you replace the code of the Submit button with the code:
    Regards,

Leave a Reply