Django Allauth - How to add custom css class to fields?

Question

In login.html I have:

 <form class="login" method="POST" action="{% url 'account_login' %}">
  {% csrf_token %}

  {{form.as_p}}

How in the world can I add custom css classes and other atributes to the fields? Nobody on the internet seems to have had this problem before. I just need to add something as simple as a class. Thanks in advance if someone answers this. I really hope this will be helpful for someone else.

Answer 1

You are using the HTML Django creates for you by calling form.as_p just like this example.

What you might be looking for is the example right below it. Where you write more of the markup in the template.

It sounds like you might also be interested in this. Creating your form and specifying the classes to be added to the field using something like:

myfield = forms.CharField(
            widget=forms.TextInput(attrs={'class':'myclass'}))

Now calling form.myfield in the template will create an input text field with the class myclass on it.

Answer 2

You can overwrite the default LoginForm using ACCOUNT_FORMS in your settings.py, for example:

ACCOUNT_FORMS = {'login': 'yourapp.forms.YourLoginForm'}

and write a YourLoginForm accordingly.

# yourapp/forms.py

from allauth.account.forms import LoginForm

class YourLoginForm(LoginForm):
    def __init__(self, *args, **kwargs):
        super(YourLoginForm, self).__init__(*args, **kwargs)
        self.fields['login'].widget = forms.TextInput(attrs={'type': 'email', 'class': 'yourclass'})
        self.fields['password'].widget = forms.PasswordInput(attrs={'class': 'yourclass'})

Answer 3

A little hacky way to do it- but it works: Get from your console the html for the form as it is generated from {{ form.as_p }} paste it somewhere in reach. Now build your own form. with inputs and all the classes you need. For each input field in your new all classed up form- get the ID as it is written in the original form. This should make the form work. make sure you have all the inputs- including hidden ones the {{ form.as_p }} generates (not the csrf!)

Finally to show errors: for each field insert {{ form.fieldname.errors }} make sure your field name is as in the original form.

All done.

Answer 4

Everybody has this problem, but answer is simple.

If you do not want to intervene css from django app and append CSS codes into your .css file, You have to take a look output of the {{ form.as_p }} tag (believe to the power of the firebug). And write down CSS for that rendered output in to .css file

For instance; I assume {{ form.as_p }} output like below:

<form action="." method="POST" id="login_form" class="login">
<p>
    <label for="id_user_name">User Name:</label>
    <input id="id_user_name" type="text" name="user_name" maxlength="100" />
</p>
<p>
    <label for="id_password">Message:</label>
    <input type="text" name="message" id="id_password" />
</p>
</form>

As you can see in the output, the all tags has it's own id. So you can write proper css by its id.

Or just give an id to your form tag and write css for sub tags under that form tag. That is easier to write and remember. Also that css can be apply to all same id forms.

Appendix:

Also you have to copy allauth html files from library to your template folder before if you need to make changes on them.