13 – ADVANCE FORM RENDERING IN DJANGO WITH CRISPY FORMS

Crispy forms is mostly used by developers in Django to render the form in the templates. It allows you to easily customize the layout of the forms used in the application as shown below.

In this section we will discuss advance form rendering of Django forms using crispy forms.

1. Install crispy forms using the terminal

pip install django-crispy-forms

2. Setup your app to use crispy forms

• In the settings.py file, add crispy_forms to installed apps

INSTALLED_APPS = [
    ...
    'crispy_forms'
    ...
]

• Setup the add to use bootstrap for crispy forms.

...
CRISPY_TEMPLATE_PACK = 'bootstrap4'
...

3. Load static and crispy form tags on templates

NOTE: Static is not required but because we will be doing some css styling on our page. Therefore, we need to load static

{% load static %}
{% load crispy_forms_tags %}

4. Add link to bootstrap and our custom css file

	<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<link href="{% static 'css/stylesheet.css' %}" rel="stylesheet">

5. Style the form on the templates. We will be using the entry created in blog # 08 of this inventory management series

<div class="myForm">
    <form method='POST' action=''>{% csrf_token %}
        <div class="row">
            <div class='col-sm-6'>
                <div class="form-row">
                  <div class="form-group col-md-6">
                    {{ form.invoice_date|as_crispy_field }}
                    {{ form.name|as_crispy_field }}
                  </div>
                  <div class="form-group col-md-6">
                    {{ form.invoice_number|as_crispy_field }}
                    {{ form.phone_number|as_crispy_field }}
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-md-6">
                    {{ form.line_one|as_crispy_field }}
                  </div>
                  <div class="form-group col-md-2">
                    {{ form.line_one_quantity|as_crispy_field }}
                  </div>
                  <div class="form-group col-md-2">
                    {{ form.line_one_unit_price|as_crispy_field }}
                  </div>
                  <div class="form-group col-md-2">
                    {{ form.line_one_total_price|as_crispy_field }}
                  </div>
                </div>

                <div class="form-row">
                  <div class="form-group col-md-6">
                    {{ form.line_two|as_crispy_field }}
                  </div>
                  <div class="form-group col-md-2">
                    {{ form.line_two_quantity|as_crispy_field }}
                  </div>
                  <div class="form-group col-md-2">
                    {{ form.line_two_unit_price|as_crispy_field }}
                  </div>
                  <div class="form-group col-md-2">
                    {{ form.line_two_total_price|as_crispy_field }}
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-md-12">
                    {{ form.invoice_type|as_crispy_field }}
                  </div>
                  <div class="form-group col-md-12">
                    {{ form.total|as_crispy_field }}
                  </div>
                </div>

                <button type="submit" class="btn btn-primary">Save</button>

                <!-- <input type="submit" value='Submit'/>   -->
            </div>
        </div>
    </form>
</div><!-- End myform -->