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 AlsoCircular Grid with an Amazing Hover Effect Using HTML and CSS

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 😊