recaptcha size invisible

I don’t recommend using the “Invisible” reCAPTCHA honestly. It’s not that good.

If you want to use it anyway, you need additional steps besides adding size:invisible option to [recaptcha] tags. Just for reference, I’ve confirmed Invisible reCAPTCHA works with the following settings:

In the Form:

[recaptcha size:invisible callback:onsubmitcallback]

[submit id:thesubmit "Send"]

In the footer JavaScript:

<script>
var onsubmitcallback = function( token ) {
  document.querySelector( '.g-recaptcha-response' ).value = token;
  document.querySelector( '.wpcf7 form' ).submit();
};

( function( $ ) {
  $( '#thesubmit' ).click( function( event ) {
    grecaptcha.execute( 0 );
    event.preventDefault();
  } );
} )( jQuery );
</script>

Again, I don’t recommend it.

This technique still works great for me. With watching out for a few “gottchas” and a few code modifications I got it working even better.

First – make sure that you are using a recaptcha key specifically for invisible type – a key for a regular v2 “i’m not a robot” box will not work. Generate a new key at https://www.google.com/recaptcha/admin if you need to.

Second, I didn’t like that the code above did a full browser-level submit of the form. I prefer the nice AJAX that’s built in to WPCF7. Here’s the javascript code I ended up using:

// implement the invisible google recaptcha
var recaptchaSubmitCallback = function( token ) {
	document.querySelector( '.g-recaptcha-response' ).value = token;
	form = jQuery( '#thesubmit' ).closest('form');
	wpcf7.submit(form);
};

jQuery( '#thesubmit' ).closest('form').on('submit', function(e) {
	e.preventDefault();
	grecaptcha.execute(0);
} );

And lastly – I didn’t like the fixed position badge, so I put it inline with the form like this:

    .grecaptcha-badge {
      width: 100% !important;
      height: auto !important;
      position: relative !important;
      box-shadow: none !important;
      right: auto !important;
      bottom: auto !important;
    }
    div.grecaptcha-badge:hover {
      right: auto !important;
    }
    .grecaptcha-logo {
      display: block;
      overflow: hidden;
      width: 256px;
      height: 60px;
      margin: -22px auto 0;
      box-shadow: none;
      transform: scale(0.6);
      opacity: 0.6;
      transition: opacity 300ms;
    }
    .grecaptcha-logo:hover {
      opacity: 1;
    }

Also – Here’s the shortcode I’m using in the WPCF7 form settings:

[recaptcha size:invisible callback:recaptchaSubmitCallback] [submit id:thesubmit "SEND"]

Hope this helps someone!