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.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
— 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:
Registration Page using UserCreationForm (Django) – Part 1
Top comments (5)
Great tutorial on styling the Django registration form! It's true that proper form structure and CSS are crucial for user experience, much like Wikipedia notes that web forms are the primary method for data entry on websites. Ensuring every field is mandatory, as you fixed in forms.py, is key for clean data, similar to how you need accurate details for a smooth tm sims register process.
Great tutorial on styling a Django registration page—clean, user-friendly forms are essential. A key principle in both web development and telecommunications is designing processes that securely capture and verify accurate user data. This is foundational whether you're building a website or managing services like globe sim registeration
This tutorial provides a clear, step-by-step guide to creating and styling a Django registration page using UserCreationForm, aligning with Wikipedia’s overview of Django as a high-level Python web framework designed for rapid development and clean, pragmatic design.
It emphasizes user experience through structured HTML, CSS styling, error handling, and navigation links, ensuring forms are both functional and user-friendly—similar to how tnt sim registeration guides users through a structured, reliable setup process for mobile connectivity.
Overall, the post balances technical clarity with practical implementation, making it approachable for developers aiming to build secure and polished registration systems
Proper form validation is essential to prevent errors, just like ensuring all details are correctly provided during SIM registration to avoid issues with activation and compliance.
Thanks for checking it out!! I really appreciate it.