How to hide the reCAPTCHA v3 badge the right way

Quick answer

You can hide the Google reCAPTCHA v3 badge with CSS, but you must still show users that the page is protected by reCAPTCHA and link to Google’s Privacy Policy and Terms of Service. The safest pattern is simple: hide only the floating badge, then add a visible disclosure near the form that uses reCAPTCHA.

Why the reCAPTCHA badge appears

Google reCAPTCHA v3 runs in the background. It scores user behavior and helps decide whether a request looks human or automated. Because the check is invisible, Google adds a small badge so visitors can see that reCAPTCHA is being used on the page.

That badge can feel visually awkward on carefully designed forms, especially on mobile. It may overlap sticky controls, chat widgets, cookie banners, or checkout buttons. Hiding it is common, but it needs to be done responsibly.

The compliant way to hide the badge

The important part is not the CSS. The important part is the replacement notice.

If you hide the floating badge, place a short message close to the protected form:

<p class="recaptcha-notice">
  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.
</p>

Then hide the badge:

.grecaptcha-badge {
  visibility: hidden;
}

Use visibility: hidden rather than aggressive layout hacks. It keeps the integration predictable while removing the visible badge from the interface.

Where to place the notice

The notice should appear where users are making the protected action. Good placements include:

• Below a contact form submit button.
• Near newsletter signup consent text.
• In a checkout or account creation form footer.
• Beside other privacy and anti-spam notices.

Avoid hiding the badge globally without adding replacement text. If a page uses reCAPTCHA, users should still have a clear path to the relevant Google policies.

Example contact form markup

<form>
  <label>
    Email
    <input type="email" name="email" autocomplete="email" required>
  </label>

  <button type="submit">Send message</button>

  <p class="recaptcha-notice">
    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.
  </p>
</form>

.recaptcha-notice {
  max-width: 42rem;
  color: #5e6570;
  font-size: 0.875rem;
  line-height: 1.5;
}

Accessibility considerations

Do not make the replacement notice too small or too low contrast. The copy is legal and privacy-related, so it should remain readable. Keep links visually distinct, keyboard accessible, and clear enough for people using assistive technology.

If your form already has a privacy paragraph, the reCAPTCHA wording can live there. The goal is not to add clutter. The goal is to keep the page honest about the background protection being used.

Common mistakes

• Hiding the badge without any replacement disclosure.
• Placing the disclosure only in a privacy policy page that users will not see before submitting the form.
• Using display: none together with brittle scripts that assume the badge is still measurable.
• Making the replacement notice unreadable with tiny text or poor contrast.
• Forgetting forms added later by plugins, modals, or embedded checkout flows.

FAQ

Can I hide the reCAPTCHA badge?

Yes, but only if you show the required reCAPTCHA disclosure with links to Google’s Privacy Policy and Terms of Service.

Should I use display: none or visibility: hidden?

I prefer visibility: hidden for the badge. It removes the badge visually while avoiding some layout and script assumptions that can come from completely removing it from display.

Do I need the disclosure on every page?

Add the disclosure wherever reCAPTCHA protects a user action, such as a form submission. If reCAPTCHA is loaded site-wide but only used on forms, keep the notice near the forms that matter.

Final thought

Hiding the reCAPTCHA badge is a design decision, not a shortcut around disclosure. Keep the interface clean, but keep the privacy notice visible and understandable.

If the form is part of a wider rebuild, the disclosure, validation, accessibility, spam protection, and performance should be reviewed together. That is part of how I approach full stack web development rather than treating the form as an isolated snippet.

About the author

Written by Tiago Galvão

Full Stack Developer · Portugal | Switzerland

I've been building for the web since 2001. Full stack development across Vue, Nuxt, Astro, TypeScript, C#, .NET, and PostgreSQL, among others, with a habit of writing down what actually worked and what didn't once the dust settles.

More about me →