Is The reCAPTCHA Badge Hidden Behind Your Content? Here’s The Easy Fix!

2021-09-29 | Divi Forms, Tutorials, WordPress | 0 comments

It's a common issue that the reCAPTCHA badge is hidden behind random website content. Let's fix it!
Skribent: Victor Duse
By Victor Duse

Is the Google reCAPTCHA v3 badge hidden behind the footer or other content on your WordPress website? Here’s is how you solve the overlapping problem!

Before

reCAPTCHA badge hidden behind content

It’s a common issue that the reCAPTCHA badge is hidden behind content such as the footer, sections or text.

After

reCAPTCHA badge moved in front of content

The fix in this blog post will force the reCAPTCHa badge to always be displayed in front of your content.

The CSS property that decides the stack order of elements on a website is called z-index. An element (for example a badge) with a greater z-index is displayed in front of an element with a lower z-index.

In this particular case, we need to give the reCAPTCHA badge a greater z-index value then the overlapping content on the page.

Move the reCAPTCHA badge in front of your content

  1. Log in to your WordPress dashboard
  2. Go to Appearance » Customize
  3. Click Additional CSS and paste the snippet below:
     /* Move reCAPTCHA v3 badge in front */
    .grecaptcha-badge {
    z-index:999;
    }
  4. Save and preview in frontend.
  5. Clear your browser cache and website cache if the badge isn’t in front.

Why you should avoid z-index:999999999

So why not add a hugh number to make sure that the badge will always be on top? It would work but the problem is that you don’t want the badge to overlap some types of content, for example:

  • Cookie bars
  • Lightboxes
  • Pop ups
  • Menus
  • Close buttons

My recommendation is to start with a small number and adjust it until you are happy. In my test design with a Divi layout pack the z-index:1 was actually enough.

Other solutions

If the reCAPTCHA badge is overlapping your content in a negative way and prevents your users from seeing or clicking it, you might want to try one of these fixes instead:

Good luck!

That’s a wrap!

I hope that you enjoyed this post. Subscribe to DiviMundo on YouTube and join our Facebook group for more crisp content on WordPress and web design.

Related post: How to add Google reCAPTCHA v3 to a Divi Contact Form

Related post: How to design a stunning Contact page with Divi

Related posts

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.