Uncaught Error: Recaptcha Placeholder Element Must Be An Element Or Id

I'm adding ReCAPTCHA to a (Bootstrap Jekyll) website that has multiple contact forms. There's a popup modal in the footer, an occasional 'contact us now' section, and also a 'reque

Solution 1:

This works for me:

varCaptchaCallback = function() {
    if ( $('#RecaptchaField1').length ) {
        grecaptcha.render('RecaptchaField1', {'sitekey' : 'my_sitekey'
        });
    }
    if ( $('#RecaptchaField2').length ) {
       grecaptcha.render('RecaptchaField2', {'sitekey' : 'my_sitekey'
       });
    }
};

Solution 2:

I got the same issue and this solution didn't work for me, but I have found one.

The fact was I used the plugin wordpress Contact form 7 and , unfortunately, I have written the keys of recaptcha in the integration part.

This made the function recaptcha/api.js was called twice and made this error.

So I have just deleted the plugin and reinstall it without fill the integration part and called the recatpcha in the files header.php and footer.php and that works :)

And don't forget to put the button recaptcha in the contact form

<div class="g-recaptcha"id="YOUR-ID" data-sitekey="YOUR-KEY" render="explicit"></div>

Solution 3:

You can also use this in pure java script way

grecaptcha.render(document.getElementById('RecaptchaField1'), {
      'sitekey' : 'my_sitekey'
    });