How do I show multiple recaptchas on a single page? Multiple forms in same view.

[JakubMusil]

[nicolasmendoza]

why do you need show multiples recaptchas on a single page?..if you really need validate only 1 request. I don't understand.

[JakubMusil]

Page have two forms. Each form is in another bootstrap tab, and each form go to a different page.

[kbytesys]

With plain html+javascript code you can use explitic and put the recaptcha to different divs:

http://mycodde.blogspot.it/2014/12/multiple-recaptcha-demo-same-page.html

I think you can add two field options for explicit and target div. ATM I don't have much time to work on it. I home someone will implement this.

[welkensoyo]

I would use invisible recaptcha. Then on your button use a tag like " formname='yourformname' " to specify which form is to be submitted and hide a submit form input.

The advantage of this is it allows for you to keep the html5 form validation intact, one recaptcha, but multiple button interfaces. Just capture the "captcha" input value for the token key generated by recaptcha.

<script src="https://www.google.com/recaptcha/api.js" async defer ></script>

<div class="g-recaptcha" data-sitekey="yours" data-callback="onSubmit" data-size="invisible"></div>
<script>
var formname = ''
$('button').on('click', function () { 
    formname = '#'+$(this).attr('formname');
    if ( $(formname)[0].checkValidity() == true) { grecaptcha.execute(); }
    else { $(formname).find('input[type="submit"]').click() }
    });

var onSubmit = function(token) {
    $(formname).append("<input type='hidden' name='captcha' value='"+token+"' />");
    $(formname).find('input[type="submit"]').click()
    };
</script>

I find this FAR simpler and easier to manage.

[jffr]

This is an old discussion, but I wanted to share an alternative solution: Querying all the elements with the attribute data-widget-uuid. The list will also include duplicate form elements with the same widget uuid. After iterating through the list all the elements will have a unique token.

<script type="text/javascript">
    grecaptcha.ready(function () {
        function setToken (element) {
            grecaptcha.execute('{{ public_key }}', { action: 'form' })
                .then(function (token) {
                    element.value = token
                })
        }

        var elements = document.querySelectorAll('.g-recaptcha[data-widget-uuid="{{ widget_uuid }}"]')
        elements.forEach((element) => {
            setToken(element)
            setInterval(function () { setToken(element) }, 120 * 1000) // This is an extra fix for time-out issues, may be discarded.
        })
    })
</script>

One benefit is that it stays close to the default implementation of django-recaptcha. Which is the following:

{# The provided implementation caters for only one reCAPTCHA on a page. Override this template and its logic as needed. #}
<script src="https://{{ recaptcha_domain }}/recaptcha/api.js?render={{ public_key }}{% if api_params %}&{{ api_params }}{% endif %}"></script>
<script type="text/javascript">
    grecaptcha.ready(function() {
        grecaptcha.execute('{{ public_key }}', {action: 'form'})
        .then(function(token) {
            console.log("reCAPTCHA validated for 'data-widget-uuid=\"{{ widget_uuid }}\"'. Setting input value...")
            var element = document.querySelector('.g-recaptcha[data-widget-uuid="{{ widget_uuid }}"]');
            element.value = token;
        });
    });
</script>

You can override the logic by following the guide: https://pypi.org/project/django-recaptcha/#widgets