Django contact form

A contact form can be good for some customers, as some people like it better than sending email. It essentially does the same thing - it provides the first point of contact.

The scope of this article is a locally working installation and some quick pointers for a production implementation.


Kalle Tolonen
June 30, 2022
Last updated on July 1, 2022

Requirements

  1. Being comfortable with Django
  2. Basic understanding of object oriented programming
  3. A working Django project
  4. E-mail server
  5. A basic understanding of function based views & generic model based views

Create a form model

First let’s create a form class in forms.py:

micro project/app/forms.py
#forms.py

from django import forms

# Create your forms here.

class ContactForm(forms.Form):
    name = forms.CharField(max_length = 50)
    email = forms.EmailField(max_length = 150)
    message = forms.CharField(widget = forms.Textarea, max_length = 2000)

As you notice, the model is similar to models.py - I don’t see any reasons on why this couldn’t also be located in the models-file.

Edit views

Next step - create the view:

micro project/app/views.py 
#views.py

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

def thanks(request):
    return render(request, "mainsite/thanks.html")

def contactform(request):
    if request.method == 'POST':
        form = ContactForm(request.POST)
        if form.is_valid():
            name = form.cleaned_data['name'], 
            subject = f"example.com contact form inquiry: { name }" 
            body = {
            'name': form.cleaned_data['name'], 
            'email': form.cleaned_data['email'], 
            'message':form.cleaned_data['message'], 
            }
            message = "\n".join(body.values())

            try:
                send_mail(subject, message, 'sender@example.com', ['receiver@example.com']) 
            except BadHeaderError:
                return HttpResponse('Invalid header found.')
            return redirect ("thanks")
            
    form = ContactForm()
    return render(request, "mainsite/contactform.html", {'form':form})

The key lines are the last one and the 3rd last one. The former defines where Django should look for the template and the latter tells where the user should be redirected after the mail has been sent.

The thanks-function (the first one after imports) tells Django what it should render.

Edit urls

Next we should edit urls.py to give Django some clue to how requests will be routed:

micro project/project/urls.py
#urls.py

urlpatterns= [
    path("contactform", views.contactform, name="contactform"),
    path("thanks", views.thanks, name="thanks"),
    
    #HOME
    path('home/', views.HomeView.as_view(), name="homepage"),
]

Urls.py tell Django what view should be called from a corresponding url.

Edit template

To actually produce something visible, you have to edit the templates. You should have a working Django project with templates at this stage to be able to do this.

micro project/app/templates/app/contactform.html
<div class="content-container-inner">
    <h1>Contact</h1>
    <p>
        Let's get in touch! 
    </p>
    <p>
        No billing if you're not 100% satisfied with the result.
    </p>
    <form method="post">
    {% csrf_token %}
        <table>
            {{form.as_table}}
            <tr>
            <th>
            </th>
                <td><input type="submit" id="formbutton" value="Submit" style="width: 4em"></td>
            </tr>
        </table>
     </form>
</div>

The template is quite simple since Django does all of the heavy lifting (form validation, cross site forgery protection) automatically.

The other template you will need is the template for the thanks-page. The correct location for these is your template-folder.

project/app/templates/app/
├── contactform.html
└── thanks.html

Set the settings

To finish things up, we need to make some alterations to settings.

micro project/project/settings.py
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'

Add this to validate your results.

Content-Type: text/plain; charset="utf-8"
MIME-Version: 1.0
Content-Transfer-Encoding: 7bit
Subject: Kalletolonen.com contact form inquiry: ('teemu',)
From: kalle@kalletolonen.com
To: kalle@kalletolonen.com
Date: Thu, 30 Jun 2022 16:02:05 -0000
Message-ID: <165660492521.80791.7834540659423749908@confmansys>

teemu
teem@mu.com
Heioppa
-------------------------------------------------------------------------------

The desired end result in the dev console.

Production install

There is only a couple of differences between the “hello world”-version and full production install. Firstly you need to validate your setting on your development machine and secondly you have to upload the settings to your production environment.

#settings.py

EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'mail.gandi.net'
EMAIL_USE_TLS = True
EMAIL = 587
EMAIL_HOST_USER = os.environ.get('EMAIL')
EMAIL_HOST_PASSWORD = os.environ.get('djangoemail')

I used env-variables to store my credentials so that the project is safe for Github. You can learn more about those here.

Enviromental variables are not secure in that sence that they’re stored as plaintext in your users home directory. That is still better than storing your credentials as plaintext in your project’s setting-file in Github.

Sources

Sources used:
https://ordinarycoders.com/blog/article/build-a-django-contact-form-with-email-backend
Stackexchange

Comments

No published comments yet.

Add a comment

Your comment may be published.