Skip to content
Related Articles

Related Articles

Improve Article
How to customize Django forms using Django Widget Tweaks ?
  • Last Updated : 04 Jan, 2021

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 filed 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.

 Attention geek! Strengthen your foundations with the Python Programming Foundation Course and learn the basics.  

To begin with, your interview preparations Enhance your Data Structures concepts with the Python DS Course. And to begin with your Machine Learning Journey, join the Machine Learning – Basic Level Course

My Personal Notes arrow_drop_up
Recommended Articles
Page :