Collection error: ReCAPTCHA placeholder must be an element or identifier

Question

I am adding ReCAPTCHA to the site (Bootstrap Jekyll) with several contact forms. There is a popup in the footer, sometimes “contact us now” and also “request more information about ____” on several pages.

Since I have several contact forms on the same page, I had to explicitly display each ReCAPTCHA. Here is the code for this:

In my javascript:

var CaptchaCallback = function() { grecaptcha.render('RecaptchaField1', {'sitekey' : 'my_sitekey' }); grecaptcha.render('RecaptchaField2', {'sitekey' : 'my_sitekey' }); }; 

In the footer (included on all pages)

 <div id="RecaptchaField1"></div> 

(and at the bottom of the footer)

 <script src='https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit' async defer></script> 

This works well on a page with two separate contact forms (i.e. I have another div on the page with the RecaptchaField2 identifier), but if I land on a page that has only one contact form, the console throws an error (unclean error: element ReCAPTCHA placeholder must be an element or identifier).

ReCAPTCHA seems to work, but can someone help me figure out what causes this error? All studies show that he imported the library twice, but I assume that this is not so, since the problem only occurs on some pages, and not on others.

Thanks!

Answer 1

This works for me:

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