python - WTForms when rendering two forms on the same page with a Recaptcha fields only one is displayed -

python - WTForms when rendering two forms on the same page with a Recaptcha fields only one is displayed -

i using flask wtforms. using wtfrecaptcha plugin in order utilize captcha fields.

turns out need utilize 2 forms on same page. when assign captcha field on each form, 1 of captchas not rendered on .html page. because captcha created same id:

captcha , forms declaration on forms.py file:

from wtforms import passwordfield, stringfield, validators, widgets, radiofield wtforms.form import form wtfrecaptcha.fields import recaptchafield class firstform(form): """first form""" #omitting fields here captcha_1 = recaptchafield('captcha', [], public_key='omitting_public_key', private_key='omitting_private_key', secure=true) class secondform(form): """second form""" #omitting fields here captcha_2 = recaptchafield('captcha', [], public_key='omitting_public_key', private_key='omitting_private_key', secure=true)

route declaration:

#!/usr/bin/env python flask import flask, render_template, request flask.ext.assets import environment forms import firstform, secondform flask import request flask import jsonify @app.route('/test') def test_form(): """test.""" form_1 = firstform(request.form, captcha_1={'ip_address': request.remote_addr}) form_2 = secondform(request.form, captcha_2={'ip_address': request.remote_addr}) if request.method == 'post' , (form_1.validate() or form_2.validate()) : homecoming "instructions have been sent e-mail" homecoming render_template( 'test-form.html', title='get started', form_1=form_1, form_2=form_2 )

test-form.html

{% extends "base.html" %} {% block content %} <div class="container block-form"> <div class="row first"> <div class="col-xs-12 col-md-7 border-right"> <h1 class="title">{{ title }}</h1> <p>{{ description }}</p> <div class="form-area"> <form method="post"> {% field in form_1 %} <div class="form-group{% if field.errors %} has-error has-feedback{% endif %}"> <div class="row"> <div class="col-xs-12 col-md-4"> {{ field.label(class="control-label") }} </div> <div class="col-xs-12 col-md-8"> {{ field(class="form-control") | safe }} </div> </div> {% if field.errors %} <span class="glyphicon glyphicon-remove form-control-feedback"></span> {% endif %} {% error in field.errors %} <p class="help-block text-danger"> <span class="glyphicon glyphicon-remove"></span> {{ error }} </p> {% endfor %} </div> {% endfor %} <br> <button type="submit" class="btn btn-gradient">submit</button> </form> </div> </div> </div> <div class="row second"> <div class="col-xs-12 col-md-7 border-right"> <h1 class="title">{{ title }}</h1> <p>{{ description }}</p> <div class="form-area"> <form method="post"> {% field in form_2 %} <div class="form-group{% if field.errors %} has-error has-feedback{% endif %}"> <div class="row"> <div class="col-xs-12 col-md-4"> {{ field.label(class="control-label") }} </div> <div class="col-xs-12 col-md-8"> {{ field(class="form-control") | safe }} </div> </div> {% if field.errors %} <span class="glyphicon glyphicon-remove form-control-feedback"></span> {% endif %} {% error in field.errors %} <p class="help-block text-danger"> <span class="glyphicon glyphicon-remove"></span> {{ error }} </p> {% endfor %} </div> {% endfor %} <br> <button type="submit" class="btn btn-gradient">submit</button> </form> </div> </div> </div> </div> {% endblock %}

code rendered captcha in form_1 (up div element):

<script src="https://www.google.com/recaptcha/api/challenge?k=6lecjvusaaaaaavqwjeuevdv0wynlptx6kwstdxp" type="text/javascript"> //other code here omitted <script src="https://www.google.com/recaptcha/api/js/recaptcha.js" type="text/javascript"> //other code here omitted <div id="recaptcha_widget_div" class=" recaptcha_nothad_incorrect_sol recaptcha_isnot_showing_audio">

code rendered captcha in form_2 (up div element):

<script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k=6lecjvusaaaaaavqwjeuevdv0wynlptx6kwstdxp"> <script type="text/javascript" src="https://www.google.com/recaptcha/api/js/recaptcha.js"/> <div id="recaptcha_widget_div" style="display: none;"/> <noscript><iframe src="https://www.google.com/recaptcha/api/noscript?k=6lecjvusaaaaaavqwjeuevdv0wynlptx6kwstdxp" height="300" width="500" frameborder="0"></iframe> <br> <textarea name="recaptcha_challenge_field" rows="3" cols="40"> </textarea> <input type="hidden" name="recaptcha_response_field" value="manual_challenge"></noscript>

result: 1 captcha shown.

... hence if have 2 captcha fields (possible on 2 different forms), 1 won't display.

any solutions/suggestions?

this good documented limitation of recaptcha

currently, google captcha mechanism offer 1 captcha form per page

i encourage rethink way organizing page. forms in html simple design. of tooling built around them assumes page 1 thing , submits result server in single form submission.

disclaimer: don't know code. proceeding regardless: smells design might clever. mean if haven't seen done somewhere else , google's tooling doesn't back upwards issue approach.

if need commit result of single stateless transaction <form> appropriate , wtforms great tool generate it. if need richer might consider following:

break forms out multiple pages. simple set of hyperlinks can provide navigable hierarchy. build dom javascript , submit restful endpoint(you can utilize wtforms validation converting request body multidict , recaptcha supports ajax) build <form> dynamically javascript , switch action correspond right form processor on server.

python recaptcha wtforms flask-wtforms