How to add google recaptcha on a custom form

Antonio84
Shopify Partner
45 1 2

Hello, I would like to use google recaptcha on my custom form on a custom page.

How to do it?

Replies 3 (3)

dotboxmedia
Shopify Partner
2 0 0

This is how to do it (assuming you know how to get the key).  Add this script to the bottom of the liquid page of where you want to put your code.  Change the xxx-site-key code to your own.


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

<div id="re-captcha"></div>
<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' : "site-key-codexxx", // Sitekey, Retrieving from reCaptcha
'theme': "light",
'callback' : actCallback,
'expired-callback': expCallback,
});
}
</script>

 

Feddrow1
Shopify Partner
4 0 1

the code is worked but when submit the form it's show 404 error how to solve the issue 

savita_nagdev
Shopify Partner
14 0 0

@Feddrow1  Did you get the solution for 404 as I am also facing the same issue after implementing the code.