How to Move Invisible Recaptcha Badge to Another Place on Page

Question

I have the new invisible recaptcha working fine, but it puts the badge in bottom left or right corner. You can override this with "data-badge='inline'" and that pulls it into the form. Google is extremely vague on how to actually move it. You cannot hide it as google will not validate your form anymore. Soo...

THE ISSUE is I cannot seem to move it anywhere else on the page. I want to move it to the bottom of the page inside a div I created. Has anyone successfully done this? I tried appendTo but that does not work.

$('.grecaptcha-badge').appendTo("#g-badge-newlocation");

Any help would be great!!!

Thank you.

Answer 1

If you want to comply with Google Terms, then you can use a timer to detect the badge and then move it down at the bottom. You have to set the badge property to inline. jQuery appendTo worked for me:

Recaptcha code

var onSubmit = function(token) {
  console.log('success!');
};

var onloadCallback = function() {
  grecaptcha.render('submit', {
    'sitekey' : '<your_site_key>',
    'callback' : onSubmit,
    'badge': 'inline'
  });
};

The code to setup a timer to check and move grecaptcha-badge element

jQuery(function($) {

    var checkTimer = setInterval(function() {
      if($('.grecaptcha-badge').length > 0) {
        $('.grecaptcha-badge').appendTo("#g-badge-newlocation");
        clearInterval(checkTimer);
      }
    }, 50);

});

Please check my live example here (http://zikro.gr/dbg/google/recaptcha/). You can see that the badge goes at the bottom inside #g-badge-newlocation element and that it works because when you hit submit, recaptcha triggers the callback function which logs the word "success~".