Trouble adding second reCAPTCHA. Have Contact Form 7 w/ reCAPTCHA

Question

I have a Wordpress site, that uses the Contact Form 7 plugin and the reCAPTCHA functionality that comes with that, and that works great. I just put that part in place, everything is automatic. But now I'm trying to add a reCAPTCHA to another form (on page form1.php) that isn't set up with Contact Form 7. This is on a PHP page that basically includes the Wordpress header and footer, but does its own thing in the middle. One key point is that the footer includes one of the forms from Contact Form 7, so it's on every page on the site.

I followed Google's instructions, forgetting I had the footer form. Then I saw an error in Firebug Error: ReCAPTCHA placeholder element must be empty

That brought me to this StackOverflow topic here. The only answer there by user easy going says that they had the same error when they realized they had imported the library twice.

Ok, that's what I did too I realized. So, I can remove the script inclusion of https://www.google.com/recaptcha/api.js in my code since it's already included by Contact Form 7 (I see it in the source). I noticed Google had instructions for rendering multiple widgets, I checked it out. But the problem is that the script include line specifies the onload callback function. Big problem. I can't change that because Contact Form 7 puts that in, and I can't make a callback function of the same name since it's already used. Of course I don't want to mess with anything that Contact Form 7 does. But as a result, I don't know how to get it to call my callback function in form1.php which is where my HTML element is specified to render the captcha.

Do you see any way around this issue? Any help is greatly appreciated!

Answer 1

Here is the resolution:

1. Contact Form 7 supports multiple reCaptcha, just need the right HTML markup to use it.

2. As you can see in the wp-content\plugins\contact-form-7\modules\recaptcha.php, and also in the HTML, the trick is:

   • Your non-CF7 reCaptcha must be just inside a form element, like this:

var verifyCallbackY = function(response) {
    /** your stuff... */
    alert(response);
};

<form id="recaptcha-cf7-migr"> <!-- the form element is important! This is what CF7 fetch one by one to find recaptchas... -->
    <div
        id='yRecaptcha'
        class="wpcf7-form-control g-recaptcha wpcf7-recaptcha captcha-hfs"
        data-sitekey="*********************************qkuila"
        data-callback="verifyCallbackY"></div>
</form>