Django Crispy Forms — what are they about?

Django-crispy-forms is an application that helps to manage Django forms. It allows adjusting forms’ properties (such as method, send button or CSS classes) on the backend without having to re-write them in the template. This solution is much more readable than plain Django forms and makes rendering the form template really easy — you can even limit it to one line of code. What’s more, django-crispy-forms can affect the appearance and style of the form by adding css classes to the the entire form as well as to individual fields, their labels, or buttons.

Installation

Installation of django-crispy-forms is quite standard. You will need to use a package manager “pip” or “easy_install”, then add an installed application ‘crispy_forms’ to the INSTALLED_APPS list. If you plan on using Bootstrap (or any other CSS framework), then you will also have to import it to the project. That’s it when it comes to a basic installation process — in order to learn more about the details and more advanced options check out the official django-cripsy-forms documentation.

crispy template tag — a one line form

Now I’ll show you how to utilize django-crispy-forms to move all the form’s logic and layout from templates to Python code. At first you need to create a simple form and place it in a HTML template by using the {% crispy %} template tag. Template tags are processed by Django’s template engine in order to perform various tasks, in this case — to output the form’s HTML based on the code behind it.

Form’s code:

The form’s instance needs to be put in the template context .In this example the variable name will be “form”. Then you need to load crispy_forms_tags and use the {% crispy {%} tag to render the form:

This is what the rendered form should look like:

The HTML’s <form method=”post”> and <input type=”hidden” name=”csrfmiddlewaretoken” value=”somevalue” /> markers are rendered automatically. Each of the fields will have the following structure:

As you can see, crispy forms use bootstrap classes by default, which affect this properly arranged, but simple layout. A Django form (without any additional styles) is displayed as a set of fields which labels are arranged one by one in the same line:

Crispy-forms by default displays a form in a much nicer way.

A similar effect can be achieved by using a “crispy” filter instead of template tag, but then it will be necessary to add a <form> marker and a csrf token:

Where’s the button?

Created form lacks an approval button and the address (ie. action) to which we would like to send the data from completed fields.

Right now you will need to use something very essential for django-crispy-forms, which is a helper. In the form’s constructor you’ll have to add a previously imported FormHelper class. This will allow you to use all of the previously mentioned modifications of form.

At the beginning you’ll have to add id, button, action and method (“post” method is also by default added to the <form> marker):

As a result, a button will appear under the form.

In the code you’ll also see parameters that you previously set.

Form’s layout

At this moment you’ll try to affect the layout of the form by using, among others, bootstrap classes.

After that your form will look like this:

The “form-horizontal” class added to the form ensured that fields in a column are arranged one by one. Then, by using the Layout class, you’ll define the appearance details of specific form fields. Some of those fields are grouped, particular CSS classes and styles (such as inline, placeholder, title, etc) are added to the generated HTML.The last two fields are organized into tabs. All of this was possible thanks to such imported objects as for instance Field, Div or Fieldset, Tab, which can be successfully nested.

This is only a small part of django-crispy-forms capabilities. Of course, there are more of them — for example “helper” can be used in django views, it can be overwritten, you could even create your own templates for specific fields in a form. You could also directly define the HTML code to be added to the form. If you’re interested in django-crispy-forms, once again I encourage you to read its official documentation.

Originally published at www.merixstudio.com.