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 4 ways to achieve this:

1. Custom CSS:

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

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:


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:

3.Custom CSS and use an HTML field

You can also remove the placeholder with CSS:

You can now add the HTML as explained above.

4.Remove the integration

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

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