How to Show Multiple Recaptchas on a Single Page

How do I show multiple recaptchas on a single page?

A similar question was asked about doing this on an ASP page (link) and the consensus over there was that it was not possible to do with recaptcha. It seems that multiple forms on a single page must share the captcha, unless you're willing to use a different captcha. If you are not locked into recaptcha a good library to take a look at is the Zend Frameworks Zend_Captcha component (link). It contains a few

how to enable Multiple reCAPTCHA in single page

you can try this adding new class in a second recaptcha loader button then you bind event on that class with click event and again clone your node and also used setTimeout function which will wait for redraw captcha
Hope this will help you

 setTimeout(function() {
        $( "#resumator-recaptcha #recaptcha_widget_div #recaptcha_reload_btn " ).addClass("reload_captcha");


         $(document).on('click', '.reload_captcha', function(e){
             $('#resumator-recaptcha-label').html($('#resumator-recaptcha_forward').clone(true,true));

             $( "#resumator-recaptcha #recaptcha_widget_div #recaptcha_reload_btn " ).addClass("reload_captcha");


        });

    }, 2000);

How to add multiple invisible recaptcha in single page?

Below a more reliable solution to Peter and Alessandro answers when nesting elements.

<script>
$(".g-recaptcha").each(function() {
    var object = $(this);
    grecaptcha.render(object.attr("id"), {
        "sitekey" : "6LdwRC0UAAAAAK0hjA8O4y1tViGPk9ypXEH_LU22",
        "callback" : function(token) {
            object.parents('form').find(".g-recaptcha-response").val(token);
            object.parents('form').submit();
        }
    });
});
</script>

<form>
    <input type="text" name="example"/>
    <button id="captcha1" class="g-recaptcha">submit form 1</button>
</form>

<form>
    <input type="text" name="example"/>
    <button id="captcha2" class="g-recaptcha">submit form 2</button>
</form>

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

Validate multiple recaptcha (V2) on the same page

Simplest Way to validate as much g-captcha validate

First you include api.js before </head> tag as per below

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

Add this code in your HTML

<div class="g-recaptcha-contact" data-sitekey="Your Site Key" id="RecaptchaField2"></div>
<input type="hidden" class="hiddenRecaptcha" name="ct_hiddenRecaptcha" id="ct_hiddenRecaptcha">

<div class="g-recaptcha-quote" data-sitekey="Your Site Key" id="RecaptchaField1"></div>
<input type="hidden" class="hiddenRecaptcha" name="qt_hiddenRecaptcha" id="qt_hiddenRecaptcha">

After you add this code in footer with <script> tag

var CaptchaCallback = function() {
    var widgetId1;
    var widgetId2;
    widgetId1 = grecaptcha.render('RecaptchaField1', {'sitekey' : 'Your Site Key', 'callback' : correctCaptcha_quote});
    widgetId2 = grecaptcha.render('RecaptchaField2', {'sitekey' : 'Your Site Key', 'callback' : correctCaptcha_contact});
};
var correctCaptcha_quote = function(response) {
    $("#qt_hiddenRecaptcha").val(response);
};
var correctCaptcha_contact = function(response) {
    $("#ct_hiddenRecaptcha").val(response);
};

And Last easy step for developer add Jquery Validation as per below

$("#form_id").validate({
    ignore: [],
    rules: {
        ct_hiddenRecaptcha: { required: true, },
        qt_hiddenRecaptcha: { required: true, },
    },
});

---

Related Topics