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

User · Answer

Google now says  You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow   Link

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Set the data-badge attribute to inline   lt button type  submit  data-sitekey  your site key  data-callback  onSubmit  data-badge  inline    gt    And add the following CSS   grecaptcha-badge       display  none

User · Answer

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      lt a href  https   policies google com privacy  gt Privacy Policy lt  a gt  and      lt a href  https   policies google com terms  gt Terms of Service lt  a gt  apply   more details here reCaptacha

User · Answer

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    lt script gt  jQuery  window   load function           if  jQuery    wpcf7    length             jQuery    grecaptcha-badge    addClass   show                lt  script gt

User · Answer

Google now allows to hide the Badge  from the FAQ    I d like to hide the reCAPTCHA v3 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      lt a href  quot https   policies google com privacy quot  gt Privacy Policy lt  a gt  and      lt a href  quot https   policies google com terms quot  gt Terms of Service lt  a gt  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

User · Answer

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

User · Answer

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    lt small gt This site is protected by reCAPTCHA and the Google       lt a href  https   policies google com privacy  gt Privacy Policy lt  a gt  and      lt a href  https   policies google com terms  gt Terms of Service lt  a gt  apply   lt  small gt

User · Answer

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

User · Answer

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

User · Answer

this does not disable the spam checking  div g-recaptcha  gt  div grecaptcha-badge       width 0  important

User · Answer

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 amp Cs   Note  The reCAPTCHA I was tweaking had been generated by a WordPress plugin  so you may need to wrap the reCAPTCHA with a  lt div class  inv-recaptcha-holder  gt       lt  div gt  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

User · Answer

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    lt body gt    Change it so that it looks like this     lt body  lt  php body class      gt  gt

[javascript] How to hide the Google Invisible reCAPTCHA badge

Examples related to javascript

Examples related to recaptcha