Django Form Rendering with Crispy Forms

Using django-cryspy-forms we can build, customize and reuse forms using one of the following CSS frameworks. Uni-form, Bootstrap or Foundation.

django-cryspy-forms provides full control without writing custom form templates.

PIP Installation:

pip install django-crispy-forms

Once installed add crispy_forms to your INSTALLED_APPS in settings.py

INSTALLED_APPS = [
    ...
    'crispy_forms',
]

You can set your default template pack for your project using the CRISPY_TEMPLATE_PACK Django settings variable.

CRISPY_TEMPLATE_PACK = 'bootstrap4'

django-crispy-forms supports many template packs.

• bootstrap
• bootstrap3
• bootstrap4
• uni-form
• foundation ( this template pack is available through crispy-forms-foundation )

Basic Django form for contact us page

from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Submit

class ContactUsForm(forms.ModelForm):
    name = forms.CharField(label='Enter your name', max_length=100, min_length=4,
                           widget=forms.TextInput(attrs={'class': 'form-control validate'}))
    email = forms.EmailField(label='Email Id', max_length=100, min_length=4,
                             widget=forms.TextInput(attrs={'class': 'form-control validate'}))
    message = forms.CharField(label='Message', min_length=4,
                              widget=forms.Textarea(attrs={'class': 'form-control validate'}))

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.layout = Layout()
        self.helper.form_id = 'id-contactUsForm'
        self.helper.form_class = 'contactUsForm'
        self.helper.form_method = 'post'
        self.helper.add_input(Submit('submit', 'Submit', css_class='btn btn-primary'))

Basic Django view

class ContactUsView(View):
    def get(self, request, *args, **kwargs):
        form = ContactUsForm()
        template_data.update({
            'form': form
        })
        return render(request, 'common/contact_us.html', template_data)

Basic Crispy Form Rendering. You need to load crispy_forms_tags in the template

{% extends 'base.html' %}
{% load static %}
{% block main_content %}

{% load crispy_forms_tags %}

<div class="container">
    <div class="row">
        <div class="col-12">
            {% crispy form %}
        </div>
    </div>
</div>

{% endblock %}

Custom Fields Placement with Crispy Forms

{% extends 'base.html' %}
{% load static %}
{% block main_content %}

{% load crispy_forms_tags %}

<form method="post">
    {% csrf_token %}
    <div class="form-row">
      <div class="form-group col-md-6">
        {{ form.name|as_crispy_field }}
      </div>
      <div class="form-group col-md-4">
        {{ form.email|as_crispy_field }}
      </div>
      <div class="form-group col-md-2">
        {{ form.message|as_crispy_field }}
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>

{% endblock %}