Bad Request/form not defined on modal form submit to email - flask - forms

Question

I am trying to submit a modal form with various input data to my email through my flask app, but am getting 400 bad request error or "form is not defined" error because I tried using this line in the function:
form = modal1form(request.form)
Not sure whats wrong here - note: modal is located at /dashboard/projects/#modal1
Thanks
# new project function
#app.route('/dashboard/projects/#modal1form/', methods=["GET","POST"])
def new_project():
try:
if request.method == "POST":
if form.validate() == False:
flash('Invalid! All fields are required.')
return redirect(url_for('new_project'))
else:
msg = Message(request.form['name'], sender='request.form["email"]', recipients=['myemail#gmail.com'])
msg.body = """
From: %s %s \n
%s \n \n %s \n \n %s \n %s \n
%s
""" % (request.form['wtype', 'wpack', 'bts', 'fts', 'comments'])
mail.send(msg)
flash('Congratulations! A new project has been submitted.')
gc.collect()
return render_template('dashboardProjects.html')
elif request.method == 'GET':
return render_template("dashboardProjects.html")
except Exception as e:
return(str(e))
modal form
<div id="modal1" class="modal fade">
<form method="post" action="{{ url_for('new_project') }}" role="form" id="modal1form" name="modal1form">
<div class="form-group text-center">
<label for="name" class="control-label text-center"> Name </label>
<input type="text" class="form-control" name="name" id="name" placeholder="Your Name">
</div>
<div class="form-group text-center">
<label for="email" class="text-center"> Email Address </label>
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email">
</div>
<div class="col-md-3 col-md-offset-1">
<div class="form-group"> <br>
<label for="wtype"> Website Type </label> <br>
<h5 class="form-check-inline">
<input class="form-check-input" type="checkbox" name="wtype" id="wtype1" value="Static"> Static
</h5>
<h5 class="form-check-inline">
<input class="form-check-input" type="checkbox" name="wtype" id="wtype2" value="Blog"> Blog
</h5>
</div>
</div>
<br>
<div class="col-md-4 col-md-offset-1">
<div class="form-group">
<label for="wpack"> Website Package </label> <br>
<h5 class="form-check-inline">
<input class="form-check-input" name="wpack" type="radio" id="wpack2" value="Blog"> Basic
</h5>
<h5 class="form-check-inline">
<input class="form-check-input" name="wpack" type="radio" id="wpack3" value="Ecommerce"> Standard <br>
</h5>
</div>
</div>
<li class="dropdown pull-right list-unstyled" aria-expanded="false" style="position: top;"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" style="font-size: 14px;"> <span class="caret"></span> <label for="template"> <i class="fa fa-cube"></i> Template </label> </a>
<ul class="dropdown-menu list-unstyled">
<li><h5 class="text-center"> <i class="fa fa-cubes"></i> Templates</h5></li>
<li><input name="bts" type="radio"/> Basic Template 1</li>
<li><input name="bts" type="radio"/> Basic Template 2</li>
<li role="separator" class="divider"></li>
<li><input name="fts" type="radio"/> Footer 1</li>
</ul>
</li>
</div>
<div class="form-group text-center"> <br>
<label for="comments"> Other Details </label>
<textarea name="comments" class="form-control" id="comments" placeholder="Additional comments, ideas, requests, questions?"></textarea>
<p class="help-block"> </p>
</div>
</form>
</div>
<div class="modal-footer brick">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-success" form="modal1form">Submit</button>
</div>

Answer 1

ERROR 1: form is not defined
If you want to use Flask-WTF, you must create a Form, like this:
from flask import Flask, render_template
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
from wtforms.validators import DateRrequired
app = Flask(__name__)
app.config['SECRET_KEY'] = 'a very secret string'
class MyForm(FlaskForm):
name = StringForm('Your Name', validators=[DataRequired()])
submit = SubmitField()
app.route('/', methods=['GET', 'POST'])
def index():
form = MyForm()
if form.validate_on_submit():
name = form.name.data
...
return render_template('index.html', form=form)
Then you need to render the form in HTML template:
<form method="post">
{{ form.name() }}
{{ form.submit() }}
</form>
ERROR 2: 400 Bad request
In Flask, if you get form data by request.form['name'], you must be ensure this input have value, that's why you get the 400 error. Instead, I recommend you to use request.form.get('name', default_value), you can set a default value (as second argument) to avoid 400 error.
More details:
flask.pocoo.org/docs/0.11/patterns/wtforms
Hope it will help you.
Maybe ERROR 3: Bootstrap Modal
You can't open a modal with anchor name, like example.com#MyModal, but other modal plugin can. Check my answer on another question about this.