Instagram logo to direct to CountMe tech ig profile page   LinkedIn logo that is directed to CountMe tech profile page

One of the main ways businesses (such as inventory management applications) around the world communicate with their customers is via email. Therefore, as a software developer, it is important to know how to build a simple program from scratch that can effectively send an email to one or two people.

The steps below will serve as a useful guide to show you how to use Django, Python, HTML, CSS to send an email to your customer.

Overview of the steps used:

  1. Create New Project and Application
  2. Configuration of Project Settings
  3. Adding emailing app urls to the project
  4. Build a Urls file for the Application
  5. Create new Template Folders for Emailing App
  6. Email Front-End Design using HTML and CSS
  7. Backend Logic of the Email Design using Views
  8. Results of the Email Form

 

Step 1: Create New Project and Application

The first step involves you locating the folder you wish to store your application on and creating your project and app folders. On your terminal, run the below codes.

% cd ideallocation

Make sure to substitute ideallocation in the above code with where you want to store your project on your system.

% django-admin startproject emailMarketing

Substitute emailMarketing in the above code with what you wish to name your project folder.

% python3 manage.py startapp emailing

Within a django project, you can have several apps with different functionalities. So ensure you replace emailing in the above code with a distinct functionality name.

The image below is how the structure of your folder will look like.

Django project folder structure for sending emails

Figure 1: Django project folder structure

 

Step 2: Configuration of Project Settings

First, locate your settings.py file to add details about the email you wish your business to send from and to also update your INSTALLED_APPS list.

# SENDING EMAILS
EMAIL_HOST = "smtp.gmail.com"
EMAIL_HOST_USER = ''
EMAIL_HOST_PASSWORD = ''
EMAIL_PORT = 587
EMAIL_USE_TLS = True
EMAIL_BACKEND = "django.core.mail.backends.smtp.EmailBackend"

In your settings.py file, first determine what your simple mail transfer protocol (smtp) is for your EMAIL_HOST and type it in. In this case, we are using “smtp.gmail.com” gmail’s one. Then, input your business email address in the EMAIL_HOST_USER field.

To obtain your secure password, within your gmail account, go to manage your account, go to security and generate an app password (see image below). Subsequently, the rest of the fields do not need to be changed.

Gmail app password generation for sending emails using Django and Python

Figure 2: Gmail app password generation

Next, within the same settings.py file, append your app name which in our case is emailing into the INSTALLED_APPS list.

INSTALLED_APPS = [
    'emailing',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

 

Step 3: Adding emailing app urls to the project

Open your urls.py within your project folder (see directory/image below). Import include and path function from your django urls library. Afterwards, use the include function to join your app’s urls (emailing.urls) path inside the urlpatterns list.

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('emailing.urls')),
]

 

Step 4: Build a Urls file for the Application

Create a python file called urls.py within your app’s folder (emailing). This is the urls path that was included in the previous step. Populate your urls file with the content on the image below. This is used to link your html file (using name=’index’) and your views file (using views.index).

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index')
]

 

Step 5: Create new Template Folders for Emailing App

Create a templates folder within your app folder (emailing) and then create another folder with the same name as your app (emailing) within your templates folder. Afterwards, within your new emailing folder, create your html file called index.html.

Go to emailMarketing > emailing > templates > emailing > index.html

 

Step 6: Email Front-End Design using HTML and CSS

Now that you have created your html file (this is the front end of your webapp), open it and add the html framework (see code below) to begin. The <title> is the title of your webapp page.

<!DOCTYPE html>     
<html lang="en">
    <head>
        <title>Emailing</title>

        <style>
            
        </style>
    </head>
    <body>
        
    </body>
</html>

Within the <style> </style> of the above HTML framework, insert the content from the code below. The <style> or otherwise known as CSS is used to format your page styles such as colors and sizes of items.

.emailingContainer {
    margin: 20px;
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}
input[type=text], textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}
input[type=text]:focus, textarea:focus{
    outline: none !important;
    border:2px solid darkred;
} 
input[type=submit] {
    background-color: #04AA6D;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
input[type=submit]:hover {
    background-color: #45a049;
}

Within the <body> </body> of the HTML framework insert the content from the code below. The <body> is where the content of your form will be. The {{message}} will be used to tell you when the email has been sent. 

The <form action> has an empty string as seen in the path function on step 4 which implies that the index function will be called in the views.py. The <form method> post will be used to access the fields within the form. The {%csrf_token%} is a cross site reference forgery protection to prevent any malicious attack on your webapp. 

In addition, we have the labels, input area for email subject, text area for email address and email content and a button to send our email. Required means the field must be completed before the form can be submitted. The name for each field will be used to extract the value from their respective fields within the views.py (see next step for more explanation).

<div>
    <!-- Emailing Form -->
    <h3> My Business Email Form</h3>

    <!-- Email Confirmation -->
    {% if message != "" %}
        <div>
            {{ message }} 
        </div>
    {% endif %}

    <div class="emailingContainer">
        <form action="" method="post">
            {% csrf_token %} 
            <!-- Email Suject or Title -->
            <label for="subject">Subject</label>
            <input type="text" id="subject" name="emailSubject" placeholder="" required>

            <!-- Email contacts -->
            <label for="contact">Email Contact</label>
            <textarea id="contact" name="emailContact" placeholder="" style="height:50px" required></textarea>

            <label for="content">Content</label>
            <textarea id="content" name="emailContent" placeholder="" style="height:200px" required></textarea>

            <input type="submit" value="Send Email">
        </form>
    </div>
</div>

 

Step 7: Backend Logic of the Email Design using Views

Open your views.py file (this is the Python backend logic of your webapp) within your app folder (emailing) and copy the contents from the image below into your file. Ensure you import the proper functions (render and EmailMessage) from the Django libraries as observed. The index function is a webapp request after the email button from the previous step has been clicked on the front end. 

The message string is initially an empty string until your email has been sent. The logic then checks if the correct method was requested followed by declaring all the important variables using the name of the fields in the html file. The EmailMessage function is used to package our variables and then the send function to send the email. Finally, return renders the message string to the same html page (created on the previous step).

from django.shortcuts import render
from django.core.mail import EmailMessage

# Create your views here.
def index(request):
    message = ""
    if request.method == 'POST':
        # Emailing variables
        mail_subject = request.POST.get('emailSubject')
        to_email = request.POST.get('emailContact')
        message = request.POST.get('emailContent')

        # Send email to all possible contacts
        email = EmailMessage(
                mail_subject, message, to=[to_email]
            )
        email.send()
            
        # Confirmation message
        message = "Your message has been sent successfully!"

    return render(request, 'emailing/index.html', {
        'message': message
    })

 

Step 8: Results of the Email Form

Consequently, save all your files and run your program on the terminal.

% python3 manage.py runserver

The image below is the result of your now working email form. This was the same method used to develop the simple email marketing form for CountMe.

Empty email template ready to send designed using Django and Python

Figure 3: Empty email template

Populated email ready to send designed using Django and Python

Figure 4: Populated email template

Successful message after sending email using Django and Python

Figure 5: Successful message on emailing template

Received gmail after sending email using Django and Python

Figure 6: Received email in inbox

 


 

References

https://realpython.com/django-setup/

https://docs.djangoproject.com/en/3.2/ref/csrf/