Flask provides a flask-WTF extension that makes form handling easy and structured. This article provides a detailed undertanding of:
- What is Flask WTF?
- Features of Flask WTF.
- Create a simple contact Form using flask wtf extension
What is Flask WTF?
Flask WTF is a built-in module of flask which provides an alternative way of designing forms in flask.
Features of Flask WTF.
- Provides global CSRF protection.
- Provides Integration with web forms.
- Features reCAPTCHA support.
- Contains File upload that closely works with Flask Uploads More Flask WTF Features
Simple ContactForm using Flask.
Setup for using forms in Flask.
Environment set up
Install virtual environment (virtualenv)
Virtualenv is is a tool to create isolated Python environments.
It can be installed by using the following command;
pip install virtualenv
Once it is installed, we can create the new virtual environment into a folder as given below.
$ mkdir flaskforms
$ cd flaskforms
$ virtualenv venv
In this example, am using windows. Activate the virtual environment as follows;
$ venv\scripts\activate
Install flask as follows;
pip install flask
To use the WT forms, we need to install the flask-wtf library which can be installed using pip installer as follows;
pip install flask-wtf
File structure.
\-- flaskforms
|-- forms.py
|-- main.py
\-- templates
|-- contact.html
On form.py;
Import the Flask form as follows;
from flask_wtf import FlaskForm
Then import field types from the WTForms package, and validators from the wtforms.validators package as follows:
from flask_wtf import FlaskForm
#import required fields
from wtforms import StringField, TextAreaField, SubmitField
from wtforms.validators import DataRequired, Email
Create a Contact form by initializing a class that inherits the FlaskForm object:
class ContactForm(FlaskForm):
Our forms.py should be like this.
forms.py
from flask_wtf import FlaskForm
#import required fields
from wtforms import StringField, TextAreaField, SubmitField
from wtforms.validators import DataRequired, Email
#create instance of the for
class ContactForm(FlaskForm):
#initializing the fields
Firstname = StringField('firstname', validators=[DataRequired()])
Lastname = StringField('lastname', validators=[DataRequired()])
email = StringField('Password', validators=[DataRequired(),Email()])
message = TextAreaField('message',validators=[DataRequired()])
send = SubmitField('Send')
We have created a contact form with four input fields(Firstname, Lastname, email and message) as well as send field which is a button.
Each input field consist of:
Type of input- WTforms has a large collection of input types. in this case we have imported StringField, TextAreaField, SubmitField input types.
Read more about input fields
Label- It is the default value to assign to the field, if no form or object input is provided.
For example 'firstname' is the label.
Validators-It is a restriction put on a field that must be met for the user's input to be considered valid.
DataRequired validator ensures that the user fills in the form.
Email field has email validator Email() which validates email
Read more about Validators
Here's a blueprint of what an input field should contain:
field = FieldType(
'label',
validators=[ExampleValidator(message="ERROR MESSAGE")],
)
We now have a form class so we can create our flask app(main.py) and a route to render the ContactForm as follows:
from flask import Flask, render_template, request
from forms import ContactForm
app = Flask(__name__)
app.secret_key = 'development key'
@app.route('/contact', methods = ['GET', 'POST'])
def contact():
form=ContactForm()
if form.validate_on_submit():
return ' form submitted'
return render_template('contact.html', form=form)
if __name__ == '__main__':
app.run(debug = True)
From the above code;
- SECRET_KEY configuration variable is very important when working with flask WT forms as it uses it to protect web forms against a nasty attack called Cross-Site Request Forgery(CSRF).
- Our contact route accepts both GET and POST requests.
- Since we are using Flaskform base class to create a ContactForm routing is more simple.
- validate_on_submit() detects if a request is both a POST request and a valid request.
We can now render our form on contact.html as follows:
<html>
<head>
<title>Handling flaskforms</title>
<link rel="stylesheet" href="static/css/style.css">
<body>
<div class="form">
<form method="POST" action="">
{{form.csrf_token}}
{{form.firstname.label}}<br>
{{form.firstname}}
<br>
{{form.lastname.label}}<br>
{{form.lastname}}
<br>
{{form.email.label}}<br>
{{form.email}}
<br>
{{form.message.label}}<br>
{{form.message}}
<br><br>
{{form.send}}
</form>
</div>
</body>
</head>
</html>
Now we have our form here:
Top comments (0)