How to use Django Crispy Forms Properly

In this article, you will learn that how you can use Django Crispy Forms properly in your Django website or application. Every website or application contains a form used to collect data from users. The crispy form did not perform any functionality just it gives a good look to form components. You will get more information if you read this article from start to end. Let’s start to learn!

What is Django Form?

What is Django Crispy Forms?

How you can use Django Crispy Form?

To use Django Cripsy Form in your Django website you have to follow below all steps. You will be able to use it in any Django project. It is very easy to use than creating form bootstrap.

1) Install django-crispy-forms

PIP  is the package management software written in Python programming language, we use pip to install python-based libraries. So to install Django crispy form you have to use the following command.

If you want to install Django Crispy Forms with a specific version then use the following command:

pip install django–crispy–forms version = x

2) Include in INSTALLED_APPS

You need to go to the settings.py file of your project and add crispy_forms in INSTALLED_APPS

INSTALLED_APPS = [
‘django.contrib.admin’,
‘django.contrib.auth’,
‘django.contrib.contenttypes’,
‘django.contrib.sessions’,
‘django.contrib.messages’,
‘django.contrib.staticfiles’,
‘crispy_forms’,
]

3) Include Template packs in settings.py

These are template packs, you can select any one of them, it will be your default template pack for your project. For example:

• bootstrap
• bootstrap3
• bootstrap4
• uni-form
• foundation
• tailwind

In settings.py file you have to define tempatel peck as you are seeing in the following.

CRISPY_TEMPLATE_PACK = ‘uni_form’

OR

CRISPY_TEMPLATE_PACK = ‘bootstrap4’

OR

CRISPY_TEMPLATE_PACK = ‘bootstrap’

etc…

4) Load the crispy_forms_tags in HTML template

After the crispy template pack setting, you have to load the crispy form tag in that template in which you want to display the form. If you did not use it, you will not get any effect.

So at the top of the page, you have to include this line of code.

{% load crispy_forms_tags %}

5) Add the |crispy OR |as_crispy_field filter form variable

a) Use of |crispy

You have to just add  |crispy with your Django {{form}} variabel as coming from views.py file.

Go to tempalte file in which you want to dispaly a form. Then add following code to make use of crispy form. After adding |crispy with form vairbale, you will see that it have boostrap affect.

{% load crispy_forms_tags %}

<!–Jafri Contact form–>

<form method=”post”>

<!–For security reasons, use CSRF token for post method–>
{% csrf_token %}
{{form|crispy}}

</form>

b) Use of |as_crispy_field

You can use |as_crispy_field instead of |crispy if you want to apply bootstrap effects on individual fields. Just add |as_crispy_field with that field, you want to get the effect.

Go to forms.py file and add |as_crispy_field with indiviusal fields.

{% load crispy_forms_tags %}

<!–Jafri Contact form–>
<form method=”post”>
{% csrf_token %}
{{form.f_name|as_crispy_field}}
{{form.l_name|as_crispy_field}}
{{form.s_email_address|as_crispy_field}}
</form>
</div>

Now! what you have to do?

As you have understood this article about “Django Crispy Forms”, now you must follow instructions as discussed in this article. In case of any issues or problems, don’t worry, you can discuss them with us.

On other hand, If you have any suggestions or knowledge about this article, you can share it with us, we will appreciate you!

If this article is good then share it on Facebook, Twitter, Pinterest, Instagram, etc.

Advanced Tutorials for Beginners

Render Form Field Manually – Django Form | Django Tutorials

How to Retrieve DjangoForm Data Complete Guide | Django Tutorials

Django ModelForm | Complete Django Tutorials

Complete Django Models | Django Tutorials