How to have two recaptchas on one page?

How to have two recaptchas on one page?

Quite easy, you need to tweak your default code as it follows.

Javascript code:

1
2
3
4
5
6
7
// JavaScript Document
var ReCaptchaCallback = function() {
$('.g-recaptcha').each(function(){
var el = $(this);
grecaptcha.render(el.get(0), {'sitekey' : el.data("sitekey")});
});  
};

Google recatcpha cdn:

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

Your form code with the recaptchas:

3
4
5
<div class="g-recaptcha" data-sitekey="enter the key"></div>
 
<div class="g-recaptcha" data-sitekey="enter the key"></div>

Create a blank page with the code so you can see first how it works.

Add a comment: