DEV Community

Cover image for Registration Page using UserCreationForm (Django) – Part 3
balt1794
balt1794

Posted on • Updated on

Registration Page using UserCreationForm (Django) – Part 3

In this post, we will style the register page by using CSS and add a couple of extra features to the register form.

Firstly, we need to edit the code for the register form.

Register.html


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

{% load static %}

<link rel="stylesheet"  href="{% static 'css/register.css' %}">

<div class="register-page">

    <div class="form">
      <form class="register-form" method="POST" action="">
        {% csrf_token %}
        <h2 class="register-title">REGISTER</h3>
        <h4>{{form.username.label}}</h4>
        {{form.username}}
        <h4>{{form.email.label}}</h4>
        {{form.email}}
        <h4>{{form.password1.label}}</h4>
        {{form.password1}}
        <h4>{{form.password2.label}}</h4>
        {{form.password2}}
        <button type="submit"> Create </button>
        <p class="message">Already registered? <a href=#>Log In</a></p>
        </form>
        {{ form.errors }}
    </div>

  </div>


<!-- baltlogs.com -->

Enter fullscreen mode Exit fullscreen mode

— Added the static tag at the top of the template in order to import files from the static folder.

— Imported register.css (css file to be created later in this tutorial).

— Added div and heading tags to organize the information in the form.

— Added a paragraph tag which contains a message and a link to the login page (to be used in part 4 of the series)

— Added form.errors tag which shows users if there is a problem with the fields in the form.

— Changed the submit input for a button input.

The first half of the following post will show you how to set up static files such CSS files and JavaScript files, and how to imported them into the HTML templates for extra styling and functionality.

Login + Registration Page in Django using HTML, CSS, JavaScript (Part II)

After you have checked out the post above, you should have the following folders created.

— Static folder

— CSS folder inside of the static folder.

Inside the CSS folder, create a new CSS file named register.css.

Register.css


/* path-> static/css/register.css */

{% load static %}

<link rel="stylesheet"  href="{% static 'css/register.css' %}">

<div class="register-page">

    <div class="form">
      <form class="register-form" method="POST" action="">
        {% csrf_token %}
        <h2 class="register-title">REGISTER</h3>
        <h4>{{form.username.label}}</h4>
        {{form.username}}
        <h4>{{form.email.label}}</h4>
        {{form.email}}
        <h4>{{form.password1.label}}</h4>
        {{form.password1}}
        <h4>{{form.password2.label}}</h4>
        {{form.password2}}
        <button type="submit"> Create </button>
        <p class="message">Already registered? <a href=#>Log In</a></p>
        </form>
        {{ form.errors }}
    </div>

  </div>


/* baltlogs.com */

Enter fullscreen mode Exit fullscreen mode

The code above styles the elements in the register.html template. Feel free to go over the styling and change the code to suit your needs.

Save changes and run the server to see the changes take place.

Screen Shot 2021-05-09 at 5.45.45 PM

The new design of the register page looks very neat. If this style looks familiar, it is because the style was used in a previous tutorial.

Test the form by creating users. Purposefully type the wrong password and see if the form displays the respective error messages after trying to submit.

Screen Shot 2021-05-09 at 5.50.24 PM

The form errors appear at the bottom of the form, but you can move them around in the code to appear somewhere else in the page.

There is one last change to make before moving onto the login page. There is a small bug in the form. If you were to leave empty the email field, the form can still be submitted. We do not want this behavior, at least for this tutorial, we want all fields to be filled in for the form to be valid. To do this, we have to add one line of code to the forms.py file.

Forms.py

#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):
    email = forms.EmailField(required=True)
    class Meta:
        model = User
        fields = ['username', 'email', 'password1', 'password2']

#baltlogs.com

Enter fullscreen mode Exit fullscreen mode

— Made email field required.

We only have to do this for the email field since this is the only custom field added. The other fields are already required by default.

Save changes and run server.

Now the register page is ready to go. You can test the form by creating some more users.

Next up, we will tackle the login page.

Part 4 –> Soon

Learn more about web development:

Twitter

Registration Page using UserCreationForm (Django) – Part 1

Registration Page using UserCreationForm (Django) – Part 2

Django 3..2..1..Takeoff Book

Personal Website

Discussion (2)

Collapse
hseritt profile image
Harlin Seritt

Good job! Very nice and very easy to follow! Thank you :-)

Collapse
balt1794 profile image
balt1794 Author

Thanks for checking it out!! I really appreciate it.