add google captcha to enable and disable a form button

This will check if the google checkbox is checked and then enable or disable the form button depending on the outcome.

This is just a basic version of this check, you should also check that the capture matches using server side code as well. As the button element could be enabled manually or bypassed by a script. 

Demo

JS

function recaptchaCallback() {
  document.getElementById("subscribeButton").disabled = false;
}

HTML

<p>
  you will need to replace this with your own sitekey from here: https://www.google.com/recaptcha/
</p>
<div class="g-recaptcha" data-sitekey="6Lfrqf8SAAAAAOdvLdNXgl4_3_RV-gBRrsl4RmhV" data-callback="recaptchaCallback">&nbsp;</div>

<p>
add this to your scripts
</p>
<script src="https://www.google.com/recaptcha/api.js"></script>

<p>
button should look like this
</p>
<input type="submit" value="subscribe" class="footer-email-button" id="subscribeButton" disabled="disabled">

Working Result

you will need to replace this with your own sitekey from here: https://www.google.com/recaptcha/

 

add this to your scripts

button should look like this

Page Views

This page has been viewed 71 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹