Build Website with Flask – Part 8

by


This is part of our Flask series:

Story: Assume you work in the IT Department of Right-On Realtors. Your boss asks you to create a simple website the Realtors can query to view current Home Sales.

He would like this website created using the Flask plugin.

What is Flask?

Flask is a web app framework created with ease of use in mind. Without much training, you can easily create a simple web application. Flask works with Bootstrap, HTML, CSS, and Jinja (to name a few) to create a website.

Preparation

This article assumes you have completed the following from Part 1, Part 2, Part 3, Part 4, Part 5, Part 6, and Part 7:

  • Created and Activated a Virtual Environment.
  • Installed all of the required plugins.
  • Created the appropriate folder structure.
  • Created and saved an app.py file to the realtors folder.
    ο»Ώ
  • Added Routes to the app.py file.
  • Added Jinja to the base template.
  • Created and saved HTML files to the realtors/templates folder.
    ο»Ώ
  • Linked to Bootstrap.
  • Added a Bootstrap Navbar to the base template file (base.html).
  • Added Jinja to the HTML pages.
  • Viewed the website in a Browser.
  • Added a Form with elements to an HTML page.
  • Added Jinja to the Reports page.
  • Added code to app.py to get the HTML Form working.
  • Read in the Real Estate CSV file to a DataFrame.
  • Queried the results based on a Zip Code.
  • Displayed the results on the Reports page.
  • Validated the Zip Code.
  • Cleaned-Up the Data.
  • Corrected the Sales Prices.
  • Formatted the Sales Prices.
  • Updated the Navbar.
  • Added a Stylesheet.
  • Applied styles to the Navbar.
  • Applied styles to the HTML pages.

In Part 8, you will learn how to:

  • Set up the Contact page.
  • Apply styles to the page.
  • Email output from a Form.

Add the following code to the top of each code snippet. This snippet will allow the code in this article to run error-free.

import pandas as pd
from flask import Flask, render_template, request

Setup the Contact page

Bootstrap offers various out-of-the-box forms we can copy and paste to our Contact (contact.html) page. Therefore, we extracted some form elements from Bootstrap and added additional ones.

In this example, we created a form with the following elements:

  • An <input> tag to enter the Realtor’s First Name.
  • An <input> tag to enter the Realtor’s Last Name.
  • An <input> tag to enter the Realtor’s ID Number.
  • A <textarea> tag to enter in a message.
  • A <button> to submit the form.

Copy the code below to the clipboard. Paste this code to the contact.html file (CTRL+V) and save.

{% extends 'base.html' %}

{% block content %}     
    <div class='container'>
       <h2>Contact Us</h2>

       <br/><br/>
       <form action="#" method="POST" class="form-contact">
         <div class="form-group">
            <input type="text" class="form-control shadow-sm sm-white rounded" id="exampleFormControlInput1" 
            placeholder="First Name", name="first_name">
          </div>
          <br/>
          <div class="form-group">
            <input type="text" class="form-control  shadow-sm sm-white rounded" id="exampleFormControlInput1" 
            placeholder="Last Name", name="last_name">
          </div>
          <br/>
          <div class="form-group">
            <input type="text" class="form-control  shadow-sm sm-white rounded" id="exampleFormControlInput1" 
            placeholder="Realtor ID", name="id">
          </div>
          <br/>
          <div class="form-group">
            <textarea class="form-control" id="exampleFormControlTextarea1" placeholder="Message" name="
            msg" rows="3"></textarea>        
          </div>  
          <br/><br/>
          <button type="submit" class="btn btn-primary">Send</button>
      </form>       
    </div>
{% endblock %}
  • Line [1] defines the <form> tag with the following:
    • method="POST" to post/send the data to the HTML page stated in the action argument.
    • A class element. This class allows us to add style code inside of the style.css file.
    • action="#" the URL to forward the form data (updated later).
  • The remaining <div class="form-group"> sections define the look and feel of the <input> tag for that <div>. These class references can be found on the Bootstrap website. Each <div> can be assigned different class(es).
  • The <button> tag is set to submit. The button text is Send. When clicked, the Form data transfers to the URL stated in the <form> tag action argument (updated later).

Note we set the placeholder text for each <input> tag. The placeholder text will display when <input> it is empty.

πŸ’‘ Note: Each <input> tag must contain a name. This name is how we retrieve and access the data.

Apply Form Styles

Navigate to and open the style.css file.

Copy the code below to the clipboard. Then, paste this code to the style.css file right after the form_zip class (CTRL+V) and save.

πŸ’‘ Note: It is good practice to keep like styles together.

Related Article:

.form-contact {
    width: 450px;
    background-color: #F0F8FF;
    padding: 40px;
    border: 1px solid darkgrey;
    border-radius: 6px;
    margin-left: auto;
    margin-right: auto;
}

These CSS styles do the following when applied to the <form>:

  • It changes the width.
  • It changes the background color (using hex value).
  • It places space around the elements.
  • It sets a form border.
  • It rounds the border corners.
  • It centers the form horizontally.

Run to view the changes. The output should be as follows:

πŸ’‘ Note: To practice CSS, try changing the styles and re-run.

Retrieve Form Field Data

Let’s retrieve the form data and display it on the Thanks page. In this vein, navigate to and open the Contact page (contact.html).

Earlier, we left the argument of the <form> tag empty. Let’s correct this.

Modify the line highlighted in yellow and save.

{% extends 'base.html' %}

{% block content %}     
    <div class='container'>
       <h2>Contact Us</h2>

       <br/><br/>
       <form action="/thanks" method="POST" class="form-contact">
         <div class="form-group">
            <input type="text" class="form-control shadow-sm sm-white rounded" id="exampleFormControlInput1" 
            placeholder="First Name", name="first_name">
          </div>
          <br/>
          <div class="form-group">
            <input type="text" class="form-control  shadow-sm sm-white rounded" id="exampleFormControlInput1" 
            placeholder="Last Name", name="last_name">
          </div>
          <br/>
          <div class="form-group">
            <input type="text" class="form-control  shadow-sm sm-white rounded" id="exampleFormControlInput1" 
            placeholder="Realtor ID", name="id">
          </div>
          <br/>
          <div class="form-group">
            <textarea class="form-control" id="exampleFormControlTextarea1" placeholder="Message" name="msg" rows="3"></textarea>        
          </div>  
          <br/><br/>
          <button type="submit" class="btn btn-primary">Send</button>
      </form>       
    </div>
{% endblock %}

Navigate to the templates folder and create the HTML file thanks.html. Paste the code below into this file and save it.

{% extends 'base.html' %}

{% block content %}     
    <div class="container">
       <h2>Thank you!</h2>

       <br/><br/>
       <p style="text-align: center">A representative will get back to you within 24 hours.</p>
       <br/><br/>

       <div align="center">
          First Name: {{ first_name }}<br/>
          Last Name:  {{ last_name }}<br/>
          Realtor ID: {{ id }}<br/>
          Message:    {{ msg }}<br/>
       </div>
    </div>
{% endblock %}

To retrieve the appropriate data from the Contact page, we must place the variable name inside double braces ({{ variable_name }}).

The next step is to update the app.py file. Navigate to and open this file.

Append the code below at the bottom of the app.py file and save.

@app.route('/thanks', methods=["POST"]) 
def thanks():
    first_name = request.form.get("first_name")
    last_name  = request.form.get("last_name")
    id         = request.form.get("id")
    msg        = request.form.get("msg")

    return render_template("thanks.html", first_name=first_name, last_name=last_name, id=id, msg=msg)

This code does the following:

  • Sets the page to display the form data and the method.
  • Declares a function.
    • Retrieves the data from the forms and saves it appropriately to variables.
    • Renders the template, selects the display page, and passes the variables as arguments.

Let’s test the code!

Complete the form as shown below.

Run to view the changes. The output should be as follows:

Click the Send button to be forwarded to the Thanks page (thanks.html).

🧩 Challenge: The Finxter Challenge is to write additional code to save the Contact form output to a Database. Then, write code to email the Contact form output to yourself.