How To Move The reCAPTCHA v3 badge to the left side

Is the Google reCAPTCHA v3 badge overlapping content in the bottom right corner of your WordPress website? Let’s move the badge to the left side with some custom CSS! 

Before

Google reCAPTCHA v3 badge to the right

The reCAPTCHA badge is right aligned by default and there are no design options in the Google settings.

After

Google reCAPTCHA v3 badge to the left

Use the CSS snippet below to make the reCAPTCHA badge left aligned.

When you add reCAPTCHA v3 spam protection to your website, you are left with no design options at all. While Google lets you hide the reCAPTCHA badge with custom CSS, the badge will still display on all pages that contains reCAPTCHA v3 protected forms. And there are no guidelines from Google on how to move the badge to the left.

But the good news is that there is a vibrant developer community that provides a solution! The user Sumith posted the neat CSS snippet below on Stack Overflow and it works perfect.

Move the reCAPTCHA badge to the left, step by step

This fix works for all WordPress themes.

  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 to the left */
     
     .grecaptcha-badge {
      width: 70px !important;
      overflow: hidden !important;
      transition: all 0.3s ease !important;
      left: 4px !important;
    }
    
    .grecaptcha-badge:hover {
      width: 256px !important;
    }
  4. Save and preview in frontend.
  5. Clear your browser cache and website cache if the badge isn’t left-aligned.

If the badge is overlapping content on the bottom left side, you can move the badge higher up on the page.

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

12 Comments
  1. Found your post, it is good for LTR site, how do I move the recaptcha to the left in RTL site?
    it don’t show the logo

    Reply
    • Hi Rubb! That’s a good question. Post a link and I’ll have a look at it.

      Reply
  2. Works so well, perfact

    Reply
    • Thanks, I’m glad it helped Rutvi! 👉

      Reply
  3. Thanks for the handy snippet!! *****

    Reply
  4. Exactly what I needed – thank you so much for posting!

    Reply
    • No probs Dan, I’m glad you liked it! 👉

      Reply
    • Awesome Pedro, that’s nice to hear!

      Reply
  5. Useful and simple. Works perfectly, thanks guy!

    Reply
    • I’m glad you liked it, Giorgio! 👉

      Reply

Submit a Comment

Your email address will not be published.

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

Affiliate Disclaimer

All content on DiviMundo is funded by you – our beloved readers. Some of the links are affiliate links. This means that if you click on the link and purchase something, I will receive an affiliate commission. But it will never cost more for you. Thanks for your support!

Victor Duse, founder of DiviMundo