[Django]-Create a custom html template using forms in Django

3👍

Yes you can loop on the form fields by doing the following

{% for field in form %}
    <div class="fieldWrapper">
        {{ field.errors }}
        <label> 
            {{ field.label_tag }}
        </label>
       <div>
           {{ field }}
       </div>
    </div>
{% endfor %}

Then you can add class to the div and label tags and style the form fields

You can also use Django Widget Tweaks to add classed to the form fields.

Click here to read in more details

By using widget tweaks you simply find the field in which you want to add the class by doing this

{% load widget_tweaks %}

{{ form.name|add_class:"inputContact volunteer" }}

2👍

You can render the fields manually:

We don’t have to let Django unpack the form’s fields; we can do it
manually if we like (allowing us to reorder the fields, for example).
Each field is available as an attribute of the form using {{
form.name_of_field }}, and in a Django template, will be rendered
appropriately.

Example from the documentation:

{{ form.non_field_errors }}
<div class="fieldWrapper">
    {{ form.subject.errors }}
    <label for="{{ form.subject.id_for_label }}">Email subject:</label>
    {{ form.subject }}
</div>
<div class="fieldWrapper">
    {{ form.message.errors }}
    <label for="{{ form.message.id_for_label }}">Your message:</label>
    {{ form.message }}
</div>

As I said in the comments, see also Django Crispy Forms. You can achieve the same without so much markup.

Leave a comment