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

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

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

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

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>.

Practice

1. What is the main purpose of using flash() in a Flask application?

easy

A. To create a new route in the Flask app

B. To permanently store user data in the session

C. To send a one-time message to the user after a request

D. To handle database connections automatically

Solution

1. Step 1: Understand the role of flash messages

   Flash messages are temporary messages shown to users after actions like form submission.

2. Step 2: Identify what flash() does

   The flash() function stores these messages to be displayed once, then removed.

3. Final Answer:

   To send a one-time message to the user after a request -> Option C

4. Quick Check:

   Flash messages = one-time user feedback [OK]

Hint: Flash messages show temporary feedback after user actions [OK]

Common Mistakes:

• Thinking flash stores data permanently
• Confusing flash with routing or database functions
• Assuming flash messages appear multiple times

2. Which of the following is the correct way to import and use flash in a Flask app?

easy

A. from flask import flash; flash('Message')

B. import flash from flask; flash('Message')

C. from flask.flash import flash; flash('Message')

D. import flask.flash; flask.flash('Message')

Solution

1. Step 1: Recall correct import syntax in Flask

   Functions like flash are imported directly from the flask package using from flask import flash.

2. Step 2: Check usage after import

   After importing, calling flash('Message') is the correct way to flash a message.

3. Final Answer:

   from flask import flash; flash('Message') -> Option A

4. Quick Check:

   Correct import and call = from flask import flash; flash('Message') [OK]

Hint: Use 'from flask import flash' to import flash [OK]

Common Mistakes:

• Using incorrect import syntax
• Trying to import flash as a submodule
• Calling flash without importing

3. Given this Flask code snippet, what will be the output on the rendered page?

from flask import Flask, flash, render_template_string, get_flashed_messages
app = Flask(__name__)
app.secret_key = 'secret'

@app.route('/')
def index():
    flash('Welcome back!', 'info')
    messages = get_flashed_messages(with_categories=True)
    return render_template_string('''
        {% for category, message in messages %}
            <div class="{{ category }}">{{ message }}</div>
        {% endfor %}
    ''', messages=messages)

medium

A. No output because flash messages are empty

B. Welcome back!

C. SyntaxError due to incorrect template syntax

D. Welcome back!

Solution

1. Step 1: Understand flash message with category

   The code flashes a message 'Welcome back!' with category 'info'. Using get_flashed_messages(with_categories=True) returns a list of (category, message) tuples.

2. Step 2: Analyze template rendering

   The template loops over messages and creates a div with class set to the category and content as the message. So it outputs <div class="info">Welcome back!</div>.

3. Final Answer:

   <div class="info">Welcome back!</div> -> Option D

4. Quick Check:

   Flash with category 'info' outputs div with class 'info' [OK]

Hint: Flash with categories outputs div with category as class [OK]

Common Mistakes:

• Ignoring categories and using wrong class name
• Assuming flash messages are empty immediately
• Misreading template syntax causing syntax error

4. What is wrong with this Flask code that tries to flash a message?

from flask import Flask, flash
app = Flask(__name__)

@app.route('/')
def index():
    flash('Hello user!')
    return 'Done'

medium

A. Flash messages must be returned, not just called

B. Missing app.secret_key causes flash to fail

C. Flash requires a category argument

D. Flash cannot be used inside route functions

Solution

1. Step 1: Recall flash message requirements

   Flashing messages requires session support, which needs app.secret_key to be set.

2. Step 2: Identify missing secret key

   The code does not set app.secret_key, so flashing will not work properly and may raise an error.

3. Final Answer:

   Missing app.secret_key causes flash to fail -> Option B

4. Quick Check:

   Secret key needed for flash session [OK]

Hint: Always set app.secret_key before using flash [OK]

Common Mistakes:

• Forgetting to set secret_key
• Thinking flash needs category argument
• Believing flash must be returned

5. You want to show different flash messages with categories 'success' and 'error' after form submission. Which code snippet correctly flashes both messages and displays them in a template with distinct styles?

hard

A. flash('Form submitted!', 'success')\nflash('Invalid input', 'error')\nreturn render_template('index.html')\n
\n{% for category, msg in get_flashed_messages(with_categories=True) %}\n {{ msg }}\n{% endfor %}

B. flash('Form submitted!')\nflash('Invalid input')\nreturn render_template('index.html')\n
\n{% for msg in get_flashed_messages() %}\n {{ msg }}\n{% endfor %}

C. flash('Form submitted!', type='success')\nflash('Invalid input', type='error')\nreturn render_template('index.html')\n
\n{% for category, msg in get_flashed_messages(with_categories=True) %}\n {{ msg }}\n{% endfor %}

D. flash('Form submitted!', 'success')\nflash('Invalid input', 'error')\nreturn render_template('index.html', messages=get_flashed_messages())\n
\n{% for category, msg in messages %}\n {{ msg }}\n{% endfor %}

Solution

1. Step 1: Flash messages with categories

   Use flash('message', 'category') -- category as the second positional argument.

2. Step 2: Retrieve messages with categories in template

   Loop over get_flashed_messages(with_categories=True) directly in the template to unpack (category, message) and apply class="{{ category }}" for distinct styles.

3. Step 3: Distractors fail because

   No categories provided; invalid keyword argument like type='success' raises TypeError; retrieving without with_categories=True returns strings causing unpack error in for category, msg in messages.

4. Final Answer:

   flash('Form submitted!', 'success'); flash('Invalid input', 'error'); template with get_flashed_messages(with_categories=True) -> Option A

5. Quick Check:

   Flash with categories + template loop with categories = flash('Form submitted!', 'success')\nflash('Invalid input', 'error')\nreturn render_template('index.html')\n \n{% for category, msg in get_flashed_messages(with_categories=True) %}\n

   {{ msg }}

   \n{% endfor %} [OK]

Hint: Flash with category, get_flashed_messages(with_categories=True) in template [OK]

Common Mistakes:

• Not passing with_categories=True when retrieving messages
• Using invalid keyword argument like type= for category
• Passing messages without categories to template expecting categories