How to Create a User Registration Page in Django (Step-by-Step Guide)

In the last blog, we set up the login and logout pages in Django. Now, we’ll continue by learning how to create a registration page.

👁‍🗨️

Thumb Rule in Django

Anytime we are creating any kind of web-page in Django it's a three-step process :

First we create a URL.
Then we create a View for the same.
And last HTML template file.

Now, let's add a URL for the registration page in our app's store/urls.py.

from django.urls import path
from . import views

urlpatterns = [
    path('',views.home,name='home'),
    path('about/',views.about,name='about'),
    path('login/',views.login_user,name='login'),
    path('logout/',views.logout_user,name='logout'),
    # Newly Created
    path('register/',views.register_user,name='register'),
]

After setting up the URLs, let's create the view for registration and add the template in templates/register.html. We'll handle its logic later.

from django.shortcuts import render,redirect
from .models import Product
from django.contrib.auth import authenticate,login,logout
from django.contrib import messages
from django.contrib.auth.forms import UserCreationForm
from .form import SignUpForm

def register_user(request):
    return render(request,'register.html',{})

Up next, we'll check the template for user registration in templates/register.html.

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Registration Form</title>
      <style>
          * {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
              font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          }

          body {
              min-height: 95vh;
              display: flex;
              justify-content: center;
              align-items: center;
              background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/media/uploads/product/adrien-olichon-gOdavfpH-3s-unsplash.jpg); 
              padding: 20px;
          }

          .form-container {
              background: rgb(40, 40, 40);
              padding: 40px;
              border-radius: 20px;
              box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
              width: 100%;
              max-width: 600px;
          }

          .form-header {
              text-align: center;
              margin-bottom: 30px;
          }

          .form-header h1 {
              font-size: 24px;
              color: #ffffff;
              margin-bottom: 8px;
          }

          .form-header p {
              color: #ffffff;
              font-size: 14px;
          }

          .form-grid {
              display: grid;
              grid-template-columns: repeat(2, 1fr);
              gap: 20px;
          }

          @media (max-width: 600px) {
              .form-grid {
                  grid-template-columns: 1fr;
              }
          }

          .form-group {
              margin-bottom: 20px;
          }

          .form-group.full-width {
              grid-column: 1 / -1;
          }

          .form-group label {
              display: block;
              margin-bottom: 8px;
              color: #ffffff;
              font-size: 14px;
          }

          .form-group input {
              width: 100%;
              padding: 12px;
              border: 1px solid #ddd;
              border-radius: 8px;
              font-size: 14px;
              transition: border-color 0.3s ease;
          }

          .form-group input:focus {
              outline: none;
              border-color: #00cc66;
          }

          .submit-btn {
              background: #00cc66;
              color: white;
              border: none;
              padding: 12px;
              width: 100%;
              border-radius: 8px;
              font-size: 16px;
              cursor: pointer;
              transition: background-color 0.3s ease;
              grid-column: 1 / -1;
          }

          .submit-btn:hover {
              background: #00b359;
          }

          .sign-in-link {
              text-align: center;
              grid-column: 1 / -1;
              color: #ff4444;
              font-size: 14px;
          }

          .sign-in-link a {
              color: #ff4444;
              text-decoration: none;
              font-weight: 500;
          }

          .sign-in-link a:hover {
              text-decoration: underline;
          }
      </style>
  </head>
  <body>
      <div class="form-container">
          <div class="form-header">
              <h1>Registration Form</h1>
              <p>Fill out the form carefully for registration</p>
          </div>

          <form method="POST" action="{% url 'register' %}">
              {% csrf_token %}
              <div class="form-grid">
                  <div class="form-group">
                      <label for="first_name">First Name</label>
                      <input type="text" id="first_name" name="first_name" required>
                  </div>

                  <div class="form-group">
                      <label for="last_name">Last Name</label>
                      <input type="text" id="last_name" name="last_name" required>
                  </div>

                  <div class="form-group full-width">
                      <label for="username">Username</label>
                      <input type="text" id="username" name="username" required>
                  </div>

                  <div class="form-group full-width">
                      <label for="email">Email Address</label>
                      <input type="email" id="email" name="email" required>
                  </div>

                  <div class="form-group">
                      <label for="password1">Password</label>
                      <input type="password" id="password1" name="password1" required>
                  </div>

                  <div class="form-group">
                      <label for="password2">Confirm Password</label>
                      <input type="password" id="password2" name="password2" required>
                  </div>

                  <button type="submit" class="submit-btn">Submit</button>

                  <div class="sign-in-link">
                      <a href="{% url 'login' %}"><strong>Already have an account? Sign In</strong></a>
                  </div>
              </div>
          </form>
      </div>
  </body>
  </html>

Now, we'll update the navbar to show the Logout option only when the user is logged in. When logged out, it will display both Login and Register options.

{% if user.is_authenticated %}
    <li class="nav__item"></li>
        <a href="{% url 'logout' %}" class="nav__link">Logout</a>
    </li>  
{% else %}
    <li class="nav__item"></li>
        <a href="{% url 'login' %}" class="nav__link">Login</a>
    </li>
    <li class="nav__item"></li>
        <a href="{% url 'register' %}" class="nav__link">Register</a>
    </li>
{% endif %}

An important step is to create a form for user registration. For this, we'll add a forms.py file in our store app.

from django import forms
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User

class SignUpForm(UserCreationForm):
    email = forms.EmailField(required=True)

    class Meta:
        model = User
        fields = ['first_name', 'last_name', 'username', 'email', 'password1', 'password2']

Now, we'll create the registration view in views.py, import the form, and write the POST request handling code.

def register_user(request):
    """
    This line creates an instance of the SignUpForm class.
    This form will be used to collect user registeration data.
    """
    form = SignUpForm()

    if request.method == "POST":
        form = SignUpForm(request.POST)
        if form.is_valid():
            user = form.save()
            username = form.cleaned_data['username']
            password = form.cleaned_data['password1']

            """
            This line authenticate the user and log them immediately after registeration.
            """
            user = authenticate(request, username=username, password=password)
            if user:
                login(request, user)
                messages.success(request, "You have registered successfully.")
                return redirect('home')
            else:
                messages.error(request, "Authentication failed. Please log in manually.")
                return redirect('login')
        else:
            messages.error(request, "Error occurred! Please check the form.")

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

It's time to test the registration page on the frontend and also check in the Django admin panel to ensure the new user is registered correctly.

Enter your details in the form to register a new user for the web app.

The credentials entered are:
- First Name: Rohit
- Last Name: Rajput
- Username: chipmunk
- Email: rohitrajput@gmail.com
- Password: (hidden for security)