Google Invisible reCAPTCHA

by Ben Jones

HTML

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<form action="?" method="post">
     Name: (required) <input id="field" name="field">
     <div id='recaptcha' class="g-recaptcha"
          data-sitekey="6LcAmBAUAAAAAFukLQIkOIICuBBxKEdn-Gu83mcH"
          data-callback="onSubmit"
          data-size="invisible"></div>
     <button id='submit'>submit</button>
   </form>
<script>onload();</script>

JavaScript

function onSubmit(token) {
    alert('Thanks ' + document.getElementById('field').value + '!');
  }

  function validate(event) {
    event.preventDefault();
    if (!document.getElementById('field').value) {
      alert("Please enter your name.");
    } else {
      grecaptcha.execute();
    }
  }

  function onload() {
    var element = document.getElementById('submit');
    element.onclick = validate;
  }