Easy Django form customization using django-widget-tweaks

When customizing Django forms, you usually have to add it on the forms definition using the widget. Say for example you want to add a class attribute to a form input. You have to do it this way

forms.py :

from django import forms
class VolunteerForm(forms.Form)
name = forms.TextInput()
address =forms.TextField(widget=forms.Textarea(attrs={'class':'volunteer_class'}))

While this method of adding attributes to a form instance can be easily performed, it can get quite cumbersome if different developers are working on the project (example: developer and designer).

To solve this, you can use django-widget-tweaks, it’s a lightweight application that allows developers to tweak template rendering of Django forms. By using django-widget-tweaks, there’s absolutely no need to alter python level definitions of the forms. So designers can do template customization without altering the python code. The app provides template filters that can alter CSS attributes of Django form fields.


  1. pip install django-widget-tweaks
  2. add ‘widget_tweaks’ to INSTALLED_APPS.

Below are some examples of the template filters:

add_class : Adds CSS classes to a field, separate classes with whitespace to append multiple classes at


{% load widget_tweaks %}
<!---add 2 class to form field : inputContact volunteer-->
{{ form.name|add_class:"inputContact volunteer" }}

attr : Adds or replaces an html attribute for a form field.

{% load widget_tweaks %}
<!--add new attribute name-->
{{ form.name|attr:"name : volunteer_name" }}

<!--add multiple attributes-->
{{ form.name|attr:"name : volunteer_name"|attr:"readonly=readonly"}}

<!---add attributes without parameter->
{{ form.name|attr:"disbaled"}}

set_data : Sets HTML5 data attribute. This method is a shortcut for the ‘attr’ filter that prepends the attribute names with ‘data-’ string.

{% load widget_tweaks %}
<!--data-filters:"Overtext" will be added to the input field-->
{{ form.title|set_data:"filters:Overtext"}}

Documentation : http://pypi.python.org/pypi/django-widget-tweaks