How to send email using flask with email template - Flask email template

In this article, we explain how to configure and send an e-mail with an email template in the flask using the flask_mail package. flask_mail package is the flask package that is used to send Emails, both individually and in bulk. So let's start with the code - 

In this example, we are going to set up SMT mail - 

So first we have to import all the required packages -

views.py  

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

app = Flask(__name__)

After loading the package name and defining the app, we have to configure the SMT
# mail configration
app.config['MAIL_SERVER'] = 'smtp.gmail.com'
app.config['MAIL_PORT'] = 587
app.config['MAIL_USE_TLS'] = True
app.config['MAIL_USERNAME'] = 'your email id'
app.config['MAIL_PASSWORD'] = 'email account password'

mail = Mail(app)


After configuring, we have to write code to send mail, So let's create a function to send mail - 

@app.route("/send-mail")
def sendmail():
    try:
    
        subject = "User verification"
        message = render_template('mail_template.html', name='your name',otp=otp)
        msg = Message(subject, sender='sender@gmail.com', recipients=[email])
        msg.html = message
        mail.send(msg)
        return "mail sent"
    except Exception as e:
        return False

Now create an email template for your mail - 
So create a directory with the name template and inside the template directory create a file with the name mail_template.html and paste the given code into your HTML file.

templates/mail_template.html  
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      .card{
        border: 1px solid #ccc;
        padding: 10px;
        background-color: #fff;
        width: auto;
        margin-left: auto;
        margin-right: auto;
      }
      .card-subtitle{
        text-align: center;
        font-size: 18px;
        background-color: black;
        color: #fff;
        padding: 20px
      }
      p{
        text-align: justify;
        font-family: 'cursive';
      }
      .dear{
        font-size: 18px;
        font-weight: bold;
      }
      .border.p-2.bg-dark.text-white{
        padding: 10px;
        border: 1px solid #ccc;
        background-color: black;
        color: #fff;
        text-align: center;
        font-size: 18px;
      }
      .msg{
        font-size: 16px;
        font-weight: 400;
        font-family: 'Courier New', Courier, monospace;
      }
    </style>
  </head>
  <body>
    <div class="container">
        <div class="card mt-5" style="width: 23rem;">
            <div class="card-body">
              <h6 class="card-subtitle mb-2 text-white bg-dark p-3 text-center">Account Verification Mail</h6>
             <p><span class="dear"> Dear</span> {{ email }},<br>
                Thank you for registering for our store! We are excited to share with you the latest news, updates, and promotions from our company.<br>
                To activate your account, please enter the given OTP:</p>
              <p class="border p-2 bg-dark text-white">OTP <span>{{ otp }}</span></p>
              <p class="msg">Thank you !<br>
                Best regards,<br>
                Interntuts Team</p>
            </div>
          </div>
    </div>
  </body>
</html>
After doing all these setups we have to run our flask application -
 > flask --app filename run 
After running the app, we have to open the web browser and search for our application routes -
For Example - if your application is running successfully then click on this link to directly run your application. Click here

Comments