Django What is the best way to format forms?

Question

I have just gotten into Django and read a bunch of books, now im building my first app. When I render my forms in my template im using...

{{ form.as_ul }}

And now I'm trying to apply some CSS to my form. It's proving difficult to get it look nice. I was wondering if there is a better way of rendering and styling forms?

Solution 1

Well, there are a couple of options that you can take advantage of like:

1. form.as_p
2. form.as_ul
3. form.as_table

Its up to you to decide what you would like. As for customizing it with CSS, take a look at how they structured the form here (taken from django docs):

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

The original form looked like this:

from django import forms

class ContactForm(forms.Form):
    subject = forms.CharField(max_length=100)
    message = forms.CharField()
    sender = forms.EmailField()
    cc_myself = forms.BooleanField(required=False)

So, as you can see, you can just access the form element, by

{{ form.<element_name>.<element_properties> }}

You can add your own CSS to the labels or divs. Its totally up to you to decide what you want to do. On a side note, if you want forms formatted with Bootstrap 3, then might I suggest that you use django-crispyforms extension for django.

Solution 2

Well, this doesn't answer the question directly, but if you're using Bootstrap you have a couple of options:

• django-bootstrap3
• django-bootstrap-toolkit
• django-crispy-forms

and more from djangopackages.com

Solution 3

There is a very easy to install and great tool made for Django that I use for styling and it can be used for every frontend framework like Bootstrap, Materialize, Foundation, etc. It is called widget-tweaks Documentation: Widget Tweaks

1. You can use it with Django's generic views

2. Or with your own forms:

   from django.forms import Form
   
   class MyForm(Form):
   
       field1 = forms.CharField(max_length=512)
       field2 = forms.CharField(max_length=256)
   

Instead of using default:

{{ form.as_p }} or {{ form.as_ul }}

You can style it using the render_field attribute that gives you a more html-like way of styling it like this example:

template.html

{% load widget_tweaks %}

<div class="container">
   <div class="col-md-6">
      {% render_field form.field1 class+="form-control myCSSclass" placeholder="Placeholder for field1" %}
   </div>
   <div class="col-md-6">
      {% render_field form.field2 class+="myCSSclassX myCSSclass2" placeholder=form.field2.label %}
   </div>
</div>

Which makes easier to keep frontend in frontend and backend in backend instead of having to do it like:

class MyForm(forms.Form):
    field1 = forms.CharField(widget=forms.TextInput(attrs={'class' : 'myCSSclass'}))
    field2 = forms.CharField(widget=forms.TextInput(attrs={'class' : 'myCSSclassX myCSSclass2'}))

which is in my opinion very limited and easier to get confused

Comments

[Ryan Currah]

Thansk I ended up using tables they were easiest for me to format with CSS

[Ryan Currah]

After a while I ended up using bootstrap / django-crispy-forms, I never looked back. I'm not a graphic designer or a CSS wiz so bootstrap made my life so much easier in combination with crispy forms.