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
The reCAPTCHA badge is right aligned by default and there are no design options in the Google settings.
After
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.
- Log in to your WordPress dashboard
- Go to Appearance » Customize
- 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; } - Save and preview in frontend.
- 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
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
Hi Rubb! That’s a good question. Post a link and I’ll have a look at it.
Works so well, perfact
Thanks, I’m glad it helped Rutvi! 👉
Thanks for the handy snippet!! *****
I’m glad you liked it Dan! 🙂
Exactly what I needed – thank you so much for posting!
No probs Dan, I’m glad you liked it! 👉
Thanks for the code! It worked nicely.
Awesome Pedro, that’s nice to hear!
Useful and simple. Works perfectly, thanks guy!
I’m glad you liked it, Giorgio! 👉
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
That’s awesome, thanks for sharing that solution Omer!
Works very good 👏🏻
Awesome, I’m glad to hear that! 🙂
Thanks for the tutorial!
I’m glad you liked it Paolo!
Great script, works fine!! thank you
Perfect, I’m glad that it worked! 🙂
Works like a charm. Thanks so much, Victor
Awesome, I’m glad to hear that! 🙂
It works great but only when I’m logged in to WordPress.
It was WP Rocket/File Optimization/Optimize CSS Delivery. I had to disable the setting. All is good now. Thx!
I’m glad to hear that it worked out! 🙂