This is a tutorial meant to introduce us two important concepts when working with any Framework. You can basically use this sort of example to gaugle how easy a web application framework is.

In this case we will see how to work with wtForms in Flask. Then in the process we make HTTP GET and HTTP POST requests, the latter first.

So the user enters the registeration details in the Form Fields and clicks register. A HTTP POST request is made to the server and a response is served to the user using a HTTP GET request.

At the end of the day we are making a Registeration Form example.

We are Building a Vibrant YouTube Community

We have a fast rising YouTube Channel of friends. So far we’ve accumulated more than 2.6 million agreggate views and more than 10,000 subscribeers. Here’s the Channel: ProgrammingWizards TV.

Please go ahead subscribe(free obviously) as well. If you have a question or a comment you can post there instead of in this site.People are suggesting us tutorials to do there so you can too.

Here’s this tutorial in Video Format.

Let’s start.

index.py

from flask import Flask, render_template, flash, request
from wtforms import Form, TextField, TextAreaField, validators, StringField, SubmitField

# App config.

app = Flask(__name__)
app.config.from_object(__name__)
app.config['SECRET_KEY'] = 'ert352gd362dhgdvkcbvajdsh563bhds7qbsgvsd'

# Signup Form 
class RegisterationForm(Form):
    name = TextField('Name:', validators=[validators.required()])
    email = TextField('Email:', validators=[validators.required(), validators.Length(min=5, max=40)])
    password = TextField('Password:', validators=[validators.required(), validators.Length(min=5, max=40)])
    confirm_password = TextField('Confirm Password:', validators=[validators.required(), validators.Length(min=5, max=40)])

# Route root url to register function
@app.route("/", methods=['GET', 'POST'])
def register():
    registerationForm = RegisterationForm(request.form)

    print(registerationForm.errors)
    if request.method == 'POST':
        name=request.form['name']
        password=request.form['password']
        confirm_password=request.form['confirm_password']
        email=request.form['email']
        print(name, " ", email, " ", password)

        if password != confirm_password:
            flash("Error: " + ' Password and Confirmation Password do not match! Type again.')
        elif registerationForm.validate():
            flash(name + ' You have successfully been Registered ')
        else:
            flash('Error: Please Supply All Details we get Started. ')

    return render_template('index.html', form=registerationForm,header="Camposha.info",sub_header="Registeration Form")

# run flask app 
if __name__ == '__main__':
    app.run(debug=True)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ site_title }}</title>

    <!-- CSS  -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="{{ url_for('static',filename='css/materialize.min.css') }}" type="text/css" rel="stylesheet"
          media="screen,projection"/>
    <link href="{{ url_for('static',filename='css/style.css') }}" type="text/css" rel="stylesheet"
          media="screen,projection"/>

</head>

<body>
<!--NAVIGATION BAR-->
<nav class="light-blue lighten-1" role="navigation">
    <div class="nav-wrapper container"><a id="logo-container" href="" class="brand-logo">{{ site_title }}</a>
        <ul class="right hide-on-med-and-down">
            <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
        </ul>
        <a href="" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
    </div>
</nav>

<!--CONTAINER-->
<div class="container">
    <h1 class="header center orange-text">{{ header }}</h1>
    <h4 class="center light-blue-text">{{ sub_header }}</h4>

    <p>PLease Fill the Form below to Get Started.</p>
    <div class="row">
  <form  action="" method="post" role="form">
    {{ form.csrf }}
    <div class="form-group">
      <label for="name">Name:</label>
      <input type="text" class="form-control" id="name" name="name" placeholder="Type name here...">
      <br>
      <label for="email">Email:</label>
      <input type="text" class="form-control" id="email" name="email" placeholder="Type email here...">
      <br>
      <label for="password">Password:</label>
      <input type="password" class="form-control" id="password" name="password" placeholder="Type Password here...">
      <label for="password">Confirm Password:</label>
      <input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="Type Password Again here...">

    </div>
    <button type="submit" class="btn btn-success">Sign Up</button>
  </form>

  <br>
        {% with flashed_messages = get_flashed_messages(with_categories=true) %}
            {% if flashed_messages %}

        {% for message in flashed_messages %}
            {% if "Error" not in message[1]: %}
                <div class="alert alert-info">
                <strong>Success! </strong> {{ message[1] }}
                </div>
            {% endif %}

            {% if "Error" in message[1]: %}
                <div class="alert alert-warning">
                {{ message[1] }}
                </div>
            {% endif %}
        {% endfor %}
            {% endif %}
        {% endwith %}

</div>
<br>           
    </div>
</div>

<br>
<br>
<br>
<br>
<br>

<!--FOOTER-->
<footer class="page-footer orange">
    <div class="container">
        <div class="row">
            <div class="col l6 s12">
                <h5 class="white-text">Company Bio</h5>

                <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's
                    our full time job.</p>
            </div>
            <div class="col l3 s12">
                <h5 class="white-text">Languages</h5>
                <ul>
                    <li><a class="white-text" href="#!">Javascript</a></li>
                    <li><a class="white-text" href="#!">PHP</a></li>
                    <li><a class="white-text" href="#!">Java</a></li>
                    <li><a class="white-text" href="#!">C#</a></li>
                </ul>
            </div>
            <div class="col l3 s12">
                <h5 class="white-text">Connect</h5>
                <ul>
                    <li><a class="white-text" href="#!">Facebook</a></li>
                    <li><a class="white-text" href="#!">Twitter</a></li>
                    <li><a class="white-text" href="#!">Google Plus</a></li>
                    <li><a class="white-text" href="#!">LinkedIn</a></li>
                </ul>
            </div>
        </div>
    </div>
</footer>

</body>
</html>

Result

Best Regards,