Multiple forms with ReCaptchas on the same page

I saw a few other threads asking about this but they were all old and locked without a solution. (Such as https://www.chronoengine.com/forums/posts/f2/t98259/multiple-forms-recaptchas.html)

I have a page with two forms, each having a ReCaptcha block. They work fine if I only have one or the other displayed, but once I show both, the ReCaptchas don't work.

I used the info here to fix this problem: http://mycodde.blogspot.com/2014/12/multiple-recaptcha-demo-same-page.html

Form #1:
- Custom code block with recaptcha1 div, do NOT use the ReCaptcha block
- On load, Load JavaScript action with API URL and JS code, do NOT use Load ReCaptcha action
- On submit, Check ReCaptcha action like normal

Form #2:
- Custom code block with recaptcha2 div, do NOT use the ReCaptcha block
- On load, do NOT use Load JavaScript or Load ReCaptcha.
- On submit, Check ReCaptcha action like normal

Form #1 still works on pages by itself, but Form #2 will only work on pages with Form #1 displayed too.

Maybe from here someone can come up with a better solution, but at least this is better than nothing! 🙂

One typo: on Form #2, it should be recaptcha2 div, not recaptcha1 again.

I followed these steps, but unfortunately could not get the captcha to render on either form. The Javascript is loading, but the custom div is not displaying the recaptcha item.

Bummed

1. Paste this script into template before </head>

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

2. a) Сreate JS file called, for example - googlecaptcha.js
b) The contents of the file:

var onloadCallback = function() {
        grecaptcha.render('recaptcha1', {'sitekey' : '6Lc_your_site_key', 'theme' : 'light' });  
        grecaptcha.render('recaptcha2', {'sitekey' : '6Lc_your_site_key', 'theme' : 'light' }); 
        grecaptcha.render('recaptcha3', {'sitekey' : '6Lc_your_site_key', 'theme' : 'light' });          
      };

c) Put this file in the root of the site
d) Insert into template before </head>

 <script src="/googlecaptcha.js"></script>

3. Work with the component ChronoForms. Create form
a) DO NOT use the ReCaptcha block . Create custom block with <div id="recaptcha1"></div> (for second form <div id="recaptcha2"></div>, for third form <div id="recaptcha3"></div> etc)
b) On Load block .... DO NOT use Load ReCaptcha or Load GoogleNoCaptcha and DO NOT use Load JavaScript
с) On Submit block .... Create Check GoogleNoCaptcha

that's all... this way works for me

When you add another form to the page, DONT FORGET to add DIV ID to the your script "googlecaptcha.js" in the site root!