title: Styling forms using Django and Bootstrap
body: <p>Okay, so I've created a simple purchase form which makes use of some custom form fields. I've rendered a simple form to test if it works properly, and it does, as shown below.</p>
  
  <pre><code>&lt;form id="category_form" method="post" action="/purchase/"&gt;
          {% csrf_token %}
          {% for hidden in form.hidden_fields %}
              {{ hidden }}
          {% endfor %}
  
          {% for field in form.visible_fields %}
              {{ field.errors }}
              {{ field.help_text }}
              {{ field }}
          {% endfor %}
  
          &lt;input type="submit" name="submit" value="Make purchase" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Now, I wish to style it to Bootstrap 3. I've managed to style it with no problems using the django widget tweaks package. However, when I submit the form, I get this error <code>'NoneType' object has no attribute 'replace'</code> I've tried it without the widget tweaks and I still get the same error.</p>
  
  <p>Any ideas why this may be the case? The original form works fine unstyled, but as soon as I style it I get the above error. Now if my understanding is correct, Django takes one field and styles corresponding fields the same, but, some of my field types are different. i.e. dropdowns and text boxes, which can't be styled the same way. I'm not sure what the best way around this is.</p>
  
  <p><strong>views.py</strong></p>
  
  <pre><code>def checkout(request):
  if request.method == 'POST':
      form = PurchaseForm(request.POST)
      if form.is_valid():
          form.save(commit=True)
  
          return index(request) # Change this to point to the confirmation page
      else:
          print (form.errors)
  else:
      form = PurchaseForm()
  return render(request, 'ticket/checkout.html', {'form': form})
  </code></pre>
  
  <p><strong>checkout.html</strong></p>
  
  <pre><code>&lt;form class="form-horizontal" method="post" action="/cart/checkout/"&gt;
  {% csrf_token %}
  
  &lt;fieldset&gt;
  
  &lt;!-- Form Name --&gt;
  &lt;legend&gt;Card Details&lt;/legend&gt;
  &lt;!-- Select Basic --&gt;
  &lt;div class="form-group"&gt;
    &lt;label class="col-sm-3 control-label" for="card-type"&gt;{{ form.payment_type.help_text }}&lt;/label&gt;
    &lt;div class="col-sm-9"&gt;
      {{ form.payment_type|attr:"id:card-type"|attr:"name:card-type"|attr:"class:form-control" }}
      {{ form.error }}
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Text input--&gt;
  &lt;div class="form-group"&gt;
    &lt;label class="col-sm-3 control-label" for="card-name"&gt;{{ form.card_name.help_text }}&lt;/label&gt;  
    &lt;div class="col-sm-9"&gt;
      {{ form.card_name|attr:"id:card-name"|attr:"name:card-name"|attr:"type:text"|attr:"placeholder:Card Holder's Name"|attr:"class:form-control input-md"|attr:"required:"}}
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Text input--&gt;
  &lt;div class="form-group"&gt;
    &lt;label class="col-sm-3 control-label" for="card-number"&gt;{{ form.card_number.help_text }}&lt;/label&gt;  
    &lt;div class="col-sm-9"&gt;
      {{ form.card_number|attr:"id:card-number"|attr:"name:card-number"|attr:"type:text"|attr:"placeholder:Credit / Debit card number"|attr:"class:form-control input-md"|attr:"required:"}}
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Select Basic --&gt;
  &lt;div class="form-group"&gt;
    &lt;label class="col-sm-3 control-label" for="expiry-date"&gt;{{ form.expiry_date.help_text }}&lt;/label&gt;
    &lt;div class="col-sm-4"&gt;
      {{ form.expiry_date|attr:"id:expiry-date"|attr:"name:expiry-date"|attr:"class:form-control col-sm-4" }}
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Text input--&gt;
  &lt;div class="form-group"&gt;
    &lt;label class="col-sm-3 control-label" for="cvv-number"&gt;{{ form.security_code.help_text }}&lt;/label&gt;  
    &lt;div class="col-sm-9"&gt;
      {{ form.security_code|attr:"id:cvv-number"|attr:"name:cvv-number"|attr:"type:text"|attr:"placeholder:Security Code"|attr:"class:form-control input-md"|attr:"required:"}}
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
    &lt;label class="col-sm-3 control-label" for="date"&gt;{{ form.date.help_text }}&lt;/label&gt;  
    &lt;div class="col-sm-9"&gt;
      {{ form.date|attr:"id:date"|attr:"name:date"|attr:"class:form-control input-md"|attr:"required:"}}
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
    &lt;label class="col-md-4 control-label" for="Purchase"&gt;&lt;/label&gt;
    &lt;div class="col-md-8"&gt;
      &lt;button id="Purchase" name="Purchase" class="btn btn-success"&gt;Purchase&lt;/button&gt;
      &lt;a href="javascript:history.go(-1)"&gt;&lt;button id="Cancel" name="Cancel" class="btn btn-inverse"&gt;Cancel&lt;/button&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>
  </p>