JSFiddle - React, Tailwind, and code Playground

by Kabir Hossain

HTML

<form id="register-account-form" action="?" method="POST">
          <div class="form-group">
            <label for="username">Desired Username:</label>
            <input type="text" class="form-control" id="username" required>
          </div>
          <div class="form-group">
            <label for="domainname">Domain (you can add a custom one later):</label>
            <select class="form-control">
              <option value="maimail.co">
                maimail.co
              </option>
            </select>
          </div>
          <div class="form-group">
            <label for="password">Password:</label>
            <input type="password" class="form-control" id="password" required>
          </div>
          <div class="form-group">
            <label for="recoveryemail">Recovery Email:</label>
            <input type="email" class="form-control" id="recoveryemail" required>
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-primary" class="form-control"  id="submitButton">Submit</button>
            <br /><br /><i>By submitting this form you agree to our <a href="tos.html">terms of service</a></i>
          </div>
        </form>
         <div class="g-recaptcha"
              data-sitekey=""
              data-callback="onSubmit"
              data-size="invisible">
        </div>

JavaScript

$(document).ready(function() {
    $('#register-account-form').submit(function(e) {
        console.log('%cForm Validated', 'color:green');
        grecaptcha.execute(); // invoke the reCAPTCHA check.
        e.preventDefault();
    });

    onSubmit = function(token) {
    		console.log("New token: %c"+token, "color:green;");
    }

	 var data = { sitekey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI', delay: 3 }; // Fake data and delay just for testing
   $.getJSON("/echo/jsonp/", data, function(json) {
   		console.log('%cAPI key received.', 'color:blue;');
      console.log(JSON.stringify(json, undefined, 2));
      $('div.g-recaptcha').attr('data-sitekey', json['sitekey']);
      console.log('%cAttribute data-sitekey set.', 'color:blue');
  		$.getScript('https://www.google.com/recaptcha/api.js');
  });
});