Adding widgets to django form does not update the forms

So I have a login form for which I am trying to edit the css attributes. However I cannot seem to find the correct solution. Below is my views.py, forms.py and html snippet accordingly.

def index(request):
    context = {}
    if request.method == 'POST':
        form = LoginForm(data=request.POST)
        context['form'] = form
        logging.debug(form.is_valid())
        logging.debug(form.cleaned_data)
        logging.debug(form.errors)
        if form.is_valid():
            logging.debug("form valid")
            username = form.cleaned_data.get('username')
            password = form.cleaned_data.get('password')
            if authenticate(username, password):
                logging.debug("logged IN")
                messages.success(request, f' welcome {username} !!')
                return redirect('loggedIn')
            else:
                logging.debug("wrong!")
                messages.info(request, f'Password or Username is wrong. Please try again.')
    form = AuthenticationForm()
    return render(request, "index_logged_out.html", {"form": form})
class LoginForm(forms.ModelForm):
    class Meta:
        model = WebsiteRegistrant
        fields = ['username', 'password',]
        widgets = {
                'username': TextInput(attrs={
                    'class': "form-control",
                    'style': 'max-width: 300px;',
                    'placeholder': 'Username'
                    }),
                'password': PasswordInput(attrs={
                    'class': "form-control", 
                    'style': 'max-width: 300px;',
                    'placeholder': 'Password'
                    })
            }
<form method="POST">
                        {% csrf_token %}
                        <center>
                            <div class="form-group" style = "margin-bottom: 10px; width: 300px">
                                {{ form.password }}
                            </div>
                            <div class="form-group" style = "margin-bottom: 10px; width: 300px">
                                {{ form.password }}
                            </div>
                            <button class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" type="submit" style="width: 300px;">Login</button>
                        </center>
                    </form>

Any idea what I am doing wrong or what I could fix in order to add the class name and attributes as I have defined in the form widget?

Thanks

Back to Top