Django forms are a great feature to create usable forms with just few lines of code. But Django doesn’t easily let us edit the form for good designs. Here, we will see one of the ways to customize Django forms, So they will look according to our wish on our HTML page. Basically we will check the methods to include our own custom css, classes, or id to individual fields in forms.
Let’s say, we are having a simple Django form that will have four fields:
- First Name
- Last Name
- Username (available default)
- Password (available default)
- Confirm Password (available default)
We are not going to discuss how we create this form but rather than we are going to see how to customize the frontend of Django forms. To create a form in Django you can check out – How to create a form using Django Forms ?
The initial Django forms (available default looks like)
The default Django form
which will have a simple code like
HTML
{{form}} <input type="submit" value="submit"> |
Of course, there are many default methods that Django provide us by default like using form.as_p which looks like
Django form using as_p
that will have a simple code like
HTML
{{form.as_p}}<input type="submit" value="submit"> |
But we need to add custom classes and CSS to forms.
How to customize Django forms using Django Widget Tweaks ?
So, Let’s see how to make it look good like this
Django form input form customized
So we are going to implement it using Django Widget Tweaks. Let’s install django-widget-tweaks using pip
pip install django-widget-tweaks
Now go to the INSTALLED_APPS in settings.py and add widget_tweaks in INSTALLED_APPS
INSTALLED_APPS = [ 'django.contrib.auth', #...........(some more apps already here maybe)...... 'widget_tweaks', #...........(some more apps already here maybe)...... ]
So Now we have Django widget tweaks installed let’s import it in the HTML file in which we are working write this {% load widget_tweaks %} in the top of your HTML page and we have to simply change Every field:
HTML
{% load widget_tweaks %}<div class="form-group"> // first_name is the name by which first name is created in django forms {% render_field form.first_name class="form-control" placeholder="First Name" type="text" %}</div><div class="form-group"> // last_name is the name by which last name is created in django forms {% render_field form.last_name type="text" class="form-control" placeholder="Last Name" %}</div><div class="form-group"> // username is the default name of username in django forms {% render_field form.username type="text" class="form-control" id="exampleInputUsername" placeholder="Username" %}</div><div class="form-group"> // password1 is the default name of password in django forms {% render_field form.password1 type="password" class="form-control" id="exampleInputPassword" placeholder="Password" %}</div><div class="form-group"> // password2 is the default name of confirm password in django forms {% render_field form.password2 type="password" class="form-control" id="exampleInputPassword1" placeholder="Confirm Password" %}</div><div> <button type="submit" value="Submit" > Register </button></div> |
Each field’s name has been explained in “// ” in code. In the CSS file, we will have all our code for customizing each field by class or id.
So let’s see how Django tweaks help us See in each of the fields, we have our class because of which we can add any CSS by our choice. So, we have to just design the HTML with css, and use it in Django by just replacing the input tag with render_field and form.field_name with {% %} at the end and design it with our choice.
