Affiliate Disclaimer

Follow us
Buy me a coffee ☕

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.

Subscribe on YouTube

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

Affiliate link

881 346 customers have already unleashed the true potential of WordPress. Download Divi and start building beautiful websites today.

EXPLORE DIVI

Try today and get your money back within 30 days if you are not satisified. 100% Risk-Free.

Related posts

More posts

20 Comments

  1. Rubb on 2022-02-10 at 13:29

    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
    • Victor Duse on 2022-02-10 at 14:01

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

      Reply
  2. Rutvi on 2022-05-16 at 14:04

    Works so well, perfact

    Reply
    • Victor Duse on 2022-05-17 at 07:59

      Thanks, I’m glad it helped Rutvi! 👉

      Reply
  3. Dan K. on 2022-06-04 at 00:27

    Thanks for the handy snippet!! *****

    Reply
  4. Greg on 2022-06-09 at 05:05

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

    Reply
    • Victor Duse on 2022-06-09 at 11:59

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

      Reply
  6. Giorgio on 2022-09-03 at 17:16

    Useful and simple. Works perfectly, thanks guy!

    Reply
    • Victor Duse on 2022-09-04 at 09:26

      I’m glad you liked it, Giorgio! 👉

      Reply
  7. Omer on 2022-10-03 at 13:47

    Hi there, it wasn’t working for me (after implementing the code the badge dissappeared) and I found a fix – just add =: z-index:99!important as well as – right:unset!important and it wont break

    Reply
    • Victor Duse on 2022-10-04 at 06:05

      That’s awesome, thanks for sharing that solution Omer!

      Reply
  8. deizi23 on 2022-11-08 at 09:17

    Works very good 👏🏻

    Reply
    • Victor Duse on 2022-11-08 at 10:12

      Awesome, I’m glad to hear that! 🙂

      Reply
  9. Paolo on 2023-01-12 at 14:52

    Thanks for the tutorial!

    Reply
    • Victor Duse on 2023-04-06 at 11:09

      Perfect, I’m glad that it worked! 🙂

      Reply

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.

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