How to style a django form - bootstrap

Question

I am styling my django app but Iam having trouble styling the forms. I have a contact form, in my forms.py and then I have use it in a template.

<form class="form-contact" action="" method="POST">
{% csrf_token %} 
<input type="text" name="Name" id="id_name" value="{{form.name}}" />
<input type="submit" value="Submit"  class="btn btn-primary">
</form>

That isn't working. I have also tried this, but still no luck, it shows styled fields but doesn't retrieve the information ( I get a message under my {{form.errors}} .

<form class="form-contact" action="" method="POST">
{% csrf_token %} 
{% for field in form %}
<fieldset class="form-group">
    <label class="control-label" for="id_{{ field.name }}">{{ field.label }}</label>
         <div class="form-control">
        <input type="text" class="form-control"
            name="{{ field.label }}"
            id="{{ field.name }}"
            value="{{ field.name }}" >
         {{ field }} 
        <p class="help-text">{{ field.help_text }} </p>
       </div>
</fieldset>
{% endfor %}
   <input type="submit" value="Submit"  class="btn btn-primary">
</form>

Any hint would be apreciated. Regards.

EDIT: This second code, is actually showing 2 input fields for each form field. If I fill the second one, the form works but, this second input has no styling...

Answer 1

"EDIT: This second code, is actually showing 2 input fields for each form field."

The first input is being generated by the <input> tag that you've explicitly written:

<input type="text" class="form-control"
            name="{{ field.label }}"
            id="{{ field.name }}"
            value="{{ field.name }}" >

The second input is being generated by the {{ field }} variable:

 <div class="form-control">
        <input type="text" class="form-control"
            name="{{ field.label }}"
            id="{{ field.name }}"
            value="{{ field.name }}" >
         {{ field }} <-- this one
        <p class="help-text">{{ field.help_text }} </p>
       </div>

"If I fill the second one, the form works but, this second input has no styling..."

The styling isn't working because when the {{ field }} input is rendered, there's no css classes on it.

Additionally, you've switched some of the attributes of each field object (see "What changed" section below for more).

Try this code:

<form class="form-contact" action="" method="POST">
{% csrf_token %} 
{% for field in form %}
<fieldset class="form-group">
  <label class="control-label" for="id_{{ field.name }}">{{ field.label }}</label>
    <div class="form-control">
      <input type="text" class="form-control"
        name="{{ field.name }}"
        id="id_{{ field.name }}"
        value="{{ field.value }}" > 
        <p class="help-text">{{ field.help_text }} </p>
       </div>
</fieldset>
{% endfor %}
   <input type="submit" value="Submit"  class="btn btn-primary">
</form>

For more on how this works, check out the "Looping over a form's fields" section of the docs. You might also be interested in "Django Bootstrap Form", a third-party-package that allows for quick and easy form styling.

What changed:
1. Removed the {{ field }} variable within the loop
2. {{ field.label }} replaced with {{ field.name }} within the name attribute
3. {{ field.name }} replaced with {{ field.value }} within the value attribute

Answer 2

Wrap the form in div's with container, row, and col. Also, add the input type.

<style>
    .help-text {
        font-style: italic;
        font-variant: all-small-caps;
    }
</style>
<div class="container">
  <form class="my-form" action="." method="POST">
  {% csrf_token %}
  {% for field in form %}
    <div class="form-group row">
      <label class="col-12 col-form-label" for="id_{{ field.name }}">{{ field.label }}</label>
      <div class="col-12">
        <input
          type="{{ field.field.widget.input_type }}"
          class="form-control"
          name="{{ field.name }}"
          id="id_{{ field.name }}"
          value="{{ field.value|default:'' }}"
        >
      </div>
      <div class="col-12 help-text">{{ field.help_text }} </div>
    </div>
  {% endfor %}
    <div class="row">
      <div class="col-12">
        <input type="submit" value="Submit"  class="btn btn-primary">
      </div>
    </div>
  </form>
</div>