Adding reCaptcha for the forms in Shopify store

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.

DEMO

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.

Step 2: Adding reCaptcha into the form

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

Adding the container div tag to show reCaptcha

Then adding the bellow javascript code before the closing </body> tag:

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.

DEMO

You may also like...

26 Responses

  1. Peter says:

    My doesn’t work. How does your code to your contact form looks like with id’s and so on?

  2. Martin says:

    As Trump says, “Sounds good, doesnt work…”

  3. bipin karmacharya says:

    Your Demo does not submit the contact form. It redirects to challenge#contact_form page

  4. Jerrad says:

    This is basically useless. All it does is disable the submit button with CSS, which does nothing to protect against bots, or anyone that knows how to use their browser’s dev tools (which they can use to re-enable the button).

  5. HoS says:

    It is unfortunately NOT working. The submit button gets disabled, BUT when the recaptcha is triggered successfully then the submit button does NOT submit anything anymore. This is really useless. What’s wrong here?

  6. HoS says:

    Hi Adam, This is unfortunately not working at all!
    The submit button gets enable after the recaptcha has been activated successfully BUT NO action is taken, nothing gets send! So that’s NO solution!!

  7. Raphael says:

    Actually, it is working on my site. Thanks for this little hack!

  8. Kenneth says:

    Hi

    Works with me but make sure the ID of the button is right!

    However, I hate that the width of the captcha is wider than the rest of the fields in the VENTURE contact form.

    See here: https://i.imgur.com/9OdV6gs.png

    I guess you can’t change that as it comes from an iframe 🙁

    • Huynh Mai Anh Kiet says:

      You can try with the below CSS code to make responsive
      @media screen and (max-height: 575px){
      #re-captcha{transform: scale(0.77);
      -webkit-transform: scale(0.77);
      transform-origin: 0 0;
      -webkit-transform-origin: 0 0;
      }
      }

  9. felipe Salazar says:

    Hello Huynh, The submit button still disable, after the recaptcha valitation. What can i do?

    Thank you

    • Huynh Mai Anh Kiet says:

      Please make sure the ID of the button is right! I just checked your site. I think you must add ID contactFormSubmit for the button.

  10. Eugene says:

    on the submit button, you will need to add id=”contactFormSubmit”, mine is working fine at https://mastertoolsupply.com

    make sure your button syntax is like this

    • Eugene says:

      When I followed the instruction here, I still receive spams from online users. So I moved the form content outside of the form and hide it using css, and remove the form action url and fill the content via javascript. Once the captcha is validated, I added back the action url. It has stopped the spam for few days so far.

  11. Ilker says:

    Thanks mate! works perfect….

  12. Susan says:

    My site shows the send button saying “Send Disabled” on it. Underneath that, the Captcha button shows. I don’t want the send button to show until after the customer checks the Captcha box. How do I do this?

    • Kiet Huynh says:

      You can make your button hidden by property css: display:none and after that using the below code:
      <script>
      var actCallback = function (response) {$('#contactFormSubmit').show();$('#re-captcha').remove();};
      var expCallback = function() {$('#contactFormSubmit').hide();};
      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>

  13. S P says:

    Thanks man, this seems good. I can almost get this working, but when I click submit after doing the captcha, it just goes to a 404, going to my site ‘/challenge#ContactForm’. Am I missing something?

  14. Iso says:

    Hello,

    Where can I find the first step?

    ***Step 1: Disable submit button
    Disabled the submit button of the form by add disabled attribute.***

    I cannot find it anywere.

  15. SMMILE says:

    This works, best tutorial available. Thank you.

  16. Justin English says:

    Will this prevent a bot from locally changing the “submit” button and removing the disabled attribute? If all we’re doing is adding that disabled attribute to prevent the form being submitted, it seems that someone could easily write a script to remove that attribute and submit the form while bypassing the Captcha challenge

Leave a Reply

Your email address will not be published. Required fields are marked *