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
crispyto 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.
Top comments (0)