CODEWITHSUNDEEP
pythondjangopython-3.xdjango-formsdjango-templates
CAB
CAB

Reputation: 155

How to apply style to a Django form?

It is possible to change the style of form in the view?

I found in documentation this code:

<form action="/contact/" method="post">
    {{ form.non_field_errors }}
    <div class="fieldWrapper">
        {{ form.subject.errors }}
        <label for="id_subject">Email subject:</label>
        {{ form.subject }}
    </div>
    <div class="fieldWrapper">
        {{ form.message.errors }}
        <label for="id_message">Your message:</label>
        {{ form.message }}
    </div>
    <div class="fieldWrapper">
        {{ form.sender.errors }}
        <label for="id_sender">Your email address:</label>
        {{ form.sender }}
    </div>
    <div class="fieldWrapper">
        {{ form.cc_myself.errors }}
        <label for="id_cc_myself">CC yourself?</label>
       {{ form.cc_myself }}
    </div>
    <p><input type="submit" value="Send message" /></p>
</form>

But it just put a ugly input. I want to apply a class, or a css in this input. Is it possible?

This is my form:

class LoginView(NextUrlMixin, RequestFormAttachMixin, FormView):
    form_class = LoginForm
    success_url = '/'
    template_name = 'accounts/login.html'
    default_next = '/'


class LoginForm(forms.Form):
    email    = forms.EmailField(label='Email')
    password = forms.CharField(widget=forms.PasswordInput)

Upvotes: 1

Views: 4556

Answers (4)

Carl Brubaker
Carl Brubaker

Reputation: 1655

Use Django widget_tweaks. It’s real convenient. And you can easily change any attribute you want. 

{% load widget_tweaks %}

{% render_field form.field class=“your-class” %}

Upvotes: 0

Paulo Scardine
Paulo Scardine

Reputation: 77251

Yes. You can attach a css file to your form (place a {{ form.media }} in your template) with this:

class LoginForm(forms.Form):
    email    = forms.EmailField(label='Email')
    password = forms.CharField(widget=forms.PasswordInput)

    class Media:
        css = {
            'all': ('login-form-layout.css',)
        }
        js = (
            'https://some-cdn.com/some-framework.js'
            'login-form-script.js', 
        )

Inputs have an ID like id_fiedname so login-form-layout.css can be something like:

#id_email, #id_password {
    width: 200px;
}

You can do a lot with CSS and with javascript there are endless possibilities.

You may want to check "Customizing widget instances" at the official Django documentation. For example, you can attach arbitrary attributes to the input tag using the attrs argument:

email = forms.EmailField(
    label='Email',  
    widget=forms.TextInput(attrs{
        'class': 'my-super-special-input', 
        'placeholder': "[email protected]"
    }),
)

There are other possibilities there, so check it out.

Upvotes: 2

Lemayzeur
Lemayzeur

Reputation: 8525

You can do so by applying some attributes to the widget that you use: more info can be found here Official Django Documentation

for instance:

email    = forms.EmailField(label='Email',
    widget=forms.TextInput(attrs={'class':'class_value','placeholder':"Email here"}))

If you want to have the full control of the form html by keeping the same behavior as the one generated by django, the following will work

<input type="email" name="email" id="id_email" value="{{form.email.value}}" class='class_name' attrs='attrs' >

{{ form.email.errors}}  <!-- track errors for this field -->

Upvotes: 2

Diego Avila
Diego Avila

Reputation: 738

If you are use a custom css set the class CSS on the forms example:

email    = forms.EmailField(label='Email')
email.widget.attrs.update({'class':'customClass', 'required':'required'})

in this case set a customClass if you are using Bootstrap maybe you can use someone like this:

email    = forms.EmailField(label='Email')
email.widget.attrs.update({'class':'form-control', 'required':'required'})

this code is on your forms.pyp .. good luck don't forget load your css file on your template

Upvotes: 3

Related Questions