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

9 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!!

Leave a Reply

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