Handling Forms in Flask using Flask-WTF

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:

Full source code