'Django reCAPTCHA with multiple forms

I have a DJANGO application where I protect forms with reCAPTCHA v2 invisible. I have no issue protecting 1 form, everything works well and I have been using this feature for quite some time.

However, if I have 2 forms on the same page (e.g. in separate modal windows), EACH protected with their own captcha, it doesn't work.

Here's what happens:

  • OK: both forms have their individual onSubmit_xxx and onSubmit_yyy function (with a different widget uuid)
  • OK: both forms get their "submit" event properly redirected to the verifyCaptcha_xxx or verifyCaptcha_yyy function
  • NOK: after grecaptcha.execute(), ALWAYS the onSubmit_xxx function (of the first form) is executed (with the wrong widget uuid) and therefore the wrong form is submitted

I am using Django 2.1.3 with Python 3.5 and django-recaptch v2.0.6

Any hints? Thanks a lot!!


As requested some further information on how I implemented form, view and template:

app1: forms.py

from captcha.fields import ReCaptchaField
from captcha.widgets import ReCaptchaV2Invisible

form1_captcha = ReCaptchaField(widget=ReCaptchaV2Invisible(
        attrs={
            'data-callback': 'submit_form1',
        }
))

app2: forms.py

...
form2_captcha = ReCaptchaField(widget=ReCaptchaV2Invisible(
        attrs={
            'data-callback': 'submit_form2',
        }
))

and so on.

app_n: views.py | n=1, 2...

form_class = app<n>Form  
return render(request, 'index.html', {'app_<n>_form':form_class,})

template:

<form id="form_<n>" role="form" action="" method="post">
{% csrf_token %}
{{ app_<n>_form.captcha }}
                      
<script>
  // For IE 11, bind "closest" function to DOM Element for compatibility                                        
  $(".g-recaptcha")[0].closest = function(a) { 
    return $(this).closest(a)[0];                                           
  }
</script>
</form>






Solution 1:[1]

I had a similar problem. The django-recaptcha package doesn't allow to show multiple recaptchas on a single page. I solved it following this:

https://github.com/torchbox/django-recaptcha/issues/75#issuecomment-343979279

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 LaCharcaSoftware