Registration Page using UserCreationForm (Django) – Part 3

#django #html #css #tutorial

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 -->

— 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.

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 */

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.

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.

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