How to add google recaptcha on a custom form

[Antonio84]

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

How to do it?

[dotboxmedia]

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]

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

[savita_nagdev]

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

[Hamilton_Center]

Have you figured it out yet?

[Antonio84]

You can use shopify forms.