Complianz Privacy Suite

Elementor, reCaptcha and the Native Form

Aert Hulsebos

Aert Hulsebos

Categories

Popular articles

TCF for WordPress

The Transparency Consent Framework () is an initiative by IAB Europe and IAB Tech Lab to provide a platform for vendors, publishers, and consent management

Read More

TCF V2.0 release (Update)

Update: Released on October 5th 2020 Since August 15th the Transparency and Consent Framework V2.0 from IAB Europe or V2 has been adapted by Google

Read More
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

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!

 

recaptcha placeholder
Example reCaptcha Placeholder

Using another placeholder for the Elementor native form.

In some instances of the native Elementor form, the placeholder malfunctions. If this is the case, please follow the below steps.  You can find a corrected example at demo.complianz.io/elementor-form

Malfunction on the native Elementor form

I want to change my placeholder

If your placeholder doesn’t seem right, or you want to configure a new placeholder, there are 4 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:

.elementor-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

Recent articles

Subscribe