customize the way usercreationform looks in django

Question

I want to customize the UserCreationForm from django. I do the following

class myUserCreationForm(UserCreationForm):


    class Meta:
        model=User
        fields = ('username', 'password1', 'password2')
        widgets = {
            'username':TextInput(attrs={'class':'form-control'}),
            'password':TextInput(attrs={'class':'form-control'}),
            'password2':TextInput(attrs={'class':'form-control'}),
}

but its not working. When the template is rendered It creates the input boxes don't have the form-control class attached to them. What could be wrong?

Answer 1

Just stumbled upon this as I was facing the same issue. You can just overwrite the init method on the myUserCreationForm class to set the attributes for the form.

class myUserCreationForm(UserCreationForm):

    class Meta:
        model=User
        fields = ('username', 'password1', 'password2')

     def __init__(self, *args, **kwargs):
        super(myUserCreationForm, self).__init__(*args, **kwargs)

        self.fields['username'].widget.attrs['class'] = 'form-control'
        self.fields['password1'].widget.attrs['class'] = 'form-control'
        self.fields['password2'].widget.attrs['class'] = 'form-control'

Answer 2

You should override fields above class Meta. This works for me:

class CustomCreateUserForm(UserCreationForm):

username = forms.RegexField(
    label=_("Login"), max_length=30, regex=r"^[\w.@+-]+$",
    help_text=_("Required. 30 characters or fewer. Letters, digits and "
                "@/./+/-/_ only."),
    error_messages={
        'invalid': _("This value may contain only letters, numbers and "
                     "@/./+/-/_ characters.")},
    widget=TextInput(attrs={'class': 'form-control',
                            'required': 'true',
                            'placeholder': 'Login'
    })
)

password1 = forms.CharField(
    label=_("Password"),
    widget=forms.PasswordInput(attrs={'class': 'form-control',
                                      'required': 'true',

    })
)
password2 = forms.CharField(
    label=_("Password confirmation"),
    widget=forms.PasswordInput(attrs={'class': 'form-control',
                                      'type': 'password',
                                      'required': 'true',
    }),
    help_text=_("Enter the same password as above, for verification.")
)

first_name = forms.CharField(
    label=_("Name"),
    widget=forms.TextInput(attrs={'class': 'form-control',
                                  'type': 'text',
                                  'required': 'true',
    }),
    help_text=_("Enter user first and last name.")
)

email = forms.CharField(
    label=_("Email"),
    widget=forms.TextInput(attrs={'class': 'form-control',
                                  'type': 'email',
                                  'placeholder': 'Email address',
                                  'required': 'true'
    })
)

class Meta:
        model = User

Answer 3

You need to create your form from sctratch, it should not extend the UserCreationForm. The UserCreationForm have a username field explicitly defined in it as well as some other fields. You can look at it here.

Answer 4

class myUserCreationForm(UserCreationForm):

    password1 = forms.CharField(
        label='Password',
        widget=forms.PasswordInput(attrs={'class': 'form-control'})
    )
    password2 = forms.CharField(
        label='Password',
        widget=forms.PasswordInput(attrs={'class': 'form-control'})
    )

    class Meta:
        model = User
        fields = ('username', 'password1', 'password2')
        widgets = {
            'username': TextInput(attrs={'class': 'form-control'}),
            # 'password': TextInput(attrs={'class': 'form-control'}),   # Remove This Line
            # 'password2': TextInput(attrs={'class': 'form-control'}),  # Remove This Line
        }