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.

• register.html

{% 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.

References
Django crispy forms documentation
Github Repository: Diary app.