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

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

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.pyfrom django.contrib.auth.forms import UserCreationFormfrom django import formsfrom django.contrib.auth.models import Userclass CustomUserForm(UserCreationForm):    email = forms.EmailField(required=True)    class Meta:        model = User        fields = ['username', 'email', 'password1', 'password2']#baltlogs.com

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

Twitter

Registration Page using UserCreationForm (Django) Part 1

Registration Page using UserCreationForm (Django) Part 2

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

Personal Website