Google ReCaptcha

Published about 7 years ago

Installing

This layout is formatted in slim, which is a rails templating engine. To install google's recaptcha, after registering your site, and getting your api keys, simply add these following lines in your code where you need it in your views.

.g-recaptcha data-sitekey="your-site-key" data-callback="myCallback"

script src="https://www.google.com/recaptcha/api.js"

javascript:
  var myCallback = function(response) {
    $(".submit").prop('disabled', false);
  };

  $(document).ready(function(){
    $("form").submit(function(e){
      if (grecaptcha.getResponse().length == 0) {
        e.preventDefault();
        alert("Please refresh the page and try again");
      }
    });

ReCaptcha FAQ

See the most common questions here.

More advanced configurations can be found here.

Forcing Stricter Security

If you are having bot issues still with your recaptcha, you can revamp the security it uses by going to your gmail account where you have it registered, and slide the security preference more to the right.

alt text

Adding Multiple On One Page

Assign each recaptcha div an id, in the case below it would be RecaptchaField1 and RecaptchaField2. Then add an onload callback that will initialize each of those id's with a recaptcha. You can still give each individual div a data-callback and have it do its own thing even with several on one page.

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

javascript:
    var CaptchaCallback = function() {
        grecaptcha.render('RecaptchaField1', {'sitekey' : 'your_site_key'});
        grecaptcha.render('RecaptchaField2', {'sitekey' : 'your_site_key'});
    };