How To Move The reCAPTCHA v3 badge to the left side

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

Time to switch sides for the reCAPTCHA badge? Here's the easy way to move it from the right corner to the left corner.
Skribent: Victor Duse
By Victor Duse

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

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.