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 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.
1 | <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:
1 | <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script> |
Adding the container div tag to show reCaptcha
1 | <div id="re-captcha"></div> |
Then adding the bellow javascript code before the closing </body> tag:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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.
My doesn’t work. How does your code to your contact form looks like with id’s and so on?
What’s your site? I want to review it.
As Trump says, “Sounds good, doesnt work…”
Your Demo does not submit the contact form. It redirects to challenge#contact_form page
This is an anti-spam from Shopify.
Can you please tell me. How can I fix this issue? I am facing the same issue with my Shopify site. Thanks.
This is happening for me as well. Got everything else working but it goes to challenge#contact_form after submitting. Did either of you get this bit working?
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).
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?
Please check ID of submit button. Do you show your URL. I want to check it.
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!!
Actually, it is working on my site. Thanks for this little hack!
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 🙁
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;
}
}
Hello Huynh, The submit button still disable, after the recaptcha valitation. What can i do?
Thank you
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.
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
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.
Thanks mate! works perfect….
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?
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>
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?
This is a Shopify anti-spam measure, which you will likely encounter if testing the form more than once. Did some research and there was a writeup on this. https://help.outofthesandbox.com/hc/en-us/articles/115006912267-Why-do-I-see-a-please-complete-the-challenge-page-when-I-submit-a-newsletter-signup-form-
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.
This works, best tutorial available. Thank you.
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
This is the first time I found advice here. Bottom line: IT WORKED ON MY FIRST ATTEMPT!
I could have modified the “head” section as instructed but tried to make changes on only one template. All changes were made in either Template or Section code and worked fine. The instructions should be modified slightly to point the user to these areas; not just a Contact form but also the Customer Registration form. The button ID needs to be added as well, otherwise all worked as advertised. THANK YOU.
Its working but cant stop spam email, in my account its showing error like :We detected that your site is not verifying reCAPTCHA solutions. This is required for the proper use of reCAPTCHA on your site. Please see our developer site for more information.
Please help me