Handling Forms in Flask using Flask-WTF
Tags: python, webdev, 100daysofcode, programming
Published: 2021-10-01 14:15:56

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](https://flask-wtf.readthedocs.io/en/0.15.x/)

######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;

```python
from flask_wtf import FlaskForm
```

Then import field types  from the WTForms package, and validators from the wtforms.validators package as follows:

```python
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:

```python
class ContactForm(FlaskForm):
```
Our forms.py should be like this.

forms.py
```python
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]
(https://wtforms.readthedocs.io/en/2.3.x/fields/#basic-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](https://wtforms.readthedocs.io/en/2.3.x/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:
```python
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
<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:

![Screenshot (141)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qg21zqm10gr5bhzwttx.png)
 
[Full source code](https://github.com/Phylis123/Handling-Forms-in-Flask-using-Flask-WTF)