Multiple instances of Google reCaptcha

Question

I used google reCaptcha for my website and my login and register form are in same page and when I use reCaptcha twice, the second captcha doesn't work.

I used this code for login and register form:

<div class="g-recaptcha" data-sitekey="********"></div>

Any body can help me to solve it ?

https://www.google.com/recaptcha/

Answer 1

By using the following code I fixed that problem:

form:

<div id="captcha"></div>

head:

var captchaCallback = function() {
    grecaptcha.render('captcha', {
        'sitekey' : ''
    });
};

</script>

<script src="//www.google.com/recaptcha/api.js?onload=captchaCallback&render=explicit&hl=en" async defer></script>

Answer 2

Only Answer: You can't.

It's not possible to do that with reCAPTCHA. Only one CAPTCHA is supported in a page at any time. It seems that multiple forms on the same page must share a CAPTCHA, unless you're willing to use a different CAPTCHA.

You can just put login on one page and register on another, because that's all you can do. Or you can use more JavaScript and load another CAPTCHA after the form is loaded.