Hoe u e-mail verstuurt met Django

In deze tutorial gaan we stap voor stap leren hoe je e-mails kunt verzenden met Django. We behandelen hoe je Django SMTP-verbindingen kunt configureren, hoe je een app-wachtwoord voor je e-mailprovider kunt instellen, en hoe je e-mails kunt verzenden via de Django shell. We zullen ook bekijken hoe je een contactformulier kunt instellen voor je Django-app, waardoor je klanten je kunnen contacteren.

De meeste webtoepassingen gebruiken e-mail om cruciale operaties te beheren, zoals het opnieuw instellen van wachtwoorden, accountactivatie, het ontvangen van klantfeedback, het sturen van nieuwsbrieven en marketingcampagnes. De meeste van deze taken vereisen een gespecialiseerde dienst zoals SendGrid of Mailgun. Maar als je niet verwacht dat je site een enorme hoeveelheid bezoekers zal krijgen, kun je eigenlijk veel bereiken via je persoonlijke e-mailprovider.

Het verzenden van e-mails met je persoonlijke e-mail is een redelijke optie voor kleine of testprojecten, dus we gaan hier die aanpak volgen om dingen simpel te houden. Het is echter geen goed idee om je persoonlijke e-maildienst te gebruiken voor je productiewebsite. Je kunt meer leren over Gmail-verzendbeperkingen, of verwijzen naar de beperkingen van je e-mailprovider.

Opmerking: de volledige code voor deze tutorial is beschikbaar op GitHub.

SMTP begrijpen

SMTP (of het Simple Mail Transfer Protocol) is een reeks regels voor het bepalen hoe e-mails worden overgedragen van afzenders naar ontvangers. SMTP-servers gebruiken dit protocol om uitgaande e-mails te verzenden en door te sturen. (Let op dat andere protocollen bepalen hoe e-mails ontvangen worden.)

Een SMTP-server heeft altijd een uniek adres en een specifieke poort voor het verzenden van berichten, waarvan in de meeste gevallen 587 is. We zullen zien hoe de poort relevant is bij het verzenden van e-mails met Django.

Aangezien we Gmail gaan gebruiken, is het adres waarmee we werken smtp.gmail.com en de poort zal 587 zijn.

Laten we nu eens kijken hoe we e-mails kunnen verzenden met Django.

Een Django Project Maken

Elk Django project moet een virtuele omgeving hebben, aangezien we de projectafhankelijkheden niet willen verstoren. Om er een te maken, voer je het volgende uit:

python -m venv .venv

Opmerking: als je niet bekend bent met virtuele omgevingen, zorg er dan voor dat je onze handleiding over Python virtuele omgevingen bekijkt.

De bovenstaande opdracht creëert een virtuele omgeving met de naam .venv. Om deze virtuele omgeving te activeren, kun je het volgende gebruiken:

source .venv/bin/activate

Aangezien Django een derde-partijpakket is, moet je het installeren met pip:

pip install django

Dit zal de nieuwste versie van Django installeren, die je kunt controleren met pip freeze.

Om een Django-project te maken, roep je het command-line-hulpprogramma django-admin:

django-admin startproject EmailProject

Met de bovenstaande opdracht creëer je een Django-project met de naam EmailProject, maar je kunt het project met elke naam die je wilt aanmaken.

Ga nu naar de projectmap en start de server:

cd EmailProject
python manage.py runserver

Nadat je de Django-server hebt gestart, bezoek http://localhost:8000 in je browser. Je zult een automatisch gegenereerde pagina zien met de laatste Django-release-opmerkingen.

Instellingen wijzigen

Voordat je e-mails gaat verzenden, moet je de instellingenbestand wijzigen, dus laten we dat bestand zoeken met de opdracht tree:

Opmerking: voor het gemak zullen we alleen UNIX-systemcommando’s (macOS of Linux) gebruiken.

tree

De tree opdracht geeft de bestandsstructuur van een directory weer. In dit geval, aangezien we het geen specifieke directorypad geven, krijgen we iets zoals het volgende als we in de hoofdmap van het project zijn:

├── EmailProject
│   ├── asgi.py
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── manage.py

1 directory, 6 files

Het bestand dat we tijdens deze tutorial voortdurend zullen wijzigen, is de settings.py binnen de EmailProject map.

settings.py bevat alle projectconfiguratie die je nodig hebt en stelt je in staat om aangepaste variabelen in te stellen. Zoals de Django-documentatie zegt, “Een instellingenbestand is gewoon een Python-module met modulaire variabelen”.

Laten we kijken naar de instellingen die nodig zijn voor het verzenden van een e-mail met Django. Open het bestand EmailProject/settings.py en plak de volgende instellingen aan de onderkant van het bestand:

# EmailProject/settings.py

# Bottom of the file
EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = ''
EMAIL_PORT = 587
EMAIL_USE_TLS = True
EMAIL_HOST_USER = ''
EMAIL_HOST_PASSWORD = ''

Laten we de bovenstaande code analyseren door elk van deze instellingen te bekijken.

E-mail Backend

De EMAIL_BACKEND instelling declareert de backend die ons Django project zal gebruiken om verbinding te maken met de SMTP-server.

Deze variabele wijst naar de smtp.EmailBackend klasse die alle benodigde parameters ontvangt om een e-mail te verzenden. Ik beveel ten zeerste aan om de constructor van de klasse direct in de Django broncode te bekijken. Je zult verrast zijn over hoe leesbaar deze code is.

Opmerking: hoewel deze klasse de standaard EMAIL_BACKEND is, wordt het als een goede gewoonte beschouwd om expliciet te zijn in de Django-instellingen.

Alle andere e-mailinstellingen zullen gebaseerd zijn op de constructor van deze EmailBackend klasse.

E-mail host

De EMAIL_HOST instelling verwijst naar het domein van de SMTP-server die u gaat gebruiken. Dit is afhankelijk van uw e-mailprovider. Hieronder is een tabel met de SMTP-serverhost die overeenkomt met drie veel voorkomende providers:

Email provider	SMTP server host
Gmail	smtp.gmail.com
Outlook/Hotmail	smtp-mail.outlook.com
Yahoo	smtp.mail.yahoo.com

We laten deze instelling voorlopig leeg omdat we later een .env bestand gebruiken om hard-coded gevoelige sleutels of per-site configuraties te voorkomen. U zou nooit referenties rechtstreeks in code moeten instellen.

We gaan Django Environ gebruiken om dit probleem op te lossen.

E-mail Poort

De EMAIL_PORT instelling moet worden ingesteld op 587 omdat dit de standaardpoort is voor de meeste SMTP-servers. Dit blijft ook geldig voor particuliere e-mailproviders.

Deze poort wordt gebruikt samen met TLS-encryptie om de beveiliging van het e-mail verzenden te waarborgen.

E-mail Gebruik TLS

Transport Layer Security (TLS) is een beveiligingsprotocol dat op het web wordt gebruikt om de communicatie tussen webapps (Django) en servers (SMTP-server) te versleutelen.

Oorspronkelijk stellen we de EMAIL_USE_TLS variabele in op True. Dit betekent dat Django Transport Layer Security zal gebruiken om verbinding te maken met de SMTP-server en e-mails te verzenden. (Dit is verplicht voor particuliere e-mailproviders.)

E-mail Host Gebruiker

De EMAIL_HOST_USER instelling is uw persoonlijke e-mailadres. Laat het voorlopig leeg, aangezien we django-environ gebruiken om al deze referenties in te stellen.

E-mail Host Wachtwoord

De instelling EMAIL_HOST_PASSWORD is het app-wachtwoord dat je krijgt van je e-mailaccount — het proces dat we direct na deze sectie zullen uitvoeren.

Zelfde verhaal: laat deze instelling leeg, aangezien we later milieufactoren gebruiken.

Stel een App-Wachtwoord in in Gmail

Om de instelling EMAIL_HOST_PASSWORD te gebruiken, moet je toegang tot minder veilige apps activeren en een app-wachtwoord hebben van je persoonlijke e-mailadres.

Als je toegang tot minder veilige apps niet activeert, krijg je waarschijnlijk een SMTPAuthenticationError, omdat Django geen manier heeft om zich aan Google-beveiligingsprotocollen te houden.

Je kunt ervoor kiezen om je normale wachtwoord te gebruiken, maar dat zou nog meer risico inhouden dan het gebruik van een app-wachtwoord. Mijn advies is om een nieuw Gmail-account aan te maken of om een “test” e-mailadres te gebruiken.

In overweging nemend, kun je een Gmail app-wachtwoord krijgen met de onderstaande stappen. Merk op dat als je een bestaand account gebruikt en 2-stapsverificatie hebt ingeschakeld, je stappen 2 en 3 kunt overslaan:

1. Maak of Log in op een Gmail-account
2. Ga naar myaccount.google.com/lesssecureapps en schakel de optie voor minder veilige apps in.
   
3. Schakel twee-factor authenticatie in, aangezien dit vereist is om een app-wachtwoord te krijgen.
   
4. Nu je twee-factor authenticatie hebt ingeschakeld, is het tijd om een app-wachtwoord te krijgen. Dit kun je doen door naar de beveiligingssectie van je Google-account te gaan, naar beneden te scrollen naar de sectie Aanmelden bij Google, en op App-wachtwoorden te klikken.
   

Je moet je wachtwoord (accountwachtwoord) opnieuw opvragen voordat je wordt doorgestuurd naar de pagina App-wachtwoorden.

Zodra je binnen bent, klik op app kiezen, waar je een aangepaste naam voor dat app-wachtwoord kunt kiezen – zoals “Django Send Email” – en vervolgens op GENEREREN klikken.

A new window will show up with a sixteen-character password. Copy it, because we’ll need it to configure our Django project.

Als je andere e-mailproviders gebruikt, moet je de volgende handleidingen zorgvuldig lezen:

• Yahoo app-wachtwoord
• Outlook of Hotmail app-wachtwoord

Gebruik Django Environ om gevoelige sleutels te verbergen

Zelfs als je alleen e-mails verzendt in ontwikkeling, moet je geen wachtwoorden direct in broncode schrijven. Dit wordt nog belangrijker wanneer je een versiebeheersysteem gebruikt samen met GitHub om je project te hosten. Je wilt niet dat mensen toegang krijgen tot je gegevens.

Laten we eens kijken hoe we dit kunnen voorkomen door gebruik te maken van Django-environ.

Maak een .env bestand aan in de EmailProject directory (waar het settings.py bestand zich bevindt) met de onderstaande opdracht:

cd EmailProject/
ls

settings.py # Het settingsbestand moet hier zijn

touch .env

Open nu dat .env bestand en voer de volgende sleutel-waardeparen in:

EMAIL_HOST=smtp.gmail.com
EMAIL_HOST_USER=YourEmail@address
EMAIL_HOST_PASSWORD=YourAppPassword
RECIPIENT_ADDRESS=TheRecieverOfTheMails

De inhoud van dit bestand uiteenhalen:

• EMAIL_HOST: het SMTP-serveradres van je e-mailprovider. Zie de e-mailhost tabel hierboven voor snelle richtlijnen. In dit geval gebruik ik smtp.gmail.com, het Gmail SMTP-adres.
• EMAIL_HOST_USER: je e-mailadres.
• EMAIL_HOST_PASSWORD: het app-wachtwoord dat je zojuist hebt gegenereerd. Houd er rekening mee dat het geen spaties bevat.
• RECIPIENT_ADDRESS: het e-mailadres waarop je de berichten zult ontvangen. Dit is een aangepast instelling dat we later zullen aanmaken om alle e-mails naar dezelfde ontvanger te sturen.

Om gebruik te maken van deze omgevingsvariabelen, moeten we Django-environ installeren:

pip install django-environ

Opmerking: zorg ervoor dat je virtuele omgeving geactiveerd is.

Open nu de settings.py die zich bevindt in de EmailProject directory en gebruik de onderstaande code:

# EmailProject/settings.py
# Dit moet aan het begin van het bestand staan
import environ

env = environ.Env()
environ.Env.read_env()

# Vorige instellingen...
EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = env('EMAIL_HOST')
EMAIL_PORT = 587
EMAIL_USE_TLS = True
EMAIL_HOST_USER = env('EMAIL_HOST_USER')
EMAIL_HOST_PASSWORD = env('EMAIL_HOST_PASSWORD')

# Aangepaste instelling. Voor e-mail
RECIPIENT_ADDRESS = env('RECIPIENT_ADDRESS')

Eerst importeren we de environ package aan het begin van het instellingenbestand. Vergeet niet dat alle importinstructies aan het begin moeten staan.

Vervolgens creëren we een env variabele die alle sleutel-waarde paren bevat die beschikbaar zijn in de .env.

De env('KEY') instructie betekent dat we de waarde van die sleutel opzoeken. Zorg ervoor dat je je .env bestand hebt ingesteld voordat je verder gaat, want je krijgt een Django ImproperlyConfigured fout als sommige omgevingsvariabelen niet zijn ingesteld.

Let op dat RECIPIENT_ADDRESS een aangepaste instelling is die we zullen gebruiken om de e-mails naar een adres te sturen dat we kunnen openen.

Vergeet niet om het .env bestand in je .gitignore op te nemen als je Git en GitHub gebruikt. Dit kun je doen door het te openen en de volgende regel toe te voegen:

.env

1. Verzenden van E-mails met de Django Shell

Tot slot komen we bij het lekkerste deel van het artikel! Het is tijd om je eerste e-mail naar Django te sturen.

Open een terminal, activeer de virtuele omgeving en voer uit:

python manage.py shell

Dit zal een shell creëren met al de Django-instellingen die voor ons al zijn geconfigureerd. Plak binnen die gloednieuwe shell de volgende code:

>>> from django.core.mail import send_mail
>>> from django.conf import settings
>>> send_mail(
...     subject='A cool subject',
...     message='A stunning message',
...     from_email=settings.EMAIL_HOST_USER,
...     recipient_list=[settings.RECIPIENT_ADDRESS])
1

We kunnen ook een one-liner maken zonder de argumenten te specificeren:

>>> send_mail('A cool subject', 'A stunning message', settings.EMAIL_HOST_USER, [settings.RECIPIENT_ADDRESS])
1

Laten we de bovenstaande code uitleggen:

• We importeren de Django send_mail functie.
• Vervolgens importeren we het settings object dat alle globale instellingen en de per-site instellingen bevat (die in het settings.py bestand).
• Tot slot geven we alle benodigde argumenten door aan de send_mail functie. Deze functie geeft het aantal e-mails dat is verzonden terug, in dit geval 1.

Merk op hoe we het settings object gebruiken om de from_email (de e-mail waarmee je e-mails verzendt) en de recipient_list (de RECIPIENT_ADDRESS aangepaste instelling die we hebben gedefinieerd in het .env) te krijgen.

Nu, als ik mijn inbox bekijk – zoals ik de RECIPIENT_ADDRESS omgevingsvariabele heb ingesteld op mijn e-mailadres – zal ik de door Django verzonden boodschap ontvangen.

2. Bouw een geautomatiseerde contactformulier met Django

In deze sectie bouwen we een geautomatiseerd contactformulier met Django-formulieren en de ingebouwde send_mail functie. Daarnaast maken we een aangepaste functie, send(), binnen het contactformulier, zodat het gemakkelijker is om te implementeren in de views.

Laten we beginnen met het maken van de contact-app. Ga naar de hoofdmap van het project – waar manage.py zich bevindt – en voer het volgende uit:

python manage.py startapp contact

Installeer vervolgens de app in de INSTALLED_APPS variabele binnen het EmailProject/settings.py bestand:

# EmailProject/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    ...

    # Custom
    'contact',
]

Voordat we verder gaan met de contact app, laten we de urlpatterns configureren binnen het EmailProject/urls.py bestand. Dit doen we door de django.urls.include functie te importeren en de contact-URL’s in het algemene project op te nemen. Maak je geen zorgen; we zullen de contact-URL’s later configureren:

# EmailProject/urls.py

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('contact.urls')) # Contact-URL's opnemen
]

Contact Formulier

Ga naar de contact app-map en maak een forms.py bestand aan. Het is een goede gewoonte om al je formulieren in een forms.py bestand te definiëren, maar het is niet verplicht. Daarom bevat Django dit bestand standaard niet.

Je kunt het formulierenbestand maken met de volgende opdrachten:

cd ../contact/
# Je bevond je in de EmailProject-map
touch forms.py

Open het zojuist gemaakte bestand en voer de volgende importen uit:

# contact/forms.py

from django import forms
from django.conf import settings
from django.core.mail import send_mail

Het Django form module biedt ons alle benodigde klassen en velden om onze contactformulier te maken. Nogmaals importeren we het settings object en de send_mail functie om de e-mails te sturen.

Ons contactformulier zal verschillende velden bevatten en twee aangepaste methoden gebruiken: get_info(), die de door de gebruiker verstrekte informatie formateert, en send(), die de boodschap zal verzenden.

Laten we dit eens bekijken in de code:

# contact/forms.py

class ContactForm(forms.Form):

    name = forms.CharField(max_length=120)
    email = forms.EmailField()
    inquiry = forms.CharField(max_length=70)
    message = forms.CharField(widget=forms.Textarea)

    def get_info(self):
        """
        Method that returns formatted information
        :return: subject, msg
        """
        
# Gecleaned data

        cl_data = super().clean()

        name = cl_data.get('name').strip()
        from_email = cl_data.get('email')
        subject = cl_data.get('inquiry')

        msg = f'{name} with email {from_email} said:'
        msg += f'\n"{subject}"\n\n'
        msg += cl_data.get('message')

        return subject, msg

    def send(self):

        subject, msg = self.get_info()

        send_mail(
            subject=subject,
            message=msg,
            from_email=settings.EMAIL_HOST_USER,
            recipient_list=[settings.RECIPIENT_ADDRESS]
        )

Dit is een enorme klasse, dus laten we eens kijken wat we doen in elke sectie. Allereerst definiëren we vier velden die vereist zijn om de boodschap te verzenden:

• name en enquiry zijn CharFields die de naam en reden van het contactbericht vertegenwoordigen.
• email is een EmailField die de e-mail van de persoon vertegenwoordigt die contact met u wil opnemen. Houd er rekening mee dat de e-mail niet wordt verzonden vanaf het e-mailadres van de gebruiker, maar vanaf het e-mailadres dat u hebt ingesteld om de e-mails te verzenden in het Django-project.
• message is een ander CharField met als uitzondering dat we de Textarea widget gebruiken. Dit betekent dat, bij het weergeven van het formulier, er een <textarea> tag wordt weergegeven in plaats van een eenvoudige <input>.

Bij de aanpassingen in de aangepaste methoden, gebruiken we alleen de get_info methode om de door de gebruiker verstrekte informatie te formateren en twee variabelen terug te geven: subject, dat niets anders is dan het inquiry veld, en de message, die de eigenlijke boodschap zal zijn die door Django wordt verzonden.

Aan de andere kant haalt de send() methode alleen de geformatteerde informatie op uit get_info en stuurt de boodschap met de send_mail functie.

Hoewel deze sectie behoorlijk groot was, zult u zien hoe we de contactweergaven hebben vereenvoudigd door al het verzendlogica zelf in de ContactForm te implementeren.

Contact Views

Open het contact/views.py bestand en voeg de volgende importinstructies toe:

# contact/views.py
from django.views.generic import FormView, TemplateView
from .forms import ContactForm
from django.urls import reverse_lazy

Zoals u kunt zien, gaan we Django generieke weergaven gebruiken, wat ons veel tijd bespaart bij het uitvoeren van eenvoudige taken – bijvoorbeeld bij het instellen van een formulier met FormView of het maken van een weergave die alleen een template rendert met TemplateView.

Ook importeren we de ContactForm die we in de vorige sectie hebben gebouwd en de reverse_lazy functie die wordt gebruikt bij het werken met class-based views.

Verder met de views, laten we de ContactView schrijven:

# contact/views.py

class ContactView(FormView):
    template_name = 'contact/contact.html'
    form_class = ContactForm
    success_url = reverse_lazy('contact:success')

    def form_valid(self, form):
        # Roept de aangepaste send-methode aan
        form.send()
        return super().form_valid(form)

Zoals je kunt zien, bouwen we een eenvoudige FormView met behulp van de ContactForm die we hebben gemaakt. We zetten ook de template_name en de success_url op. We zullen later de HTML-sjabloon schrijven en de URLs instellen.

De form valid methode stelt ons in staat de e-mail te verzenden met behulp van de ContactForm.send() methode alleen als alle velden van het formulier geldig zijn. Dit betekent dat als de gebruiker ongeldige invoer invoert – zoals een ongeformatteerde e-mailadres – de boodschap niet wordt verzonden.

De bovenstaande implementatie van de form_valid methode zou equivalent zijn aan het volgende in een functie-gebaseerde view:

# Vorige functie gebaseerde contact_view ...

if request.method == 'POST':
    form = ContactForm(request.POST)
    if form.is_valid():
        form.send()
        return redirect('contact:success')
else:
    form = ContactForm())

Einde van deze sectie gaan we een ContactSucessView schrijven, die een succesbericht aan de gebruiker zal tonen. Aangezien we de TemplateView klasse al hebben geïmporteerd, hoeven we alleen maar vanuit te erven en de template_name eigenschap te definiëren:

# contact/views.py
class ContactSuccessView(TemplateView):
    template_name = 'contact/success.html'

Je kunt de views.py bestand bekijken op het GitHub-repository als je zorgen hebt.

Contact URL’s

Het is tijd om de URL-patronen van de contact app te creëren. Aangezien Django ons niet standaard het urls.py bestand geeft, zullen we het moeten aanmaken met de volgende opdracht (zorg ervoor dat je zich in de contact app map bevindt):

pwd
# /pad/naar/project/EmailProject/contact
touch urls.py

Open dat bestand en zet de app_name en urlpatterns variabelen op:

from django.urls import path
from .views import ContactView, ContactSuccessView

app_name = 'contact'

urlpatterns = [
    path('', ContactView.as_view(), name="contact"),
    path('success/', ContactSuccessView.as_view(), name="success"),
]

We gebruiken path om de route en zijn corresponderende weergave aan de URL-configuratie van de app toe te voegen. Wanneer we de app_name variabele instellen op 'contact', betekent dit dat de URL naamruimte van de app er zo uitziet:

contact:name_of_path
# Voor ContactView
contact:contact
# Voor ContactSuccessView
contact:success

Opmerking: een naamruimte is wat we noemen dynamische URLs in Django-templates en -weergaven.

Je kunt meer leren over de Django URL dispatcher in de officiële documentatie.

Schrijven van templates

Django templates zijn de voorkeursmethode om gegevens dynamisch weer te geven, met behulp van HTML en speciale tags die de Django Template Language ons biedt.

Voor deze specifieke app gebruiken we drie templates:

• base.html: alle andere templates zullen ervan erven. Het zal alle HTML-skelet bevatten dat alle templates moeten hebben, evenals koppelingen naar Bootstrap.
• contact.html: toont het contactformulier.
• success.html: toont een succesbericht.

Laten we beginnen met het maken van de template-structuur van het contact-app (zorg ervoor dat je in de contact-app map zit):

mkdir -p templates/contact/
cd templates/contact
touch base.html contact.html success.html

De bovenstaande opdrachten creëren de typische template-structuur van een herbruikbare Django-app – appnaam/templates/appnaam – en de drie templatebestanden die ik eerder noemde.

Hier is hoe de app-bestandsstructuur er nu moet uitzien:

.
├── admin.py
├── apps.py
├── forms.py
├── __init__.py
├── migrations
│   └── __init__.py
├── models.py
├── templates
│   └── contact
│       ├── base.html
│       ├── contact.html
│       └── success.html
├── tests.py
├── urls.py
└── views.py

Laten we ons wagen aan de inhoud van het base.html template:

<!-- contact/templates/contact/base.html -->

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Django Email Send</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous" />
  </head>

  <body>
    {% block body %}

    {% endblock %}
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous">
    </script>
  </body>

</html>

Zoals je kunt zien, is dit het eenvoudige skelet van een HTML-bestand dat links bevat naar Bootstrap 5. Dit stelt ons in staat om ons contact-app te stylen zonder CSS-bestanden te gebruiken.

De {% block name-of-block %} tag stelt ons in staat om een tijdelijke aanduiding te maken die “kindtemplates” zullen gebruiken. Het gebruik van deze tag maakt sjabloon-erfenis een makkelijke taak.

Voordat je aan de formulieren begint, moet je de Django crispy forms pakket installeren, waarmee we ze gemakkelijk kunnen stylen:

pip install django-crispy-forms

Nogmaals, crispy_forms is een Django-app, en we moeten deze op de INSTALLED_APPS lijst opnemen:

# config/settings.py

INSTALLED_APPS = [
    ...

    # 3rd party apps
    'crispy_forms',

    # Custom apps
    'contact',
]

# Geeft aan welk frontend-framework django crispy forms gebruiken
CRISPY_TEMPLATE_PACK = 'bootstrap4'

We gebruiken de sjablonenpakket van Bootstrap 4, omdat de Bootstrap-formulierklassen compatibel zijn tussen versie 4 en 5 (op het moment van schrijven).

Laten we nu aan de slag gaan met het contact.html sjabloon:

<!-- contact/templates/contact/contact.html -->

{% extends 'contact/base.html' %}
{% load crispy_forms_tags %}

{% block body %}
<div class="mx-auto my-4 text-center">
    <h1>Contact Us</h1>
</div>
<div class="container">
    <form action="" method="post">
        {% csrf_token %}
        {{ form | crispy }}
    <button class="btn btn-success my-3" type="submit">Send message</button>
    </form>
</div>
{% endblock %}

Let op hoe we het basis​​sjabloon hebben uitgebreid en gebruik maken van de block-placeholder. Dit maakt Django Template Language zo efficiënt, aangezien het ons in staat stelt veel HTML kopiëren en plakken te besparen.

Over het formulier gesproken, gebruiken we de methode "post", wat betekent dat onze ContactView de door de gebruiker gegeven gegevens zal verwerken en de e-mail zal verzenden als het formulier geldig is.

De {% csrf_token %} is verplicht in elk formulier vanwege beveiligingsredenen. De documentatie van Django heeft een aparte pagina over CSRF tokens en de redenen om ze te gebruiken bij het werken met formulieren.

We zullen het formulier renderen met de crispy template tag, daarom hebben we de crispy tags geladen met {% load crispy_forms_tags %}.

Ten slotte, laten we het success.html sjabloon schrijven:

{% extends 'contact/base.html' %}

{% block body %}
<div class="mx-auto my-4 text-center">
    <h1 class="fw-bolder text-success">We sent your message</h1>
    <p class="my-5">You can send another in the <a href="{% url 'contact:contact' %}">contact page</a></p>
</div>
{% endblock %}

Zoals je kunt zien, is het een eenvoudige succesmelding die een link bevat naar het contactformulier in het geval de gebruiker nog een bericht wilde sturen.

Laten we de server opnieuw starten en naar http://localhost:8000 gaan (zorg ervoor dat je de .venv hebt geactiveerd en dat je zich in de hoofdmap van het project bevindt):

python manage.py runserver

Het onderstaande plaatje toont hoe het uiteindelijke contactformulier eruit ziet.

En dit is een afbeelding van de succesmelding.

En hier is een afbeelding van de e-mail in de inbox.

Afsluiten

Gefeliciteerd! Je hebt geleerd hoe je e-mails kunt verzenden met Django en hoe je een contactformulier in Django kunt bouwen.

Er zijn vele manieren om e-mails te verzenden met Django. In deze tutorial heb je het gedaan met je persoonlijke e-mailadres, maar ik wil dat je andere tools onderzoekt en in je projecten integreert.

In deze tutorial hebben we het volgende behandeld:

• hoe je Django-instellingen moet instellen om e-mails te verzenden
• hoe je een persoonlijk e-mailaccount gebruikt om e-mails te verzenden in een klein project
• hoe je .env bestanden gebruikt om gevoelige gegevens in een Django-project te gebruiken
• hoe je een geautomatiseerd contactformulier bouwt

Voor meer informatie over Django, bekijk “Build a Photo-sharing App with Django”.

Veelgestelde vragen over hoe je e-mail kunt verzenden met Django