styling form render in Django

Question

I'm using Django 2.x

I'm using Formset to be able to add multiple records at one.

the form is rendered in template file as

{{ chapter_questions.as_table }}

Which renders template like below which looks ugly.

I'm using Bootstrap template to design my template to look like

To render template like second image, I'm writing the fields manually as

<div class="form-group">
    <div class="col-sm-12 col-xs-12">
        <label for="question">Word</label>
            <input name="chapterquestion_set-0-word" type="text" class="form-control border-color-2" placeholder="Word" id="question">

            {% if chapterquestion_set.word.errors %}
            <div class="row">
                <div class="col-sm-12">
                    <div class="alert alert-danger">
                        <ul>
                            {% for error in chapter_questions.word.errors %}
                            <li>{{ error }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        {% endif %}

    </div>

    <div class="col-sm-12 col-xs-12">
        <label for="definition">Definition</label>
        <input name="chapterquestion_set-0-definition" type="text" class="form-control border-color-3" placeholder="Definition" id="definition">

        {% if chapter_questions.definition.errors %}
        <div class="row">
            <div class="col-sm-12">
                <div class="alert alert-danger">
                    <ul>
                        {% for error in chapter_questions.definition.errors %}
                        <li>{{ error }}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        {% endif %}
    </div>

    <div class="col-sm-12 col-xs-12">
        <label for="audio"></label>
        <input name="chapterquestion_set-0-audio" type="text" class="form-control border-color-4" placeholder="Audio" id="audio">

        {% if chapter_questions.audio.errors %}
        <div class="row">
            <div class="col-sm-12">
                <div class="alert alert-danger">
                    <ul>
                        {% for error in chapter_questions.audio.errors %}
                        <li>{{ error }}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>

This way I have to write the code multiple times for multiple objects. Also for adding a new object fields, I need to replicate whole code using JavaScript by replacing index number (0 in this case) by updating by 1.

How can I style the form widget so that I could take benefit of Django automatic field insertions and error display and only need {{ chapter_questions.as_bootstrap_div }} to render bootstrap form.

did you try adding {{ chapter_questions.as_table }} inside <table> </table> tag? — Ramkishore M
but I do not want to use table to render form. I want to use Bootstrap's div col to render form. — Anuj TBE
How can I create global file to render text fields and other fields so that the custom styling is rendered. just like it do with as_table tag — Anuj TBE
you can add html classes to the form fields when defining the Form/ModelForm — Ramkishore M
But, after looking at level of customization you have to do, I suggest creating templates for each field type and use it — Ramkishore M

Ramkishore M Ramkishore M · Accepted Answer · 2018-03-25T12:44:14

templates/fields/text-field.html

<div class="col-sm-12 col-xs-12">
    {{field.label_tag}}
    <input name="{{field.name}}" type="text" class="form-control border-color-2" placeholder="{{field.label}}" id="{{field.name}}">

    {% if field.errors %}
    <div class="row">
        <div class="col-sm-12">
            <div class="alert alert-danger">
                <ul>
                    {% for error in field.errors %}
                    <li>{{ error }}</li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
    {% endif %}
</div>

on your form

{% with chapterquestion_set.word as field %}
    {% include 'fields/text-field.html' %}
{% endwith %}

styling form render in Django

1 Answers