How to add form control to a Django Form?

Question

I'm try to add form control to a form app I made for Django. I have created the app already and want to add the form into a bootstrap template, however I don't know how to add bootstrap's sleeker text-box for my email field.

I would like to end up with something like the sign-in field found in the corner of this bootstrap template (albeit without the password field): http://getbootstrap.com/examples/jumbotron/

My code in my signup.html file looks like this:

{% extends 'base.html' %}

{% block content %}
    <div class="col-sm-12">
            <form method='POST' action=''> {% csrf_token %}
                {{ form.as_p }}                       
                <input type='submit' class='btn btn-success btn-lg'>
            </form>
    </div>
{% endblock %}

The code for the bootstrap site above looks like this (I got rid of the password part for clarity): I don't know how to integrate the django app into this code so that the site will post signups to my database.

<form class="navbar-form navbar-right" role="form">
  <div class="form-group">
    <input type="text" placeholder="Email" class="form-control">
  </div>
  <button type="submit" class="btn btn-success">Sign in</button>
</form>

How do I integrate the two? Thanks in advance.

Form fields can be added like this: {{ form.email|add_class:"form-control"|attr:"placeholder:Email"|attr:"type:text" }} in place of {{ form.as_p }} — anuragal, Jan 09 '14 at 05:13
Does this answer your question? [Add class to form field Django ModelForm](https://stackoverflow.com/questions/29716023/add-class-to-form-field-django-modelform) — user202729, Aug 14 '21 at 00:41

score 11 · Answer 1 · answered Jan 26 '14 at 22:10

11

For reference, if you're for example using a ModelForm you can just override the init method of your form like this:

def __init__(self, *args, **kwargs):
        super(MemberForm, self).__init__(*args, **kwargs)
        for field_name, field in self.fields.items():
            field.widget.attrs['class'] = 'form-control'

answered Jan 26 '14 at 22:10

Milo Wielondek

4,164
3
33
45

4

Be careful as this overrides any given class attrs! – gabn88 Feb 07 '17 at 06:06

score 10 · Answer 2 · answered Dec 26 '18 at 07:05

def __init__(self, *args, **kwargs):
    super(YourModelForm, self).__init__(*args, **kwargs)
    for field_name, field in self.fields.items():
        if field.widget.attrs.get('class'):
            field.widget.attrs['class'] += ' form-control'
        else:
            field.widget.attrs['class']='form-control'

will not override the given class attrs

score 1 · Answer 3 · answered Jan 09 '14 at 07:30

Try using django-bootstrap3 app.

{% load bootstrap3 %}

<form method="post" action="" >
    {% csrf_token %}
      {% bootstrap_form form layout="inline" %}
    {% buttons%}
    <button type="submit" class="btn btn-sucess"> Signin </button>
    {% endbuttons %}
  </form>

Hope this gives you right direction. You can try various parameters provided by the app to suite your layout.

score 1 · Answer 4 · answered Mar 02 '18 at 10:13

Adding the class directly to the Form Field as Attribute, seemed the DRY'est way for me.

name = forms.CharField(widget=forms.TextInput(attrs={"class":"form-control"}))

message = forms.CharField(widget=forms.Textarea(attrs={"class":"form-control"}))

This way you don't need to edit anything anywhere else. You can add as many classes to specific fields this way as you want.

How to add form control to a Django Form?

4 Answers4

Linked