How to format form fields for django comments?

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

Answer 2

I know it's a little late, but for everybody else you can try this

<table>
{{ form.as_table }}
</table>

It fixes the annoying formatting problem, and looks decent.

Answer 3

Have a look at Customizing the form template. This is one possible solution.

Maybe you can simply use CSS to style your form and render the form as you like. (i.e as_table()).

Answer 4

Using the default {% render_comment_form for app.model %} will generate:

<p>
      <label for="id_name">Name</label> 
      <input id="id_name" type="text" name="name" maxlength="50">
    </p>
    <p>
      <label for="id_email">Email address</label> 
      <input type="text" name="email" id="id_email">

</p>
... etc

Therefore, you can target label in your CSS stylesheet using:

label {
  width: 15%;
}

Answer 5

There are multiple approaches as detailed in this post, however, I found that sometimes widget attributes may not work the way you wanted.

Still, the best and easy way is to use CSS:

Render your page that contains the form fields and do some inspection (right click>inspect or F12 on Chrome for example) to know what html tags your form generates when rendered. Then you can write your CSS easily.

You have input and textarea fields in your form so your CSS will be:

input, textarea{
    width:350px;
}

Don't forget to call for your CSS file at the top of your html template:

<link rel="stylesheet" type="text/css" href="{% static 'styles/form.css' %}">

Here is a snapshot of what I have for my own form: