Registration Page using UserCreationForm (Django) - Part 2

#django #html #tutorial #webdev

In the last post, we created a registration form using the UserCreationForm provided by Django authentication system and tested the form by creating some users.

For this post, let’s customize the registration form to add an extra field for emails.

In part 1 of the series, we also created a forms.py file in the users app folder.

If you did not create this file, please create a forms.py file in the users app folder now.

The users folder tree should look like the one below.

Forms.py

Open forms.py and add the following code


#path -> users/forms.py

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


class CustomUserForm(UserCreationForm):
    class Meta:
        model = User
        fields = ['username', 'email', 'password1', 'password2']

#baltlogs.com

— Imported UserCreationForm and User model which is provided by Django authentication system.

— Imported Django forms.

— Created a custom form called CustomUserForm using the User model. The custom form has similar fields as the default form provided by Django. Only difference is the email field has been included in the custom form.

Feel free to add more fields such as first name, last name, etc.

Edit views.py to render the new custom form.

Views.py


#path -> users/views.py

from django.shortcuts import render, redirect
from django.contrib.auth.forms import UserCreationForm
from .forms import CustomUserForm

def login_page(request):

    return render(request, 'users/login.html')

def register_page(request):
    if request.method != 'POST':
        form = CustomUserForm()
    else:
        form = CustomUserForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('users:login')

    context = {'form': form}

    return render(request, 'users/register.html', context)

#batlogs.com

— Imported the new form (CustomUserForm) from forms.py.

— Replaced UserCreationForm with CustomUserForm to render the new form.

Learn more about User model and UserCreationForm provided Django authentication system below.

Django Authentication System

If you were to render the form again, you should see the email field appear in the form. However, before rendering the form, open register.html

Register.html


<!-- path -> users/templates/users/register.html -->

<form method="POST" action="">
    {% csrf_token %}
    <h3>REGISTER</h3>
    <h5>{{form.username.label}}</h5>
    {{form.username}}
    <h5>{{form.email.label}}</h5>
    {{form.email}}
    <h5>{{form.password1.label}}</h5>
    {{form.password1}}
    <h5>{{form.password2.label}}</h5>
    {{form.password2}}
    <input type="submit" name="Create User">
</form>

<!-- baltlogs.com -->

— Displayed the form fields individually in order to get rid of the password requisites shown on the screen for the register form.

Save the template and run server.

Create some users to test that the email field is working. Go to the admin panel and make sure that the emails for newly created users appear in the admin panel.