Blog

How to use Django Crispy Forms Properly

Django

How to use Django Crispy Forms Properly

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?

Django web framework provided every component which is used to build a complete website. The form is the important component of a website that is used to receive data from users to store in the Database. For example, if you want to get an offer of online admission, to get students’ information we make forms that get students different information like name, email, address, class, etc. This information is store in the database for further processes. CharField, EmailField, etc are the different Django Form fields.

What is Django Crispy Forms?

In fact, Django Crispy form is the software or application which used to work with Django form in order to manage its fields, buttons in different styles. It uses the CSS classes to design HTML form fields.
As Crispy Form provides the form in Bootsrap way, you should know that attraction and good look of a website is the important component. You need to design a website in such a way that, liked by users. For this reason, we use Boostrap for developing HTML CSS components. Boostrap is not a language but a framework of HTML and CSS. So in Django Crispy Form, there is bootstrap is used to produce attractive and beautiful components.
We can use a crispy form tag to form variables in the HTML template, bootstrap design will be affected to all form fields.
It is a very easy way to design a Django form just by adding one line with the Django form variable. As mentioned below:
In {{form |crispy}}, adding |crispy all the effect will be affected to all form fields, if you want to apply a crispy style to the individual field, you can also do that, but we have discussed it in this article.

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.

pip install djangocrispyforms

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

pip install djangocrispyforms 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 FacebookTwitterPinterestInstagram, 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

Leave your thought here

Your email address will not be published.

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the compare bar
Compare
Wishlist 0
Open wishlist page Continue shopping