How to format form fields for django comments?

Question

I use the form that django creates for me. I use this as a comment form after posting on my blog.

Currently, it looks great, but not very well aligned. This is what I have. This is what I would like.

thanks

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

Answer 1

Post my solution, hoping this helps someone else. I knew that you would create fields using css, but don’t know how to assign classes to each element. But if you look at the default template, you will notice that an error class is assigned to the field using the if statement in the foreach loop, which automatically generates every field in your form. i.e.

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

So, I added to this function.

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

my css

 #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 customize your classes or identifier in your css file. This is for comments. If you use {{form.as_p}} or {{form.as_table}} to generate your form, then you simply set a common form class in your CSS to style it. i.e.

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

Answer 2

I know this is a little late, but for everyone else you can try this

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

It fixes the annoying formatting issue and looks decent.

Answer 3

See Customizing a form template . This is one of the possible solutions.

Perhaps you can just use CSS to style your form and visualize the form as you wish. (e.g. as_table ()).

Answer 4

Using the default value {% 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 the label in the CSS stylesheet using:

 label { width: 15%; } 

Answer 5

There are several approaches described in detail in this post , however, I have found that sometimes widget attributes may not work the way you wanted.

However, the best and easiest way is to use CSS:

Display your page containing the form fields and do some validation (right click> validate or F12 on Chrome, for example) to find out which html tags generate your form when rendering. Then you can easily write your CSS.

Your form has input and textarea fields, so your CSS will be:

 input, textarea{ width:350px; } 

Remember to call your CSS file at the top of the 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: