DjangoHow-ToBeginner · 3 min read

How to Use Crispy Forms in Django: Simple Setup and Example

To use crispy-forms in Django, first install it via pip, add 'crispy_forms' to INSTALLED_APPS, and set CRISPY_TEMPLATE_PACK in settings.py. Then, in your form template, load crispy tags and render the form with {% crispy form %} for clean, styled output.

📐

Syntax

Using Django Crispy Forms involves these key steps:

Install and add to apps: Install the package and add 'crispy_forms' to INSTALLED_APPS.
Set template pack: Define CRISPY_TEMPLATE_PACK in settings.py to choose the CSS framework (e.g., 'bootstrap4').
Load crispy tags: In your template, load crispy tags with {% load crispy_forms_tags %}.
Render form: Use {% crispy form %} inside your form to render it with crispy styling.

django

INSTALLED_APPS = [
    # other apps
    'crispy_forms',
]

CRISPY_TEMPLATE_PACK = 'bootstrap4'

# In your template.html
{% load crispy_forms_tags %}
<form method="post">
  {% csrf_token %}
  {% crispy form %}
  <button type="submit">Submit</button>
</form>

💻

Example

This example shows a simple Django form rendered with crispy forms using Bootstrap 4 styling.

django

# forms.py
from django import forms

class ContactForm(forms.Form):
    name = forms.CharField(max_length=100)
    email = forms.EmailField()
    message = forms.CharField(widget=forms.Textarea)

# views.py
from django.shortcuts import render
from .forms import ContactForm

def contact_view(request):
    form = ContactForm(request.POST or None)
    if form.is_valid():
        # process form data
        pass
    return render(request, 'contact.html', {'form': form})

# settings.py
INSTALLED_APPS = [
    # other apps
    'crispy_forms',
]
CRISPY_TEMPLATE_PACK = 'bootstrap4'

# contact.html
{% load crispy_forms_tags %}
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <h2>Contact Us</h2>
    <form method="post">
      {% csrf_token %}
      {% crispy form %}
      <button type="submit" class="btn btn-primary">Send</button>
    </form>
  </div>
</body>
</html>

Output

A Bootstrap-styled contact form with fields for name, email, and message, and a styled submit button.

⚠️

Common Pitfalls

Common mistakes when using crispy forms include:

Not adding 'crispy_forms' to INSTALLED_APPS, so tags won't load.
Forgetting to set CRISPY_TEMPLATE_PACK, which causes rendering errors.
Not loading crispy tags in the template with {% load crispy_forms_tags %}.
Using {{ form.as_p }} or other default render methods instead of {% crispy form %}, which bypasses crispy styling.

Example of wrong and right usage:

django

# Wrong in template:
<form method="post">
  {% csrf_token %}
  {{ form.as_p }}  <!-- This does not use crispy styling -->
  <button type="submit">Submit</button>
</form>

# Right in template:
{% load crispy_forms_tags %}
<form method="post">
  {% csrf_token %}
  {% crispy form %}  <!-- Correct crispy rendering -->
  <button type="submit">Submit</button>
</form>

📊

Quick Reference

Step	Description
Install package	pip install django-crispy-forms
Add to apps	Add 'crispy_forms' to INSTALLED_APPS in settings.py
Set template pack	Set CRISPY_TEMPLATE_PACK = 'bootstrap4' (or 'bootstrap5', 'uni_form', etc.)
Load tags	Add {% load crispy_forms_tags %} in your template
Render form	Use {% crispy form %} inside your form tag

✅

Key Takeaways

Install django-crispy-forms and add 'crispy_forms' to INSTALLED_APPS.

Set CRISPY_TEMPLATE_PACK in settings.py to choose your CSS framework.

Load crispy tags in templates with {% load crispy_forms_tags %} before rendering forms.

Use {% crispy form %} to render forms with crispy styling instead of default methods.

Ensure your templates include the necessary CSS framework for proper styling.