Flash messages for user feedback in Flask - Mini Project: Build & Apply

Flash messages for user feedback

📖 Scenario: You are building a simple Flask web app where users can submit a form. You want to show short messages to users after they submit the form to tell them if their submission was successful or if there was an error.

🎯 Goal: Create a Flask app that uses flash messages to give feedback to users after form submission. The app will show a success message when the form is submitted.

📋 What You'll Learn

Create a Flask app with a route for the home page

Set a secret key for the Flask app to enable flashing

Use the flash function to send a success message after form submission

Display flashed messages in the HTML template

💡 Why This Matters

🌍 Real World

Flash messages are used in web apps to give quick feedback to users, like confirming actions or showing errors.

💼 Career

Knowing how to implement user feedback with flash messages is a common task for web developers working with Flask.

1

Set up the Flask app and home route

Create a Flask app by importing Flask and creating an app instance called app. Then create a route for "/" with a function called home that returns the string "Welcome to the home page".

Flask

# Your code here

Need a hint?

Start by importing Flask and creating the app instance. Then define the home route with @app.route("/").

2

Add a secret key for flashing

Add a secret key to the Flask app by setting app.secret_key = 'mysecretkey' right after creating the app instance.

Flask

from flask import Flask

app = Flask(__name__)
app.secret_key = 'mysecretkey'

@app.route("/")
def home():
    return "Welcome to the home page"
# Your code here

Need a hint?

The secret key is needed to use flash messages. Set it as app.secret_key = 'mysecretkey'.

3

Use flash to send a success message

Import flash and redirect from flask. Modify the home function to flash the message 'Form submitted successfully!' and then redirect back to "/".

Flask

from flask import Flask, flash, redirect

app = Flask(__name__)
app.secret_key = 'mysecretkey'

@app.route("/")
def home():
    flash('Form submitted successfully!')
    return redirect('/')
# Your code here

Need a hint?

Use flash('Form submitted successfully!') to send the message, then return redirect('/') to reload the page.

4

Display flashed messages in the HTML template

Import render_template and get_flashed_messages from flask. Create a template called home.html that loops over get_flashed_messages() and displays each message inside a <div>. Modify the home function to render home.html instead of redirecting.

Flask

from flask import Flask, flash, render_template, get_flashed_messages

app = Flask(__name__)
app.secret_key = 'mysecretkey'

@app.route("/")
def home():
    messages = get_flashed_messages()
    return render_template('home.html', messages=messages)

# Create home.html template with a loop to show messages
# Your code here

Need a hint?

Use get_flashed_messages() to get messages and pass them to the template. In the template, loop over messages and show each inside a <div>.