Styling forms using Django and Bootstrap

Question

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.

<form id="category_form" method="post" action="/purchase/">
        {% csrf_token %}
        {% for hidden in form.hidden_fields %}
            {{ hidden }}
        {% endfor %}

        {% for field in form.visible_fields %}
            {{ field.errors }}
            {{ field.help_text }}
            {{ field }}
        {% endfor %}

        <input type="submit" name="submit" value="Make purchase" />
</form>

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 'NoneType' object has no attribute 'replace' I've tried it without the widget tweaks and I still get the same error.

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. ie dropdowns and text boxes, which can't be styled the same way. I'm not sure what the best way around this is.

views.py

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})

checkout.html

<form class="form-horizontal" method="post" action="/cart/checkout/">
{% csrf_token %}

<fieldset>

<!-- Form Name -->
<legend>Card Details</legend>
<!-- Select Basic -->
<div class="form-group">
  <label class="col-sm-3 control-label" for="card-type">{{ form.payment_type.help_text }}</label>
  <div class="col-sm-9">
    {{ form.payment_type|attr:"id:card-type"|attr:"name:card-type"|attr:"class:form-control" }}
    {{ form.error }}
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-sm-3 control-label" for="card-name">{{ form.card_name.help_text }}</label>  
  <div class="col-sm-9">
    {{ 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:"}}
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-sm-3 control-label" for="card-number">{{ form.card_number.help_text }}</label>  
  <div class="col-sm-9">
    {{ 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:"}}
  </div>
</div>

<!-- Select Basic -->
<div class="form-group">
  <label class="col-sm-3 control-label" for="expiry-date">{{ form.expiry_date.help_text }}</label>
  <div class="col-sm-4">
    {{ form.expiry_date|attr:"id:expiry-date"|attr:"name:expiry-date"|attr:"class:form-control col-sm-4" }}
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-sm-3 control-label" for="cvv-number">{{ form.security_code.help_text }}</label>  
  <div class="col-sm-9">
    {{ 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:"}}
  </div>
</div>

<div class="form-group">
  <label class="col-sm-3 control-label" for="date">{{ form.date.help_text }}</label>  
  <div class="col-sm-9">
    {{ form.date|attr:"id:date"|attr:"name:date"|attr:"class:form-control input-md"|attr:"required:"}}
  </div>
</div>

<div class="form-group">
  <label class="col-md-4 control-label" for="Purchase"></label>
  <div class="col-md-8">
    <button id="Purchase" name="Purchase" class="btn btn-success">Purchase</button>
    <a href="javascript:history.go(-1)"><button id="Cancel" name="Cancel" class="btn btn-inverse">Cancel</button></a>
  </div>
</div>
</fieldset>

Answer 1

I am not sure whether I understand your question correctly. However I noticed that 1. there seems no tag in your form. 2. maybe you can use plain html instead of other tag( {{ form.security_code|attr:"id:cvv-number"|attr:"name:cvv-number" ****}} ), such as 3. to validate form, you may try to write something like : {% if form.password.errors %} {% for error in form.password.errors %} {{ error}} {% endfor %} {% endif %}

Hope you figure out this problem as soon as possible.

Answer 2

I would suggest using the python package django-bootstrap3 to style your forms. It can be found at https://github.com/dyve/django-bootstrap3

Hope this helps!