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?

Dunatotatos · Accepted Answer · 2017-09-14 17:22:30Z

4

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'

edited Sep 14, 2017 at 17:22

Dunatotatos

1,75616 silver badges28 bronze badges

answered Nov 28, 2016 at 22:52

NBajanca

3,7803 gold badges30 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel Roseman · Accepted Answer · 2016-11-29 13:11:59Z

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, 2016 at 13:11

answered Nov 29, 2016 at 7:09

Daniel Roseman

602k68 gold badges911 silver badges924 bronze badges

1 Comment

NBajanca Over a year ago

Your code gives a AttributeError 'str' object has no attribute 'widget'. I resolved it in mine.

Collectives™ on Stack Overflow

How to add CSS classes to Django Built-in forms

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related