HTML email templates in Flask - Step-by-Step Execution

Concept Flow - HTML email templates

Start Flask app

↓

Define email template HTML

↓

Render template with data

↓

Create email message

↓

Send email via SMTP

↓

Email received with styled content

This flow shows how Flask uses an HTML template to create and send a styled email message.

Execution Sample

Flask

from flask import Flask, render_template_string
from flask_mail import Mail, Message

app = Flask(__name__)
app.config.update({
  'MAIL_SERVER': 'smtp.example.com',
  'MAIL_PORT': 587,
  'MAIL_USE_TLS': True,
  'MAIL_USERNAME': '[e-mail]',
  'MAIL_PASSWORD': 'password'
})
mail = Mail(app)

@app.route('/send-email')
def send_email():
    html = render_template_string('<h1>Hello {{ name }}!</h1>', name='Friend')
    msg = Message('Greetings', sender='[e-mail]', recipients=['[e-mail]'])
    msg.html = html
    mail.send(msg)
    return 'Email sent!'

This Flask code renders an HTML email template with a name and sends it using Flask-Mail.

Execution Table

Step	Action	Input/State	Output/Result
1	Start Flask app	None	App initialized with mail config
2	Render HTML template	Template '<h1>Hello {{ name }}!</h1>', name='Friend'	HTML string '<h1>Hello Friend!</h1>'
3	Create Message object	Subject='Greetings', sender, recipients	Message with subject and recipients set
4	Assign HTML content	HTML string '<h1>Hello Friend!</h1>'	Message.html set to HTML string
5	Send email	Message object with HTML	Email sent via SMTP server
6	Return response	None	'Email sent!' string returned to browser

💡 Email sent successfully and response returned to user

Variable Tracker

Variable	Start	After Render	After Message Creation	After HTML Assign	After Send	Final
html	None	'<h1>Hello Friend!</h1>'	'<h1>Hello Friend!</h1>'	'<h1>Hello Friend!</h1>'	'<h1>Hello Friend!</h1>'	'<h1>Hello Friend!</h1>'
msg	None	None	Message(subject='Greetings', sender='[e-mail]', recipients=['[e-mail]'])	Message with html content	Message sent	Message object

Key Moments - 3 Insights

Why do we use render_template_string instead of just writing HTML directly?

render_template_string lets us insert dynamic data like the name 'Friend' into the HTML, as shown in step 2 of the execution_table.

What happens if we forget to set msg.html before sending?

The email will have no HTML content, so the recipient sees a blank or plain message. Step 4 shows setting msg.html is essential.

Why do we configure MAIL_SERVER and other settings before sending?

These settings tell Flask-Mail how to connect to the email server to send messages, as initialized in step 1.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'html' after step 2?

A '<h1>Hello Friend!</h1>'

B '<h1>Hello {{ name }}!</h1>'

C None

D 'Hello Friend!'

💡 Hint

Check the 'Output/Result' column in row with Step 2.

At which step is the email message actually sent?

A Step 3

B Step 4

C Step 5

D Step 6

💡 Hint

Look for the action 'Send email' in the execution_table.

If we change the name to 'Alice' in render_template_string, what changes in variable_tracker?

A 'msg' changes to include 'Alice' in subject

B 'html' becomes '<h1>Hello Alice!</h1>' after render

C 'html' remains '<h1>Hello Friend!</h1>'

D 'msg.html' becomes plain text

💡 Hint

Check how 'html' changes after rendering in variable_tracker.

Concept Snapshot

HTML email templates in Flask:
- Use render_template_string or render_template to create HTML content
- Insert dynamic data with {{ }} placeholders
- Create Message object with subject, sender, recipients
- Assign HTML content to msg.html
- Send email with mail.send(msg)
- Configure mail server settings before sending

Full Transcript

This lesson shows how Flask sends HTML emails using templates. First, the Flask app starts with mail server settings. Then, an HTML template string with a placeholder for a name is rendered into a full HTML string. Next, a Message object is created with subject, sender, and recipients. The rendered HTML is assigned to the message's html property. The message is sent through the SMTP server. Finally, a confirmation response is returned. Variables like 'html' and 'msg' change step-by-step as the email is prepared and sent. Key points include using templates for dynamic content, setting the html property, and configuring mail settings. The visual quiz checks understanding of these steps.

Practice

1. What is the main purpose of using HTML email templates in Flask applications?

easy

A. To create visually appealing and structured email content

B. To speed up the sending of emails

C. To store email addresses securely

D. To encrypt email messages automatically

Solution

1. Step 1: Understand what HTML email templates do

   HTML email templates help format emails with colors, images, and layout to look professional.

2. Step 2: Identify the purpose in Flask context

   Flask uses templates to generate this HTML content dynamically for emails.

3. Final Answer:

   To create visually appealing and structured email content -> Option A

4. Quick Check:

   HTML email templates = visually appealing emails [OK]

Hint: HTML templates make emails look nice and professional [OK]

Common Mistakes:

• Confusing template purpose with email sending speed
• Thinking templates store email addresses
• Assuming templates encrypt emails

2. Which Flask function is commonly used to render an HTML email template from a file?

easy

A. render_template_string()

B. make_response()

C. send_email()

D. render_template()

Solution

1. Step 1: Recall Flask template rendering functions

   Flask provides render_template() to render templates from files and render_template_string() for strings.

2. Step 2: Identify the function for file templates

   For HTML email templates stored as files, render_template() is used.

3. Final Answer:

   render_template() -> Option D

4. Quick Check:

   File template rendering = render_template() [OK]

Hint: Use render_template() for file-based HTML templates [OK]

Common Mistakes:

• Using render_template_string() for file templates
• Confusing send_email() as a Flask function
• Using make_response() for rendering templates

3. Given this Flask code snippet for sending an email, what will be the content type of the email sent?

from flask_mail import Message
msg = Message(subject='Hello', recipients=['[e-mail]'])
msg.html = render_template('email.html', name='Alice')

medium

A. HTML formatted email

B. JSON formatted email

C. Multipart email with attachments

D. Plain text email

Solution

1. Step 1: Check how email content is set

   The code sets msg.html using render_template(), which produces HTML content.

2. Step 2: Understand Flask-Mail behavior

   Setting msg.html sends the email as HTML formatted content.

3. Final Answer:

   HTML formatted email -> Option A

4. Quick Check:

   msg.html set = HTML email [OK]

Hint: Setting msg.html sends HTML email content [OK]

Common Mistakes:

• Assuming plain text because no msg.body set
• Thinking attachments are included automatically
• Confusing JSON format with email content

4. Identify the error in this Flask email template rendering code:

msg = Message('Hi', recipients=['[e-mail]'])
msg.html = render_template('email_template.html')
send_email(msg)

medium

A. render_template() requires variables passed

B. msg.html should be msg.body

C. send_email() is not a Flask-Mail function

D. Message requires sender argument

Solution

1. Step 1: Check Flask-Mail sending function

   Flask-Mail uses mail.send(msg) to send emails, not send_email().

2. Step 2: Verify other parts

   Setting msg.html is correct for HTML content, and sender is optional if configured globally.

3. Final Answer:

   send_email() is not a Flask-Mail function -> Option C

4. Quick Check:

   Flask-Mail send = mail.send() [OK]

Hint: Use mail.send() to send emails, not send_email() [OK]

Common Mistakes:

• Using send_email() instead of mail.send()
• Confusing msg.html with msg.body
• Thinking sender is always required in Message

5. You want to send a personalized HTML email in Flask using a template that includes the user's name and a list of their favorite items. Which approach correctly combines rendering and sending the email?

hard

A. Use render_template_string() without variables, set msg.html, then mail.send(msg)

B. Render template with variables, set msg.html, then use mail.send(msg)

C. Set msg.body with template filename, then call mail.send(msg)

D. Set msg.html to plain text, then call mail.send(msg)

Solution

1. Step 1: Render template with variables

   Use render_template() passing user's name and list to generate HTML content.

2. Step 2: Assign rendered HTML to msg.html and send

   Set msg.html to the rendered content and send with mail.send(msg).

3. Final Answer:

   Render template with variables, set msg.html, then use mail.send(msg) -> Option B

4. Quick Check:

   Render with vars + msg.html + mail.send() = correct [OK]

Hint: Render with variables, assign to msg.html, send with mail.send() [OK]

Common Mistakes:

• Setting msg.body to template filename instead of content
• Not passing variables to render_template()
• Sending plain text in msg.html