Render Forms with Django Crispy Forms

What is Django crispy forms?

Django's built-in form features are great when it comes to functionality but lack a stylized appearance. Luckily there is a Python package called django crispy forms that styles Django forms CSS for you using built-in template packs.

 

If you are new to using Django forms, then learn how to build a Django form first before moving on to the styling.

 

How to use Django crispy forms

1. pip install django-crispy-forms in your Django project
2. add crispy_forms to the list of installed apps in the settings
3. add the crispy_template_pack to the settings
4. load in the Django crispy_forms_tags in the HTML template
5. add the |crispy or |as_crispy_field filter to the Django form variable

 

---

 

How to install Django crispy forms

To use this package, you need to first pip install django crispy forms then add it to your Django project settings. 

 

Pip install django-crispy-forms

macOS Terminal

(env)User-Macbook:mysite user$ pip install django-crispy-forms

Windows Command Prompt

(env) C:\Users\Owner\desktop\code\env\mysite>pip install django-crispy-forms

Start by running the command pip install django-crispy-forms in your activated virtual environment. This package allows you to control the rendering behavior of your Django forms CSS without adding any custom CSS declarations.

 

Add Django crispy-forms to the Django settings.py

env > mysite > main > settings.py

INSTALLED_APPS = [
    'main.apps.MainConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'crispy_forms',
]

Add crispy_forms to your INSTALLED_APPS.

Be sure not to add django-crispy-forms or django_crispy_forms to the install apps. The correct spelling is just 'crispy_forms'.

 

Add crispy_template_pack to settings.py

env > mysite > main > settings.py

INSTALLED_APPS = [
    'main.apps.MainConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'crispy_forms',
]

CRISPY_TEMPLATE_PACK = 'uni_form'

Next, below the installed app list, add the crispy template pack. Use the default crispy_template_pack ='uni_form' if you are not using a CSS framework.

The crispy forms package also offers the ability to create Django crispy forms custom template packs if the CSS framework you are using is not already created. 

 

If you are using Bootstrap or looking to create a Django contact form using Bootstrap, learn how to use Django crispy forms with Django Bootstrap forms.

 

---

 

Using crispy forms in Django

After installing the app and listing it in the settings, you are ready to learn how to style a Django form with Django crispy forms' tags and filters. 

 

Load crispy_forms_tags in Django

env > mysite > main > templates > main > contact.html

#contact.html
{% load crispy_forms_tags %}

Next open contact.html, or the template file of your choice, and add load crispy_forms_tags at the top of the file. This crispy form tags code will allow you to call the crispy form filters in the form below. 

 

Use the crispy filter in a Django form

env > mysite > main > templates > main > contact.html

{% load crispy_forms_tags %}

	<!--Contact form-->
	<div style="margin:80px">
		<h1>Contact</h1>
		<h4>Contact us directly if you have any questions</h4>
		<p>
			Please write your name, email address and a message below if you have any questions.
			One of our staff members will be happy to contact you directly and answer your questions as soon as possible. 
		</p>
		<form method="post">
        {% csrf_token %}
            {{form|crispy}}
        </form>
    </div>

Add the |crispy filter to your Django {{form}} variable.

 

Use the as_crispy_field filter in a Django form

env > mysite > main > templates > main > contact.html

{% load crispy_forms_tags %}

	<!--Contact form-->
	<div style="margin:80px">
		<h1>Contact</h1>
		<h4>Contact us directly if you have any questions</h4>
		<p>
			Please write your name, email address and a message below if you have any questions.
			One of our staff members will be happy to contact you directly and answer your questions as soon as possible. 
		</p>
		<form method="post">
        {% csrf_token %}
	         {{form.first_name|as_crispy_field}}
	         {{form.last_name|as_crispy_field}}
	         {{form.email_address|as_crispy_field}}
	         {{form.comment|as_crispy_field}}
        </form>
    </div>

If you are looking to rearrange the order of the Django form fields, call each one individually then add |as_crispy_field to {{form.name_of_field}}.

 

Crispy forms submit button in Django

env > mysite > main > templates > main > contact.html

{% load crispy_forms_tags %}

	<!--Contact form-->
	<div style="margin:80px">
		<h1>Contact</h1>
		<h4>Contact us directly if you have any questions</h4>
		<p>
			Please write your name, email address and a message below if you have any questions.
			One of our staff members will be happy to contact you directly and answer your questions as soon as possible. 
		</p>
		<form method="post">
        {% csrf_token %}
            {{form|crispy}}
            <button type="submit">Submit</button>
        </form>
    </div>

The last thing needed is a submit button in the form element. Be sure to add this button element with a type attribute value of submit so the form can be submitted as a post request upon user click. This does not need a crispy form filter as there is not a custom crispy form submit button. 

Now, when you run the server, the forms should be nicely formatted and spaced.