Django Crispy Forms

django-crispy-forms is a Django application that lets you easily build, customize and reuse forms using your favorite CSS framework, without writing template code and without having to take care of annoying details. In this post, I will change my existing login form to crispy form. This is my current login form at the moment.

 

{% extends 'base.html' %}

{% block title %}
{% endblock title %}

{% block content %}
<div class="container">
    <center>
    <h1>Login</h1>
    <form method="POST">
        {% csrf_token %}
            <div class="col-3 row align-items-center">
                <input type="text" class="form-control col-sm" placeholder="Enter Username" name="form_username">
            </div>
            <div class="col-3 row align-items-center">
                <input type="password" class="form-control col-sm" placeholder="Enter Password" name="form_password">
            </div>
            <div class="col-1 row align-items-center mt-2">
                <button type="submit" class="btn btn-primary">Login</button>
            </div>
    </form>
</center>
</div>
{% endblock content %}

 

 

I will create a form for login in forms.py first (make sure you import AuthenticationForm)

from django.contrib.auth.forms import UserCreationForm, UserChangeForm, PasswordChangeForm, AuthenticationForm

class LoginForm(AuthenticationForm):
    username = forms.CharField(widget=forms.TextInput(attrs={'class':'form-control'})) 
    password = forms.PasswordInput()

 

Then I will modify my existing loginuser view to use this new form I created (make sure you import LoginForm from forms.py)

from crmapp.forms import UserCreationForm, UserChangeForm, PasswordChangeForm, LoginForm

def loginuser(request):
    if request.method == 'POST':
        user_name = request.POST['username']
        pass_word = request.POST['password']
        userobj = authenticate(request, username = user_name, password=pass_word)
        if userobj is not None:
            login(request, userobj)
            messages.success(request, 'You are Logged in !')
            return redirect('crmapp')                       
        else:
            messages.success(request, 'Wrong credentials', extra_tags='red')
            return redirect('loginuser')
    else:

        if request.user.is_authenticated:
            return redirect('crmapp')
        else:
            form = LoginForm()
            context = {'form': form}
            return render(request, 'loginuser.html', context)   

 

 

Make sure you activate the virtual environment before installing crispy forms. Install django-crispy-forms on terminal

pip3 install django-crispy-forms

 

 In settings.py,

add crispy_forms in INSTALLED_APPS.

and add CRISPY_TEMPLATE_PACK = 'bootstrap4'

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'crmapp',
    'crispy_forms',
]

CRISPY_TEMPLATE_PACK = 'bootstrap4'

 

 In the templates where we want to use crispy forms we need add load crispy_forms_tags after extending to our base.html

{% extends 'base.html' %}
{% load crispy_forms_tags %}

 

And instead of form.as_p, use form|crispy

{{ form|crispy }}

 

And this is the whole form with crispy

{% extends 'base.html' %}
{% load crispy_forms_tags %}

{% block title%}
    <title>Welcome To SM Login</title>
{% endblock title%}

{% block content %}
    <div class="row justify-content-center">
        <div class="col-3">
            <div class="card">
                <div class="card-body">
                <h1>SM Login</h1>
                <form method="POST" novalidate action="{% url 'loginuser' %}">
                    {% csrf_token %}
                    {{ form|crispy }}
                    <input type="submit" value="Login" class="btn btn-danger mb-2">
                </form>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}

 

 

 It looks like this. 

 

Note that, there are * symbols next to labels. To remove those symbols open base.html and just add this css style to our base.html in <head>

    {% block title%}
    {% endblock title%}
    <style type="text/css">
    .asteriskField{
    display: none;
    }
    </style>
© selimatmaca.com. All Rights Reserved.