Django
How to Create a User Registration Page in Django

How to Create a User Registration Page in Django

Rohit Rajput's photo
Rohit Rajput
·

4 min read

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 :

  1. First we create a URL.

  2. Then we create a View for the same.

  3. 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:

    • Password: (hidden for security)

Now, let's verify if the user is registered in the Django admin panel.

  • Thus, we have successfully created the user registration page for our Django website.

Connect with me :

PythonDjangoWeb DevelopmentProgramming BlogsbackendDeveloper