A Developer's journey with Django crispy forms.

Introduction

Django, a powerful web framework, simplifies web development tasks. However, the default rendering of forms often lacks the visual appeal desired for a seamless user experience. In my journey with Django, I encountered this challenge, especially as I had limited CSS skills then. In this article, I will share how I transformed my basic Django forms into aesthetically pleasing ones using Django Crispy Forms.

Django crispy forms is a third party package, that helps one to create better Django form. To use it, you need to install the package using pip install django-crispy-forms and then add crispy-forms to your installed apps.

The entire project I built is at this repository, https://github.com/Chidera6/diary_app.
Here are some of my files.

{% extends "dia/base_category.html" %}
{% block title %}Register{% endblock %}
{% block content %}
<div class="container h-100">
    <div class="row h-100 justify-content-center align-items-center">
        <div class="col-10 col-md-8 col-lg-6">       
            <div class="container py-5">
                <h1>Register</h1>
                <form method="POST">
                    {% csrf_token %}
                    {{ register_form}}                    
                    <button class="btn btn-primary" type="submit">Register</button>
                </form>
                <p class="text-center">If you already have an account, <a href="/login">login</a> instead.</p>
            </div>
        </div>
    </div>
{% endblock %}

views.py

def register_request(request):
    if request.method == "POST":
        form = NewUserForm(request.POST)
        if form.is_valid():
            user = form.save()
            login(request, user)
            return redirect("dia:home")
        messages.error(request,"Unsuccessful registration. Invalid information.")
    form = NewUserForm()
    return render (request,"dia/register.html", context={"register_form":form})

urls.py

path("register/",views.register_request,name='register')

Here is what my form looked like initially.

By loading the crispy form tag, and applying crispy to my register form just as shown in this code below, my form had a whole new look.
register.html modified.

{% extends "dia/base_category.html" %}
{% block title %}Register{% endblock %}
{% block content %}
<div class="container h-100">
    <div class="row h-100 justify-content-center align-items-center">
        <div class="col-10 col-md-8 col-lg-6">
            {% load crispy_forms_tags %}         
            <div class="container py-5">
                <h1>Register</h1>
                <form method="POST">
                    {% csrf_token %}
                    {{ register_form|crispy }}                    
                    <button class="btn btn-primary" type="submit">Register</button>
                </form>
                <p class="text-center">If you already have an account, <a href="/login">login</a> instead.</p>
            </div>
        </div>
    </div>
{% endblock %}

Here is my form's final look.

Conclusion
Django crispy form package is very beginner-friendly, yet very powerful in transforming forms. It contains other helper function that helps in form validations.