reCaptcha V3 Integration Causing Form Submission Errors

Hi Team,

We have starting facing an issue with our CF7 form submissions when the integration with recaptcha V3 keys is active.

If we remove the keys, the form works fine.

Here are the browser console errors that we get when the form submissions are blocked:

TypeError: Cannot set properties of null (setting ‘innerText’)
at d (index.js?ver=5.8.5:1:7357)
at index.js?ver=5.8.5:1:7105
at index.js?ver=5.8.5:1:1127
at index.js?ver=5.8.5:1:8157
at index.js?ver=5.8.5:1:1127
at n (index.js?ver=5.8.5:1:1941)
at l (index.js?ver=5.8.5:1:6212)
at index.js?ver=5.8.5:1:429
(anonymous) @ index.js?ver=5.8.5:1
Promise.then (async)
catch @ recaptcha__en.js:385
o @ index.js?ver=5.8.5:1
wpcf7.submit @ index.js?ver=5.8.5:1
(anonymous) @ index.js?ver=5.8.5:1

If I click on the error causing js link, the error is in the highlighted line of code in the following block:

document.addEventListener("DOMContentLoaded", (e=>{
var t;
wpcf7_recaptcha = {
…null !== (t = wpcf7_recaptcha) && void 0 !== t ? t : {}
};
const c = wpcf7_recaptcha.sitekey
, {homepage: n, contactform: a} = wpcf7_recaptcha.actions
, o = e=>{
const {action: t, func: n, params: a} = e;
grecaptcha.execute(c, {
action: t
}).then((e=>{
const c = new CustomEvent("wpcf7grecaptchaexecuted",{
detail: {
action: t,
token: e
}
});
document.dispatchEvent(c)
}
)).then((()=>{
"function" == typeof n && n(…a)
}
)).catch((e=>console.error(e)))
}
;

As soon as we remove the captcha keys, form submissions work fine but spammers have a field day with our contact form.

Please help solve this.

FYI – we have the latest version of Contact Form 7 (5.8.5) installed and are also on the latest WordPress version (6.4.2).

Also, we have removed captcha for now since our client needs at least valid submissions to go through; they are bearing with spam, for the moment.

Thanks!

• This topic was modified 11 months ago by LearnEd Studio.

The page I need help with: [log in to see the link]