Complianz creates bug in Elementor page

Hi @tomkelly33,

It certainly can be fixed, there are a couple of choices.

1. You can disable the integration reCaptcha, and this will disappear, but this will stop blocking reCaptcha.
2. You add an HTML field to your form and hide this issue with CSS or a filter, https://complianz.io/blocking-recaptcha-manually/
3. You can use CSS for the current placeholder; you add this to your page’s Custom CSS in Elementor. For responsiveness you can use media queries like

@media screen and (max-width: 992px) {} for example, to adjust the width based on the screen size. Below CSS will work on desktop and devices 600px+

.cmplz-placeholder-24 {
    height: 90px;
    width: 625px;
    margin-bottom: 4px;
    margin-top: -2px;

regards Aert

Hi @tomkelly33,

If you need help with either choice, please let me know.

regards Aert

Hi Aert, I added the custom css to my theme and it worked perfectly, thanks for the fast help!

I applied the same code to another site but here it doesn’t see to fix it. Why is that? See below: https://menu-digital.eu/

Hi @tomkelly33,

In this case use:

.cmplz-placeholder-2 {
    height: 90px;
    width: 625px;
    margin-bottom: 4px;
    margin-top: -2px;
}

The number for the placeholder is important. I’m writing an article right now that will be available soon on https://complianz.io/elementor-recaptcha-and-the-native-form

regards Aert

Great, thank you!

Hi Aert,
I tried both css codes to fix the captcha bug in this website but it won’t work.
https://prometheusanimation.de/
In addition my site warns me that the code contains errors and may break my site. How can we fix this?

Hi @tomkelly33,

Because you will need to find the ID of the placeholder, it’s different for each website.

I will create a video to show how to find the ID

I will summarize the best way to enable the HTML option specifically for Elementor.

I’ll be back soon,

regards Aert

Oh, I see. Is there a tutorial in your blog about this?

Hi @tomkelly33,

Let’s start with the definite option;

Removing the placeholder and adding a new one;

Add the below filter to your functions.php or in a MU Plugin (recommended):
(Manual:https://complianz.io/adding-filters-with-mu-plugins-quick-easy/)

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

Then add the below HTML to an HTML field in your Elementor form:

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

You can rephrase the words of course:

Source: https://complianz.io/elementor-recaptcha-and-the-native-form/

Can I not use the previous solution, which sounds way less complicated and worked on 2 other sites successfully? ?? It cannot be that difficult to find out the place holder ID, right … Thanks for your support.

Hi @tomkelly33,

For the above; you can also use CSS instead of the filter:

.cmplz-placeholder-21 {
display:none;
}

Then proceed to add an HTML field to your Elementor form with the HTML as shown above. You will get this result: https://demo.complianz.io/elementor-form/

To find the correct placeholder, please check this video: https://www.loom.com/share/5e746ee2bead493185a6dc38ad744895