Question

I am using a form which is generated for me by django. I’m using this as a comment form after a post in my blog.

Currently it renders fine but it’s not nicely aligned.
This is what I have.
This is what I’d like.

Thanks

edit: This is the result when I user {{ form.as_table }}

Answer 1

Posting my solution hoping it’ll help someone else oneday.
I knew that you’d style the fields with css but wasn’t sure how to assign the classes to each item. But if you take a look at the default template provided you’ll notice that the error class is assigned to a field using an if statement within a foreach loop that automatically generates each field within your form.
i.e.

{% for field in form %}    
< p{% if field.errors %} 
    class="error"
{% endif %}
    {{ field.label_tag }}<'/' p> 
{% endfor %}

So I added onto this functionality.

< p{% if field.errors %} 
    class="error"
{% endif %}
{% ifequal field.name "honeypot" %} 
    id="hide"
{% else %}
     id="left"
{% endifequal %}>
    {{ field.label_tag }}<'/' p> 

my css being

#hide{
    display:none;

}

#left{
    width: 200px;
    text-align: left;

}

#right{
    width: 300px;
    text-align: left;

}

Now that you can set your classes you can easily setup your classes or id within your css file. This is for the comments.
If you’re using a {{ form.as_p }} or {{ form.as_table }} to generate your form then you just set a general form class within your css to style it.
i.e.

form {
width: 350px;
padding: 20px;
border: 1px solid #270644;
}