A Developer's journey with Django crispy forms.
Published: 2023-10-07 07:33:25

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

![form look without crispy form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/10gr0o1shq83zz9z1vgf.jpg)
- 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2geyt0nglizljzxrfswo.jpg)
**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](https://django-crispy-forms.readthedocs.io/en/latest/)
[Github Repository: Diary app.](https://github.com/Chidera6/diary_app)