Using the CSS Stylesheet to hide reCaptcha Logo

[pasqualerose]

(Sorry this is duplicated. I’m having some trouble posting it on my end.)
Hi. It’s been a while since I’ve logged on here with a question. I am using Contact Form Seven as my contact form. With using reCaptcha spam protection the reCaptcha logo pops up on every page of the site. I’ve been given some suggestions on how to get rid of it and it seems I need to enter code into the CSS stylesheet. I don’t want to do something that’s going to negatively affect the website. These are the instructions from contact form seven’s support.

“#The reCAPTCHA badge is annoying me, can I hide it?

According to reCAPTCHA’s official FAQ answer Google permits you to hide the reCAPTCHA badge.

To hide the badge add this style rule somewhere in your CSS stylesheets:

1	<code class=”css plain”>.grecaptcha-badge { <code class=”css keyword”>visibility<code class=”css plain”>: <code class=”css value”>hidden<code class=”css plain”>; }

Instead you have to add text links to Google’s Privacy Policy and Terms of Servicepages in a position prominent to site users.”

Where would I enter that line of code and how would I do it so I don’t negatively affect the rest of the website?

This a link to the page with those instructions. https://contactform7.com/faq-about-recaptcha-v3/#hide-recaptcha-badge

Thanks,

Pat

[scrambler]

All CSS can be placed in The Theme Global Custom CSS Rule box, and if the rule has proper syntax it wont affect anything else but what it is intended for.

It looks like when you pasted the CSS it got mangled, I assume the rule they gave you was

.grecaptcha-badge {visibility:hidden;}

If so, this will basically hide all HTML elements with the class .grecaptcha-badge and nothing else

[pasqualerose]

Thanks @Scarmpler. So I went to enter the .grecaptcha-badge {visibility:hidden;} code at Appearances>Additional CSS >custom CSS. There was already something written in there. It said, “. Selector {font-size: 150%;font – weight:bold;} /*for example*/” when I tried to place the reCAPTCHA code in thee box it deleted the other code. I cancel the action.

Where did I go wrong?

These links are to a couple screenshots. https://ibb.co/7gFh2j1

Thanks,

[scrambler]

Your screenshot shows the proper location for the rule and the rule appears correct.

When you do that does it do the job or NOT?

If not, leave the rule in place and post a link to a page that shows what you are trying to hide, and be specific where it is in the page

“. Selector {font-size: 150%;font – weight:bold;} /*for example*/”  is just a comment to illustrate it can be deleted

[pasqualerose]

When I enter the grecaptcha-badge {visibility:hidden;} code, the “. Selector {font-size: 150%;font – weight:bold;} /*for example*/” that was already there in the box disappears. So I never saved the “grecaptcha-badge {visibility:hidden;}” because I didn’t want to lose the code that was in the box before I placed the “grecaptcha-badge…” code in the box.

This screen shots shows that other code in there. But it’s not allowing me to have both codes in the box at the same time. Thanks.

[pasqualerose]

What would happen if I deleted that other code?

[scrambler]

I told you nothing will happen, that code does nothing, it is an example that does not do anything

[pasqualerose]

Got it. Thanks.

I posted the reCaptcha code in and it didn’t do anything.

Pat

[scrambler]

Please Pay attention….

I told you that if that was the case, I needed you to Leave the rule in place, and provide a link to a page with the element you are trying to hide and explain where that element is located

[pasqualerose]

OK. I did some more investigating. I’m logged in to work on the website using Google Chrome. When I look at the site using Chrome I see the reCaptcha logo. So I decided to check Safari, where I’m not logged in. And the logo did not show up using Safari. I did the same thing using Firefox and the logo did not appear there either. I then checked my phone and it appeared there, but I didn’t see it when I looked using my son’s iPad.

Perhaps it staying on Chrome and my phone due to caching reasons, although I did clear the site’s cache. So maybe the browsers are doing the caching.

I  put the weblink in like this:

.grecaptcha-badge { visibility: hidden; } https://visualverse.thecreationspeaks.com/photography-coach/

Thanks,

Pat

[pasqualerose]

I’m pretty sure it’s a caching issue now.

Thanks for your help and patience.

[scrambler]

What are you Saying ???

.grecaptcha-badge { visibility: hidden; } https://visualverse.thecreationspeaks.com/photography-coach/

IS NOT a VALID CSS rule, you must not type that url in the Theme Global Custom CSS Box.

The Valid rule I gave you is

.grecaptcha-badge {visibility: hidden;} 

Remove the URL part (yellow highlight) from the custom CSS file

That said, I Checked your site,  and the CSS Rule is doing its job and hiding the Captcha logo.

The captcha logo does not appear on edge or Chrome for me (because of the CSS rule).

[pasqualerose]

Sorry, I apologize. I am a little dyslexic and sometimes I don’t see everything that is written.

I agree that it’s working now. I mentioned in my last post that I believe it was only showing up on my Chrome and phone because the browsers were caching it (my phone no longer is caching it, but Chrome still is, even though I cleared the cache). Chrome caching it was why I thought the code wasn’t working when I first inserted it.

Thanks,

Pat

[Author]

Posts