Hide the Contact Form 7 Google v3 reCAPTCHA Badge

Google version 3 reCAPTCHA Badge

With the release of version 5.1 of Contact Form 7, Google’s reCAPTCHA version 3 (v3) became the default. Google’s reCAPTCHA v3 does away with the “I’m not a robot” checkbox on contact form pages, but it loads and runs on every page, adding an obtrusive badge, well, everywhere.

Google explains that the more pages the reCAPTCHA v3 script runs on, the more accurate it will be in determining whether visitors are human or bots. In their FAQ, they also state that the badge can be hidden, but, “You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow.”

That seems reasonable. So what’s the best way to hide the badge everywhere but on the contact form page(s)?

Enter CSS3’s “not” selector. The CSS3 “not” selector allows you to tell CSS to perform a formatting action on all but a specified element. Since what we need is to hide the Google v3 reCAPTCHA badge on all but the contact form page(s), the “not” selector is a slick way to accomplish it and still keep the badge visible “in the user flow;” i.e., displayed on the contact form page.

The CSS

The CSS required to hide the Google v3 reCAPTCHA badge on all but the contact form page is quite simple:

body:not(.page-id-189) .grecaptcha-badge {
	display: none;
}

Simply replace the “189” in the code above with the page ID of your contact form page.

What’s My Contact Form Page ID?

The easiest way to find your WordPress’ contact form page ID is to log into the admin side of your site, then go Pages -> All Pages and either hover your mouse over the name of the contact form page and look at the “post=” part of the URL in the status bar of your browser, or click the “Edit” link for the contact form page and look in the address bar of your browser to see what the “post=” is. The digits following “post=” in the URL is your contact form’s page ID.

Adding the CSS

You can either add the CSS to the style.css of your child theme, or in WordPress’ admin, go Appearance -> Customize -> Additional CSS, and add it there.

Clear any caching plugin you’re using, clear your browser cache, and you should see–or not see–the Google v3 reCAPTCHA badge on all but your contact form page.

More Than One Contact Form Page?

What if you have more than one contact form page?  No problem! Just alter your CSS syntax to look like the sample below, substituting your page IDs for the page IDs in the sample:

body:not(.page-id-16):not(.page-id-55) .grecaptcha-badge {
	display: none;
}

You can add more “nots” if you have more contact form pages.

body:not(.page-id-16):not(.page-id-55):not(.page-id-58) .grecaptcha-badge {
	display: none;
}

What If It Doesn’t Work?

If the CSS doesn’t work on your site, you’re certain you’re using the correct page ID, and you’ve cleared all server, CDN, and browser caching, it’s possible your theme isn’t loading the page ID as a class in the body tag of your pages.

To discover if a missing page ID is the issue, look at the source of one of your site’s pages in your browser (Ctrl+u in Firefox). Find the “body” tag and see if there is a “page-id-” in the class attribute.

If the page ID isn’t listed in your theme’s body tags, you can add it by editing the header.php for your child theme and adding a little PHP to it. For example, if your current body tag looks like this:

<body>

Change it so that it looks like this:

<body <?php body_class(); ?>>

The “body_class” function will add the correct classes to the body tag of your site, including the page ID.