How to hide the Google Invisible reCAPTCHA badge

Question

When implementing the new Google Invisible reCATPTCHA, by default you get a little "protected by reCAPTCHA" badge in the bottom right of the screen that pops out when you roll over it.

I'd like to hide this.

score 420 · Answer 1 · edited Nov 08 '21 at 15:05

420

Google now allows to hide the Badge, from the FAQ :

I'd like to hide the reCAPTCHA badge. What is allowed?

You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow. Please include the following text:
This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.
For example:

So you can simply hide it using the following CSS :

.grecaptcha-badge { 
    visibility: hidden;
}

Do not use display: none; as it appears to disable the spam checking (thanks @Zade)

edited Nov 08 '21 at 15:05

smac89

39,374
15
132
179

answered Jun 14 '17 at 11:40

Yann39

14,285
11
56
84

19

Accept it, or choose a different service. Google has every right to require you to show the branding for their *free* service. You can even reposition the badge to be inline with the form https://developers.google.com/recaptcha/docs/invisible#render_param. – Alexander Otavka Dec 21 '17 at 05:13
4

Well, I only use this captcha v3 on my contacts form page. So this is the only page I want this badge to show. It does not apply elsewhere on my site. Possible? – Andrew Truckle Dec 11 '18 at 16:27
@AndrewTruckle Why wouldn't it be? – Simon_Weaver Dec 12 '18 at 05:12
1

@Simon_Weaver I now understand that the system analyses all pages to work out it something is a bot or not. – Andrew Truckle Dec 12 '18 at 05:30
6

@Yann39 - please update your answer. It's fine to hide it and e.g. add it to just the contact page: https://developers.google.com/recaptcha/docs/faq – SolaceBeforeDawn Dec 13 '18 at 04:00
just wondering if it applies to v3 only or we can also hide v2 badge as well – Yongzhi Jan 04 '19 at 21:12
I successfully hid .grecaptcha-badge on one second with this method but suddenly is rerendered and attribute from style is removed. – Coolman Oct 18 '20 at 09:25
@Coolman Don't use the local style-attribute or JS-logic to add the styles, but add the above mentioned CSS selector to your global style sheet. – René Schubert Apr 03 '21 at 08:24
What does "user flow" mean here? As I live in Europe: Is it sufficient, to add the reCAPTCHA branding to the GDPR consent layer? – René Schubert Apr 03 '21 at 08:29
Is it okay to put it at the bottom next to the footer? – Luis Jun 06 '23 at 22:20

score 249 · Accepted Answer · edited Aug 04 '19 at 16:56

249

I have tested all approaches and:

WARNING: display: none DISABLES the spam checking!

visibility: hidden and opacity: 0 do NOT disable the spam checking.

Code to use:

.grecaptcha-badge { 
    visibility: hidden;
}

When you hide the badge icon, Google wants you to reference their service on your form by adding this:

<small>This site is protected by reCAPTCHA and the Google 
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.
</small>

edited Aug 04 '19 at 16:56

Stefan Falk

23,898
50
191
378

answered Dec 31 '18 at 11:34

Helenesh

3,999
2
21
36

11

This answer needs to be higher up! It contains all the necessary information for the solution in a succinct manner. – Björn Larsson Jan 11 '19 at 17:18
4

Exactly what I was looking for and this works great. Also for anyone looking for proof that it is allowed please check this page(if you haven't already seen it all over this SO thread) https://developers.google.com/recaptcha/docs/faq – Jake Jan 13 '19 at 14:43
Thanks for mentioning this @Jake. I have added this to my answer. – Helenesh Jan 13 '19 at 15:53
1

Has anyone found a documented way of hiding the badge rather than a css hack? Google offers an alternative way to show their branding but I can't find a supported method of hiding their badge. – Collin Price Jan 18 '19 at 15:29
Well what happens if you don't add that last part to your form? (Not that I have any problems with it, but for instance on WordPress you can't really modify the forms very easily or sometimes at all.) – Steve Moretz Oct 13 '22 at 20:58
Could I put this at the bottom footer? – Luis Jun 06 '23 at 22:18

James Law · Answer 3 · 2017-12-21T09:36:50.733

37

Set the data-badge attribute to inline

<button type="submit" data-sitekey="your_site_key" data-callback="onSubmit" data-badge="inline" />

And add the following CSS

.grecaptcha-badge {
    display: none;
}

edited Dec 21 '17 at 09:36

answered Jun 14 '17 at 11:16

James Law

6,067
4
36
49

18

Be careful; this appears to disable the spam checking. – Zade Nov 19 '17 at 01:35
4

Does this really disable the spam checking? If so, why all the upvotes? – Charlie Schliesser Apr 27 '18 at 21:41
1

@Zade maybe instead use `opacity: 0` or `visibility: hidden` ? also do u have a link to where it stats that ? – ctf0 Apr 30 '18 at 12:30
4

The user agreement says that you have to inform the users as @Yann39 says above. – Mihail Minkov Oct 23 '18 at 17:23
1

@Helenesh worth a separate answer? – Anupam Dec 31 '18 at 10:59
This answer is excellent and evil Muhahahaaaaaaaa. joke. I think we should give a proper link to Google for its free service! – mehmet Mar 03 '23 at 08:50

score 28 · Answer 4 · edited Mar 13 '21 at 12:27

28

For Google reCaptcha v3, the FAQ says:

You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow. Please include the following text:
This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.
For example:

Note: if you choose to hide the badge, please use
.grecaptcha-badge { visibility: hidden; }

It isn't clear whether it applies to reCaptcha v2. I suggest upgrading to v3 as it's a better experience for your visitors.

edited Mar 13 '21 at 12:27

ADTC

8,999
5
68
93

answered Dec 12 '18 at 19:04

codesmith

391
3
3

2

Only applicable to v3! v2 still requires showing the badge. `:(` – ADTC Dec 27 '18 at 08:26
@ADTC does this still apply? sauce? – User Mar 11 '21 at 07:37
@user13160957 I updated the answer. It still applies to v3. – ADTC Mar 13 '21 at 12:27
@ADTC I can't see why this would only apply to v3. Can you please give a reference to the source of your information? – René Schubert Apr 03 '21 at 08:35
@RenéSchubert as I mentioned: _"It isn't clear whether it applies to reCaptcha v2."_ Looking again at the linked FAQ, it would seem that you should be able to do this in v2 as well without violating terms. **Only Google can answer this definitely!** – ADTC Apr 07 '21 at 01:29
The disclaimer should be used in all the forms inside the page?, or being in 1 is enough?, what about services not present on forms? (like page load), is it necessary to show the badge/disclaimer on the page? – Alejandro Barone May 18 '21 at 23:14

score 17 · Answer 5 · edited Oct 16 '18 at 20:15

17

Since hiding the badge is not really legit as per the TOU, and existing placement options were breaking my UI and/or UX, I've come up with the following customization that mimics fixed positioning, but is instead rendered inline:

You just need to apply some CSS on your badge container:

.badge-container {
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
  width: 70px;
  height: 60px;
  margin: 0 auto;
  box-shadow: 0 0 4px #ddd;
  transition: linear 100ms width;
}
.badge-container:hover {
    width: 256px;
}

I think that's as far as you can legally push it.

edited Oct 16 '18 at 20:15

lmq_305

65
6

answered Apr 26 '18 at 17:03

krukid

4,285
5
31
30

2

Nice. I pushed it even further (without actually hiding it completely) using `transform: scale(0.6)` and `opacity: 0.6` – squarecandy Jul 11 '18 at 05:13
Are you able to have the blue banner open to the right than the left? Also adapt the colour scheme of it? – Vaishal Patel Nov 20 '18 at 14:02
1

@VaishalPatel in theory, yes, but there are two cons: firstly, tampering with native badge design is discouraged by Google and secondly, the more assumptions about existing design you make in your changes, the more fragile your solution becomes - keep in mind Google is free to change badge styles and layout whenever they feel like it. – krukid Nov 21 '18 at 14:40
1

@krukid I went with their default style inline. – Vaishal Patel Nov 21 '18 at 16:40
1

This answer is outdated, look at the [FAQ](https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed). – René Schubert Apr 03 '21 at 08:32

Kiran Maniya · Answer 6 · 2020-07-23T20:03:48.870

17

Yes, you can do it. you can either use css or javascript to hide the reCaptcha v3 badge.

The CSS Way use display: none or visibility: hidden to hide the reCaptcha batch. It's easy and quick.

.grecaptcha-badge {
    display:none !important;
}

The Javascript Way

var el = document.querySelector('.grecaptcha-badge');
el.style.display = 'none';

Hiding the badge is valid, according to the google policy and answered in faq here. It is recommended to show up the privacy policy and terms of use from google as shown below.

edited Jul 23 '20 at 20:03

answered Nov 14 '19 at 04:13

Kiran Maniya

8,453
9
58
81

1

'not querySelect' but 'querySelector'. – Keisuke Nagakawa 永川圭介 Jul 23 '20 at 19:02
5

display: none DISABLES the spam checking! – Ben Kalsky Oct 29 '20 at 23:55

Leon · Answer 7 · 2019-01-01T15:44:26.137

15

I decided to hide the badge on all pages except my contact page (using Wordpress):

/* Hides the reCAPTCHA on every page */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* Shows the reCAPTCHA on the Contact page */
/* Obviously change the page number to your own */
.page-id-17 .grecaptcha-badge {
    visibility: visible !important;
}

I'm not a web developer so please correct me if there's something wrong.

EDIT: Updated to use visibility instead of display.

edited Jan 01 '19 at 15:44

answered Dec 12 '18 at 16:24

Leon

3,614
1
33
46

this will work but the page-id-# is specific to your website so anyone using this will need to adjust the id to fit the page they want to perform the display on. || I have seen reports saying that doing this display:none; will also disable the checking but I am not sure about that right now. – Michael Tunnell Dec 28 '18 at 03:30
Careful! This disables the spam checking. Check my answer for more info – Helenesh Jan 01 '19 at 13:58
Updated based on above comments from Michael & Helenesh – Leon Jan 01 '19 at 15:45

score 9 · Answer 8 · answered Oct 25 '19 at 14:30

9

Note: if you choose to hide the badge, please use
.grecaptcha-badge { visibility: hidden; }

You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow. Please include the following text:

This site is protected by reCAPTCHA and the Google
<a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply.

more details here reCaptacha

answered Oct 25 '19 at 14:30

Mohsin Saeed

97
1
3

1

This should be the updated/correct answer. `display: none` itself disables spam checking if you don't put the text `This site is protected...`. – Cedric Hadjian Jan 17 '21 at 16:24

score 7 · Answer 9 · edited Mar 01 '19 at 11:24

A slight variant of Matthew Dowell's post which avoids the short flash, but displays whenever the contact form 7 form is visible:

div.grecaptcha-badge{
    width:0 !important;
}

div.grecaptcha-badge.show{
    width:256px !important; 
}

I then added the following to the header.php in my child theme:

<script>
jQuery( window ).load(function () { 
    if( jQuery( '.wpcf7' ).length ){ 
        jQuery( '.grecaptcha-badge' ).addClass( 'show' );
    }
});
</script>

score 5 · Answer 10 · edited May 31 '18 at 16:40

5

this does not disable the spam checking

div.g-recaptcha > div.grecaptcha-badge {
    width:0 !important;
}

edited May 31 '18 at 16:40

demo

6,038
19
75
149

answered May 31 '18 at 14:24

Mqtthieu

51
1
1

score 3 · Answer 11 · answered Oct 17 '18 at 15:46

My solution was to hide the badge, then display it when the user focuses on a form input - thus still adhering to Google's T&Cs.

Note: The reCAPTCHA I was tweaking had been generated by a WordPress plugin, so you may need to wrap the reCAPTCHA with a <div class="inv-recaptcha-holder"> ... </div> yourself.

CSS

.inv-recaptcha-holder {
  visibility: hidden;
  opacity: 0;
  transition: linear opacity 1s;
}

.inv-recaptcha-holder.show {
  visibility: visible;
  opacity: 1;
  transition: linear opacity 1s;
}

jQuery

$(document).ready(function () {
  $('form input, form textarea').on( 'focus', function() {
    $('.inv-recaptcha-holder').addClass( 'show' );
  });
});

Obviously you can change the jQuery selector to target specific forms if necessary.

score 3 · Answer 12 · answered Dec 14 '18 at 17:04

For users of Contact Form 7 on Wordpress this method is working for me: I hide the v3 Recaptcha on all pages except those with Contact 7 Forms.

But this method should work on any site where you are using a unique class selector which can identify all pages with text input form elements.

First, I added a target style rule in CSS which can collapse the tile:

CSS

 div.grecaptcha-badge.hide{
    width:0 !important;
}

Then I added JQuery script in my header to trigger after the window loads so the 'grecaptcha-badge' class selector is available to JQuery, and can add the 'hide' class to apply the available CSS style.

$(window).load(function () { 
    if(!($('.wpcf7').length)){ 
      $('.grecaptcha-badge').addClass( 'hide' );
       }
});

My tile still will flash on every page for a half a second, but it's the best workaround I've found so far that I hope will comply. Suggestions for improvement appreciated.

score 2 · Answer 13 · answered Dec 26 '18 at 15:52

If you are using the Contact Form 7 update and the latest version (version 5.1.x), you will need to install, setup Google reCAPTCHA v3 to use.

by default you get Google reCAPTCHA logo displayed on every page on the bottom right of the screen. This is according to our assessment is creating a bad experience for users. And your website, blog will slow down a bit (reflect by PageSpeed Score), by your website will have to load additional 1 JavaScript library from Google to display this badge.

You can hide Google reCAPTCHA v3 from CF7 (only show it when necessary) by following these steps:

First, you open the functions.php file of your theme (using File Manager or FTP Client). This file is locate in: /wp-content/themes/your-theme/ and add the following snippet (we’re using this code to remove reCAPTCHA box on every page):

    remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts' );

Next, you will add this snippet in the page you want it to display Google reCAPTCHA (contact page, login, register page …):

if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
    add_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts', 10, 0 );
}

Refer on OIW Blog - How To Remove Google reCAPTCHA Logo from Contact Form 7 in WordPress (Hide reCAPTCHA badge)

score 1 · Answer 14 · answered May 19 '18 at 13:29

I saw next comment about this

It's also helpful to place the badge inline if you want to apply your own CSS to it. But do remember that you agreed to show Google's Terms and conditions when you registered for an API key - so don't hide it, please. And while it is possible to make the badge disappear completely with CSS, we wouldn't recommend it.

Bijaya Kumar Oli · Answer 15 · 2019-02-28T05:10:04.620

0

Recaptcha contact form 7 and Recaptcha v3 solution.

body:not(.page-id-20) .grecaptcha-badge {
    display: none;
}

More Than One Contact Form Page?

body:not(.page-id-12):not(.page-id-43) .grecaptcha-badge {
    display: none;
}

You can add more “nots” if you have more contact form pages.

body:not(.page-id-45):not(.page-id-78):not(.page-id-98) .grecaptcha-badge {
    display: none;
}

Make sure that your body section will like this:

<body>

Change it so that it looks like this:

 <body <?php body_class(); ?>>

edited Feb 28 '19 at 05:10

answered Feb 28 '19 at 05:04

Bijaya Kumar Oli

2,007
19
15

Please the other answers, display none disables the spam checking. – Helenesh Mar 04 '19 at 22:11
1

@Helenesh what is spam checking and how it is related with adding a CSS style? – Berkant İpek May 16 '19 at 12:14

How to hide the Google Invisible reCAPTCHA badge

15 Answers15

I'd like to hide the reCAPTCHA badge. What is allowed?

Linked

Related