Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

django
crispy
forms
styling

What is Django crispy forms?

Abdul Monim Tariq Lodhi

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Django Crispy Forms is a Python package that styles the Django forms with the help of built-in template packs.

Example without crispy forms

A Django application with a simple form is given below:

  • We start the terminal by clicking the “Run” button.

  • We will find a simple form in the given application by clicking on the provided link below the “Run” button.

"""
ASGI config for my_project project.

It exposes the ASGI callable as a module-level variable named ``application``.

For more information on this file, see
https://docs.djangoproject.com/en/3.2/howto/deployment/asgi/
"""

import os

from django.core.asgi import get_asgi_application

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'my_project.settings')

application = get_asgi_application()

Installation

We install the Django crispy forms using the following command:

pip install django-crispy-forms

Note: Django crispy form has already been installed on our platform.

We added crispy_forms to the INSTALLED_APPS section in settings.py to integrate the Django crispy forms in the app.

In addition, we added the crispy template packs below the INSTALLED_APPS section. It is the built-in support of different CSS platforms.

Note: In the example below, bootstrap is used as a crispy template pack, but we can use unif-form, bootstrap3, and bootstrap4 here, too.

How can we use crispy forms in Django?

After installation, we added {% load crispy_forms_tags %} at the top of templates/forms/sampleform.html. It will help to call the crispy form filters in this form.

If we want to display the complete form without any modifications, we can use {{ form|crispy }} to save time. We have used {{ name_of_field|as_crispy_field }} for each field in this form. That allows adding modifications to a specific field.

All necessary modifications have been done, and we can review the code in the widget below.

Now, we click the “Run” button and see the updated form by clicking on the link given below.

"""
ASGI config for my_project project.

It exposes the ASGI callable as a module-level variable named ``application``.

For more information on this file, see
https://docs.djangoproject.com/en/3.2/howto/deployment/asgi/
"""

import os

from django.core.asgi import get_asgi_application

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'my_project.settings')

application = get_asgi_application()

RELATED TAGS

django
crispy
forms
styling

CONTRIBUTOR

Abdul Monim Tariq Lodhi
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring