Create an Email Signature Generator with Django | Simple Guide

Creating an email signature generator with Django is a great way to learn web development while building a practical tool. This project will guide you through setting up a web application where users can create professional email signatures easily. With step-by-step instructions, you’ll implement a form for users to input their details, style the signature with a clean design, and even allow users to upload a profile image. Whether you're new to Django or looking to expand your skills, this tutorial will provide a hands-on learning experience.

Prerequisites

Before we dive in, make sure you have a basic understanding of Django and web development. You'll need the following tools and libraries installed on your machine:

• Python (version 3.6 or higher)
• Django (version 3.0 or higher)
• A text editor or IDE (such as VS Code or PyCharm)
• Basic knowledge of HTML and CSS

Setting Up the Development Environment

Installing Django

Before starting, ensure you have Python installed. You can install Django using pip:

pip install django

Creating a new Django project

Create a new Django project using the following command:

django-admin startproject signature_generator

Setting up the project structure

Navigate into your project directory:

cd signature_generator

Create a Django App

Create a new app within your project:

python manage.py startapp generator

Adding the app to the project

In signature_generator/settings.py, add generator to the INSTALLED_APPS list:

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

Creating the Email Signature Generator App

Create Forms

You’ll need a form where users can enter their details. In generator, create a new file named forms.py and add the following function:

from django import forms


class SignatureForm(forms.Form):
    name = forms.CharField(
        label='Name',
        max_length=100,
        widget=forms.TextInput(attrs={'class': 'form-control'})
    )
    title = forms.CharField(
        label='Title',
        max_length=100,
        widget=forms.TextInput(attrs={'class': 'form-control'})
    )
    email = forms.EmailField(
        label='Email',
        widget=forms.EmailInput(attrs={'class': 'form-control'})
    )
    phone = forms.CharField(
        label='Phone',
        max_length=15,
        required=False,
        widget=forms.TextInput(attrs={'class': 'form-control'})
    )
    website = forms.URLField(
        label='Website',
        required=False,
        widget=forms.URLInput(attrs={'class': 'form-control'})
    )
    image = forms.ImageField(
        label='Profile Image',
        required=False,
        widget=forms.ClearableFileInput(attrs={'class': 'form-control'})
    )

Create Views

Next, we’ll create views that handles the form submission and renders the signature. Open generator/views.py and add the following:

from django.shortcuts import render
from .forms import SignatureForm
from django.core.files.storage import FileSystemStorage


def generate_signature(request):
    if request.method == 'POST':
        form = SignatureForm(request.POST, request.FILES)
        if form.is_valid():
            image_url = ''
            if request.FILES.get('image'):
                image = request.FILES['image']
                fs = FileSystemStorage()
                filename = fs.save(image.name, image)
                image_url = fs.url(filename)

            context = {
                'name': form.cleaned_data['name'],
                'title': form.cleaned_data['title'],
                'email': form.cleaned_data['email'],
                'phone': form.cleaned_data.get('phone', ''),
                'website': form.cleaned_data.get('website', ''),
                'image_url': image_url,
            }
            return render(request, 'signature_result.html', context)
    else:
        form = SignatureForm()

    return render(request, 'signature_form.html', {'form': form})

Create Templates

Create a templates directory within the generator app and then create base.html, signature_form.html, and signature_result.html inside this directory.

Base Template (base.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Email Signature Generator</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap'>
    <style>
        body {
            margin: 0;
            font-family: 'Poppins', sans-serif;
            padding: 20px;
        }
        .signature-card {
            font-family: Arial, sans-serif;
            border: 1px solid #ddd;
            padding: 15px;
            width: 100%;
            max-width: 450px;
            background-color: #f9f9f9;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        {% block content %}
        {% endblock %}
    </div>
</body>
</html>

signature_form.html:

{% extends 'base.html' %}

{% block content %}
    <h1 class="mb-4">Generate Your Email Signature</h1>
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="mb-3">
            {{ form.name.label_tag }}
            {{ form.name }}
        </div>
        <div class="mb-3">
            {{ form.title.label_tag }}
            {{ form.title }}
        </div>
        <div class="mb-3">
            {{ form.email.label_tag }}
            {{ form.email }}
        </div>
        <div class="mb-3">
            {{ form.phone.label_tag }}
            {{ form.phone }}
        </div>
        <div class="mb-3">
            {{ form.website.label_tag }}
            {{ form.website }}
        </div>
        <div class="mb-3">
            {{ form.image.label_tag }}
            {{ form.image }}
        </div>
        <button type="submit" class="btn btn-primary">Generate Signature</button>
    </form>
{% endblock %}

signature_result.html:

{% extends 'base.html' %}

{% block content %}
    <h1 class="mb-4">Your Email Signature</h1>
    <div class="signature-card">
        <table cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, sans-serif;">
            <tr>
                {% if image_url %}
                    <td style="padding-right:20px">
                        <img src="{{ image_url }}" alt="Profile Image" class="signature-image" style="border-radius: 50%; width: 80px; height: 80px; margin-right: 7px;">
                        <div style="width: 5px; height: 80px; background:#75c8fd; float: right"></div>
                    </td>
                {% endif %}
                <td style="vertical-align: top;">
                    <p style="margin: 0; font-size: 16px; font-weight: bold; color: #333;">{{ name }}</p>
                    <p style="margin: 0; font-size: 14px; font-weight: bold; color: #555;">{{ title }}</p>
                    <p style="margin: 10px 0 0 0; font-size: 12px;">
                        <strong>Email:</strong> <a href="mailto:{{ email }}" style="color: #1a73e8; text-decoration: none;">{{ email }}</a>
                    </p>
                    {% if phone %}
                    <p style="margin: 3px 0 0 0; font-size: 12px;">
                        <strong>Phone:</strong> <a href="tel:{{ phone }}" style="color: #1a73e8; text-decoration: none;">{{ phone }}</a>
                    </p>
                    {% endif %}
                    {% if website %}
                    <p style="margin: 3px 0 0 0; font-size: 12px;">
                        <strong>Website:</strong> <a href="{{ website }}" style="color: #1a73e8; text-decoration: none;">{{ website }}</a>
                    </p>
                    {% endif %}
                </td>
            </tr>
        </table>
    </div>
    <br>
    <a href="{% url 'generate_signature' %}" class="btn btn-secondary">Generate Another</a>
{% endblock %}

Configure Media Settings

Ensure your settings.py is configured to handle media files:

# signature_generator/settings.py

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

Set Up URL Routing

Add a URL pattern for your view. In generator/urls.py (create this file if it doesn't exist), add:

from django.urls import path
from .views import generate_signature

urlpatterns = [
    path('', generate_signature, name='generate_signature'),
]

Include the app's URLs in your project's URL configuration. Open signature_generator/urls.py and include the Email Signature Generator app URLs:

from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin
from django.urls import include, path

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

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Run the Server

Finally, run the server and test your email signature generator:

python manage.py runserver

Visit http://127.0.0.1:8000/ in your browser to see the signature generator in action.

Full Email Signature Generator App Project Structure

signature_generator/
│
├── signature_generator/         # Project settings and configuration
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
│
├── generator/                   # Django app
│   ├── migrations/              # Database migrations
│   │   └── __init__.py
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── forms.py                 # Form definition
│   ├── models.py                # Models (if any)
│   ├── tests.py
│   ├── urls.py                  # App-specific URLs
│   └── views.py                 # Views for handling requests
│   ├── templates/                  # HTML templates
│   		└── base.html                # Base template with common layout
│   		└──signature_form.html  # Form for generating signatures
│   		└── signature_result.html # Display generated signature
├── media/                       # Folder for uploaded media files
│
├── manage.py                    # Django management script
└── requirements.txt             # Project dependencies

Conclusion

In this guide, we've covered how to build a functional and visually appealing email signature generator using Django. By following the steps, you now have a web application that allows users to create custom email signatures with ease. This project not only enhances your Django skills but also adds a useful tool to your portfolio. Feel free to customize and expand the project further to fit your needs or explore new features.

Read AlsoHTML and CSS Tips: Creating Engaging UI Comments Section

That’s a wrap!

I hope you enjoyed this article

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊