Search
Close this search box.

Elementor, reCaptcha and the Native Form

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

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 a number of ways to achieve this.

1. Adjust with Custom CSS:

If the placeholder is visible and you’re willing to add some Custom CSS to adjust it, you can use the following classes to adjust the placeholder:

2. Replace Placeholder with HTML field:

To delete the placeholder before adding the HTML field to your form, you can add the following CSS:

Now you can add an HTML field to your Contact Form to obtain consent for Google ReCaptcha.

Add an HTML field as the last field and add the below snippet. 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:

3. CSS to hide the ReCaptcha Placeholder after consent is obtained

To hide the ReCaptcha Placeholder HTML from the form after consent is received, you can apply the below CSS to the page. This can be added as Custom CSS in Elementor when editing the page.

4.Remove the integration

If you don’t want to block ReCaptcha, you can always opt to disable Google ReCaptcha as a service under “Complianz -> Integrations”. This is not recommended, but it is possible.

Join 1M+ users and install The Privacy Suite for WordPress locally, automated or fully customized, and access our awesome support if you need any help!

Complianz has received its Google CMP Certification to conform to requirements for publishers using Google advertising products.