WPForms Wordpress and Double Captchas Problem: Uncaught Error: reCAPTCHA placeholder element must be empty OR Error for site owner: Invalid site key

Problem:

While helping a company with their WordPress website, I came across an interesting problem. I had enabled Turnstile captcha (from Cloudflare) but was also randomly getting Google's reCAPTCHA displayed along with it. However, I did not have Google reCAPTCHA enabled within the plugin. 

After reaching out to the makers of the form plugin, WPForms, they said it was a theme issue. The theme this site is using was Avada - and yes, plugins and themes are all up-to-date. Avada said the problem is WPForms. At one point, WPForms asked me to change to a default theme and see if the problem went away. It did. So they concluded it was a theme problem. 

With each company blaming the other, I realized I would have to be the one to figure this out. 

Solution (or answers):

After some poking around in their code, here is what I found. They both are at fault. Let me explain. 

WPForms injects a div with the form, which contains the class name g-recaptcha. This class name is then used by their JavaScript frontend code, and their CSS. If I was using Google's reCAPTCHA, this would not be an issue. However, they use this class name no matter which captcha solution you want to use on your forms. 

Now Avada for some strange reason is including Google's reCAPTCHA api.js file on every page... even after disabling their theme controlled captcha solution.  Again, if I am using Google reCAPTCHA, this is not a huge problem. This code by default looks for an element with g-recaptcha, and injects the Google reCAPTCHA element. However, in this case, because WPForms is using the g-recaptcha class no matter what kind of captcha is meant to be used, the Google reCAPTCHA will either:

1) Load onto the page, presenting 2 captchas; or,

2) Print an error "Uncaught Error: reCAPTCHA placeholder element must be empty" in the console, because it expected the container to be empty and it wasn't

This is a race condition and just depends on which code runs first. 

This also explains why disabling the theme "fixed" the problem - the Google reCAPTCHA API file was not loading on the default theme. But, that forms not using the WPForms plugin, also were "fixed" because the captcha container did not incorrectly have the Google class name. 

My decision? I determined that WPForms is primarily at fault here. They should be defensively programming their plugin since they should have little control over what JavaScript files are included on the page. There potentially could be a case where someone wishes to have two different captcha providers on the same page. I have reached out to the company and hopefully they will have a fix out soon enough.

Obviously, it's bad form for Avada to be including an unused JavaScript file as well, but simply less egregious.