You are receiving a hefty amount of spam emails from the contact form on you contact page. Don’t worry! This article will guide you set up reCaptcha from Google to anti-spam for the forms on Shopify stores.

The first, you must register your site (your domain) with reCaptcha. It’s free. You can go to https://www.google.com/recaptcha/ to do that. After register you can retrieve the site key. And now we will start to set up.


Step 1: Disable submit button


Disabled the submit button of the form by add disabled attribute. 


<input type="submit" id="contactFormSubmit" value="Send" class="btn" disabled />



Step 2: Adding reCaptcha into the form

Adding bellow code before the closing  </head> tag: 


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

Adding the container div tag to show reCaptcha 


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

Then 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>

And now the recaptcha will working. If the user don’t confirm “ I’m not a robot“, the submit button is still disable and the form can’t submit to send. Untill the user confirm, they are not the robot and the submit button will be enable.