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. alt text This is what I'd like.

Thanks

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

alt text

Currently it's all automatic. I haven't specified anything. If I create a form.html file in my templates/comments dir and use {{ form.as_p }} then it renders out the hidden field. :P — darren, Dec 09 '10 at 11:57

score 8 · Answer 1 · answered Jul 03 '14 at 21:41

8

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.

answered Jul 03 '14 at 21:41

Garrett Badeau

338
4
8

score 4 · Accepted Answer · edited Sep 28 '14 at 15:30

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

Reto Aebersold · Answer 3 · 2017-10-30T22:37:48.723

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()).

edited Oct 30 '17 at 22:37

answered Dec 09 '10 at 11:06

Reto Aebersold

16,306
5
55
74

If I use {{form.as_table}} then it renders all the fields and headers and doesn't line them up nicely. If I user {{ form.as_p }} then I get the same result as you see above except that with both of these options I get the hidden field rendered too. – darren Dec 09 '10 at 11:59
i'll look deeper into that documentation but if you come across any examples please let me know. Would be easier to understand. – darren Dec 09 '10 at 12:13

score 2 · Answer 4 · answered Nov 11 '11 at 19:49

2

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

answered Nov 11 '11 at 19:49

r_31415

8,752
17
74
121

This is not good when you resize the page ( shrink ). – cristian Jul 02 '20 at 07:09

score 0 · Answer 5 · answered Oct 30 '17 at 19:49

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:

How to format form fields for django comments?

5 Answers5