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.

Did you try to hide it with `visibility: hidden` or if that fails, to set CSS `position: absolute; left: -10000px; right: -10000px`? — Christos Lytras, Mar 23 '18 at 19:02
Yes, this can work but you are not really supposed to remove the badge from the page. Whether you hide it or move it, it is still a violation of google terms. If you hide it with visibility, it does seem to still validate unlike display none. This could be a solution if you do not care about google terms, but I rather move it to a div on the page and still show it. — Dennis, Mar 24 '18 at 12:52
jQuery `appendTo` worked for me to move the badge at the bottom. Please check the code and my live example. If it still does not work for you, then please provide the full reCaptcha implementation code you're using. — Christos Lytras, Mar 24 '18 at 13:32
Google now allows hiding the Recaptcha as long as you inform users explicitly about using ReCaptcha. See [this answer](https://stackoverflow.com/a/44543771/1526703) for details. — Anupam, Dec 31 '18 at 10:43

score 5 · Accepted Answer · answered Mar 24 '18 at 13:30

5

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~".

answered Mar 24 '18 at 13:30

Christos Lytras

36,310
4
80
113

While the javascript on this works, the actual validation for the form does not. BUT found a workaround. You have to add a hidden input field with the name "g-recaptcha-response" within the form since you moved the recaptcha OUT of the form with the append. Do that and the above will work. Kinda a hack, but it's a valid way to do it while adhering to the google terms. thanks @Christos, great idea with the timer. That was my issue - i think the recpatcha had not rendered yet and when I called the append, it was appending nothing to the new place. – Dennis Mar 24 '18 at 20:31
It has a few methods that it works, but yes the problem is that it does not render anything until JS library is loaded and initialized, that's why a direct `appendTo` won't work; because when it calls it recaptcha hasn't done anything yet, and the solution to this is to create a timer and check constantly if the recaptcha is rendered and only then use `appendTo` to move it where you want. It's nice you have sorted this out. – Christos Lytras Mar 25 '18 at 08:47
If this causes the form to not validate or submit this answer really needs to be updated before marked as accepted. – ESR Oct 03 '18 at 05:35
@ESR I have tested this before posting the answer and it was working with successful form POST. If it's not working for you, maybe you should post a new question with the specific issues you have. – Christos Lytras Oct 03 '18 at 10:15
@ChristosLytras I was just reading Dennis's response about the actual validation not working and didn't see his comment reflected in an update to your response, I guess I misunderstood – ESR Oct 03 '18 at 14:09

How to Move Invisible Recaptcha Badge to Another Place on Page

1 Answers1