Skip to main content

Django Crispy Forms

Learn how to enhance a Django project with Crispy Forms

This page provides a step-by-step tutorial on Integrating Crispy Forms in Django, from simple forms to large forms, and cover styling options like Bootstrap and Tailwind.

Django Crispy Forms - Tutorial provided by AppSeed.

Let's get started.

✅ Set Up Django​

If you haven't already, create a Django project and app. You can use the following commands:

django-admin startproject project_name
cd project_name
python manage.py startapp myapp

✅ Configure Crispy Forms​

Install Crispy Forms using pip:

pip install django-crispy-forms

Add 'crispy_forms' to your INSTALLED_APPS in your project's settings.py:

INSTALLED_APPS = [
    # ...
    'crispy_forms',
]

Configure Crispy Forms to use a Bootstrap or Tailwind CSS framework. In this tutorial, we'll use Bootstrap. Add this to your settings.py:

CRISPY_TEMPLATE_PACK = 'bootstrap4'

✅ Create a Simple Form​

Let's create a simple form with two fields, "Name" and "Email." First, define the form in forms.py within your app:

# myapp/forms.py
from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Submit, Row, Column

class SimpleForm(forms.Form):
    name = forms.CharField(label="Name")
    email = forms.EmailField(label="Email")
    
    helper = FormHelper()
    helper.layout = Layout(
        Row(
            Column('name', css_class='col-md-6'),
            Column('email', css_class='col-md-6'),
        ),
        Submit('submit', 'Submit', css_class='btn-primary')
    )

In this example, we use the FormHelper and Layout from Crispy Forms to customize the form's appearance. We've arranged the fields in a two-column layout.

✅ Create the Django View​

Now, let's create a view that renders the form and a template to display it. In your views.py:

# myapp/views.py
from django.shortcuts import render
from .forms import SimpleForm

def simple_form_view(request):
    if request.method == 'POST':
        form = SimpleForm(request.POST)
        if form.is_valid():
            # Process form data
            # Redirect or render a response
    else:
        form = SimpleForm()
    
    return render(request, 'simple_form.html', {'form': form})

In the simple_form_view, we handle both GET and POST requests. On GET, we create an empty form, and on POST, we validate the form data.

✅ Create a Template​

Create a template to display the form. In your app's templates folder, create a file named simple_form.html:

<!-- myapp/templates/simple_form.html -->
{% extends "base.html" %}

{% block content %}
  <h2>Simple Form</h2>
  <form method="post" class="mt-3">
    {% csrf_token %}
    {{ form|crispy }}
  </form>
{% endblock %}

✅ Adding Routing​

In your app's urls.py, define a URL pattern for the form view:

# myapp/urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('simple-form/', views.simple_form_view, name='simple_form'),
]

✅ Styling Options (Bootstrap and Tailwind)​

With Crispy Forms configured, you can easily change the form's style to Bootstrap or Tailwind. To switch to Tailwind, modify your settings.py:

CRISPY_TEMPLATE_PACK = 'tailwind'

Then, your forms will use the Tailwind CSS framework.

Start the Project​

Run the development server:

python manage.py runserver

Visit http://127.0.0.1:8000/simple-form/ in your browser to see and submit the form.

✅ In Summary​

In this tutorial, you've learned how to integrate Crispy Forms into a Django project:

  1. Installed and configured Crispy Forms.
  2. Created a simple form with customization using the FormHelper and Layout.
  3. Created a view and template to display and handle the form.
  4. Added URL patterns to access the form.
  5. Explored styling options with Bootstrap and Tailwind.

Styling Options:

  • Bootstrap: Crispy Forms can style your forms using Bootstrap CSS classes. This provides a clean and responsive design.

  • Tailwind CSS: Tailwind is an alternative styling option, which gives you more flexibility in terms of design customization.

Limitations of Crispy Forms:

  • Crispy Forms may not handle complex form layouts or styles out-of-the-box. You may need to customize the layout further if your form has intricate designs.

  • For very large and complex forms, it can be challenging to manage the layout and styling using Crispy Forms alone. In such cases, you may need to use custom CSS or additional frontend frameworks for better control.

Remember that the flexibility and ease of use of Crispy Forms can greatly simplify form rendering and styling in your Django project, especially for smaller to medium-sized forms.

✅ Resources​