How to add CSS classes to Django Built-in forms

Question

I'm using Django Built-in forms, more precisely the PasswordChangeForm.

It works perfectly until the point where I want it to look like the rest of the website (Bootstrap). I followed the approach in this answer that is inheriting the class and built a new one by myself:

class PasswordChangeCustomForm(PasswordChangeForm):
    old_password = CharField(required=True,
                  widget=PasswordInput(attrs={
                    'class': 'form-control'}))

    new_password1 = CharField(required=True,
                  widget=PasswordInput(attrs={
                    'class': 'form-control'}))

    new_password2 = CharField(required=True,
                  widget=PasswordInput(attrs={
                    'class': 'form-control'}))

But it annoys me to repeat all this code. Is there another way to achieve the same thing (add the class form-control to the each field) without re-writing each field?

score 4 · Accepted Answer · edited Sep 14 '17 at 17:22

With the objective of not re-writing the fields, I found out that I could simply update the Widget:

class PasswordChangeCustomForm(PasswordChangeForm):
    def __init__(self, user, *args, **kwargs):
        super(PasswordChangeCustomForm, self).__init__(user, *args, **kwargs)
        self.fields['old_password'].widget.attrs.update({'class': 'form-control'})
        self.fields['new_password1'].widget.attrs.update({'class': 'form-control'})
        self.fields['new_password2'].widget.attrs.update({'class': 'form-control'})

Particularly useful for Bootstrap (where all fields need the class form-control) is the answer from @daniel-roseman:

class PasswordChangeCustomForm(PasswordChangeForm):
    def __init__(self, user, *args, **kwargs):
        super(PasswordChangeCustomForm, self).__init__(user,*args, **kwargs)
        for field in self.fields:
            self.fields[field].widget.attrs['class'] = 'form-control'

Daniel Roseman · Answer 2 · 2016-11-29T13:11:59.817

3

You can take your code one step further and update all the widgets automatically:

super(PasswordChangeCustomForm, self).__init__(*args, **kwargs)
for field in self.fields.values():
    field.widget.attrs['class'] = 'form-control'

edited Nov 29 '16 at 13:11

answered Nov 29 '16 at 07:09

Daniel Roseman

588,541
66
880
895

Your code gives a AttributeError `'str' object has no attribute 'widget'`. I resolved it in mine. – NBajanca Nov 29 '16 at 13:01

How to add CSS classes to Django Built-in forms

2 Answers2