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.


The first, you must register your site (your domain) with reCaptcha. It’s free. You can go to 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.


You may also like...

16 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:


    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:

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

    • 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. Hello Huynh, The submit button still disable, after the recaptcha valitation. What can i do?

    Thank you

  10. Eugene says:

    on the submit button, you will need to add id=”contactFormSubmit”, mine is working fine at

    make sure your button syntax is like this

Leave a Reply

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