Blocking reCaptcha & Editing the Placeholder

When configuring our plugin with the easy wizard, you will be prompted to check integrations, which are not yet scanned or found by Complianz. Sometimes you will need to enable reCaptcha if it is not prechecked by default, of course, only if you use reCaptcha on your contact or login/registration forms.

If you enable reCaptcha in the wizard, or later on under the menu-item ‘Integrations’ Complianz will block reCaptcha and add a placeholder before consent.

Why we block reCaptcha? Read this article for more information.

Variables in reCaptcha

reCaptcha can be used by almost all popular contact form plugins, with two versions, with V2 still being the most popular. V2 can either be implemented with a checkbox or invisible, while V3 is a background bot checker. All three implementations need an API key.

The different versions and different applications by many plugins and themes make for a tricky implementation of a generic placeholder.

Checking the Placeholder

When reCaptcha is enabled, Complianz will automatically add a placeholder. In most cases, this will work out-of-the-box. It is important to check if your placeholder is correct. The placeholder should appear when you visit your website with functional cookies enabled, but not more. A quick way to check is to visit your website in incognito mode.

My placeholder looks fine!

If your placeholder looks like the below image, you’re good to go. If you want to change the placeholder, you can scroll down for the how-to!

I have ContactForm 7 and don’t see a placeholder

We have made a direct integration for ContactForm 7. If a user does not have cookies enabled while submitting a form, the user will get a conditional warning to accept cookies before sending the form. This works with both V2 (separate plugin) and the default integration from ContactForm 7 V3. You can find an example at demo.complianz.io/recaptcha

I want to change my placeholder

If your placeholder doesn’t seem right, or you want to configure a new placeholder, there are a couple of ways to achieve this:

1.Custom CSS:

If the placeholder is visible and your willing to add some custom CSS to your theme. You can use the following classes to fix the placeholder:

.cmplz-blocked-content-container .cmplz-blocked-content-notice
{
Your custom CSS
}

2.Filter Placeholder and use an HTML field:

You can also choose to delete the placeholder with a filter and use an HTML field. To delete the placeholder before adding the HTML field to your form, you can add the following filter in an MU Plugin or your theme’s functions.php:

add_filter('cmplz_placeholder_markers', 'my_unset_recaptcha_placeholders', 100);
function my_unset_recaptcha_placeholders($tags){
unset($tags['google-recaptcha']);
return $tags;
}

Now you can add the HTML field in your contact form. Add the HTML field (we will use Gravity Forms as an example) as the last field and add the below HTML. You can choose to remove the last DIV if you don’t want to link to the cookie policy. Custom CSS might be needed to make the text appear as you wish. The result is beneath the HTML code:

<div class="cmplz-blocked-content-notice cmplz-accept-cookies" style="text-align: left; cursor: pointer;">
Click here to accept reCaptcha cookies before sending the form.</div>

<div class="cmplz-blocked-content-notice" style="text-align: left;"><a class="cc-link" tabindex="0" href="/cookie-policy/" aria-label="learn more about cookies">
Read more</a></div>

 

3.Custom CSS and use an HTML field

You can also remove the placeholder with CSS:

 .cmplz-blocked-content-container.recaptcha-invisible, .
cmplz-blocked-content-container.g-recaptcha
{
display:none;
}

You can now add the HTML as explained above.

4.Remove the integration

If you don’t want to block reCaptcha, and remove any placeholder. You can always opt to disable reCaptcha as a service under “Integrations”. This is not recommended, but it is possible