DEV Community

William S. Vincent for Learn Django

Posted on • Originally published at

Django Email/Contact Form Tutorial

Let's build a simple contact form that sends email for a Django 3.0 website. We can take advantage of Django's built-in email support to make this relatively painless.

Initial setup

The first step is to create a dedicated directory for our code. On a Mac, a convenient location is the Desktop. From the command line, execute the following commands to navigate to the Desktop and create a new contact folder.

$ cd ~/Desktop
$ mkdir contact && cd contact

Note: If you need help additional help configuring your Django dev environment, please see this installation guide.

Now we can install Django and activate our virtual environment.

$ pipenv install django==3.0.5
$ pipenv shell

Next let's create a new Django project called config and within it an app called sendemail:

(contact) $ django-admin startproject config .
(contact) $ python startapp sendemail

To make sure everything installed correctly let's migrate and then runserver.

(contact) $ python migrate
(contact) $ python runserver

If you open you browser to you should see the following screen:

Django Welcome Page


We've created a new app so we need to explicitly add it to our Django project. Within your file, under INSTALLED_APPS add sendemail at the top.

# config/
    'sendemail.apps.SendemailConfig', # new

Then within the same file add a line at the very end specifying which email backend we'll use:

EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'

For now, we'll be outputting our email to the command line console. Later we can add a few lines to this file to specify whatever production backend mail server--SendGrid, MailGun, etc--we'd like.


Since we've added an app to our Django project we need to update the root config/ file, adding include to the top line and a new urlpattern for the app:

# config/
from django.contrib import admin
from django.urls import path, include # new

urlpatterns = [
    path('', include('sendemail.urls')), # new

Next create a new sendemail/ file in our app.

(contact) $ touch sendemail/

Then add the following code so that the main contact form is at email/ and a successful submission redirects to success/.

# sendemail/
from django.contrib import admin
from django.urls import path

from .views import contactView, successView

urlpatterns = [
    path('contact/', contactView, name='contact'),
    path('success/', successView, name='success'),


Still within our sendemail app, create a new file

(contact) $ touch sendemail/

This will contain the fields in our actual contact form. We'll require three: from_email, subject, and message.

# sendemail/
from django import forms

class ContactForm(forms.Form):
    from_email = forms.EmailField(required=True)
    subject = forms.CharField(required=True)
    message = forms.CharField(widget=forms.Textarea, required=True)

We're using Django's built-in Forms API here to quickly create three fields.


Let's create the view now that will do the bulk of the work for our contact form. Update the existing sendemail/ file:

# sendemail/
from django.core.mail import send_mail, BadHeaderError
from django.http import HttpResponse, HttpResponseRedirect
from django.shortcuts import render, redirect
from .forms import ContactForm

def contactView(request):
    if request.method == 'GET':
        form = ContactForm()
        form = ContactForm(request.POST)
        if form.is_valid():
            subject = form.cleaned_data['subject']
            from_email = form.cleaned_data['from_email']
            message = form.cleaned_data['message']
                send_mail(subject, message, from_email, [''])
            except BadHeaderError:
                return HttpResponse('Invalid header found.')
            return redirect('success')
    return render(request, "email.html", {'form': form})

def successView(request):
    return HttpResponse('Success! Thank you for your message.')

There's a lot going on here! We start by importing send_mail and BadHeaderError for security reasons. At the bottom of the imports we reference ContactForm which we just created in our file.

Create templates

Final step! We need to create the templates for our email and success pages. I like to create a project-level templates folder and put all of my templates in there. So create a new directory called templates and create two new files in there.

(contact) $ mkdir templates
(contact) $ touch templates/email.html

Next update our file to tell Django to look in this directory for templates. Update the DIRS settings within TEMPLATES. This is a one-line change.

# config/
        'DIRS': [os.path.join(BASE_DIR, 'templates')],

Now update our template files with the following code:

<!-- templates/email.html -->
<h1>Contact Us</h1>
<form method="post">
    {% raw %}{% csrf_token %}{% endraw %}
    {% raw %}{{ form.as_p }}{% endraw %}
    <div class="form-actions">
      <button type="submit">Send</button>

Send first email

Make sure the server is running with python runserver and load in your web browser, fill out the form, and click the Send button.

Contact Form

You will be redirected to the if the email goes through.

Success Page

And in your console you can see that the email was sent:

(contact) $ python runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
April 17, 2020 - 21:21:53
Django version 3.0.5, using settings 'config.settings'
Starting development server at
Quit the server with CONTROL-C.
[17/Apr/2020 21:21:59] "GET /contact/ HTTP/1.1" 200 622
Content-Type: text/plain; charset="utf-8"
MIME-Version: 1.0
Content-Transfer-Encoding: 7bit
Subject: Hello
Date: Fri, 17 Apr 2020 21:22:35 -0000
Message-ID: <158715855539.8761.15735317856240850309@williams-mbp.lan>

Does this email contact form work?
[17/Apr/2020 21:22:35] "POST /contact/ HTTP/1.1" 302 0
[17/Apr/2020 21:22:35] "GET /success/ HTTP/1.1" 200 36

Top comments (3)

xarala221 profile image
Ousseynou Diop

Thank you.

wsvincent profile image
William S. Vincent

You're very welcome.

modardwery profile image

Than you.