Home Forums Weaver Xtreme Theme Using the CSS Stylesheet to hide reCaptcha Logo

Topic Resolution: Resolved
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #69238
    pasqualerose
    Participant

    (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

    #69241
    scrambler
    Moderator

    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

    #69244
    pasqualerose
    Participant

    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
    Screen-Shot-2021-07-23-at-4-44-04-PM

    Thanks,

    #69246
    scrambler
    Moderator

    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

    #69247
    pasqualerose
    Participant

    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.

    Screen-Shot-2021-07-23-at-4-43-55-PM

    #69248
    pasqualerose
    Participant

    What would happen if I deleted that other code?

    #69249
    scrambler
    Moderator

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

    #69256
    pasqualerose
    Participant

    Got it. Thanks.

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

    Pat

    #69259
    scrambler
    Moderator

    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

    #69261
    pasqualerose
    Participant

    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

    #69262
    pasqualerose
    Participant

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

    Thanks for your help and patience.

    #69263
    scrambler
    Moderator

    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).

    #69282
    pasqualerose
    Participant

    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

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.