How to leverage WTForms and Bootstrap Web Template

In starting my own Web Application, I found the Bootstrap Framework. In addition, I started using the WTForms library to make dealing with forms very easy.

This document leverages the following references as notes:

WTForms Python Tutorial – https://pythonspot.com/tag/wtforms/

WTForms Documentation – http://wtforms.simplecodes.com/docs/1.0.1/crash_course.html

Bootstrap – https://getbootstrap.com/

The challange I ran into is that the default way WTForms renders data is very ugly! For example, see the following code snippet. The problem that I really ran into was it was very difficult to get the render_field function to really leverage all of the bootstrap web framework.

<form method=post>
    <dl>

        {{ render_field(form.album_name) }}
        {{ render_field(form.label) }}
        {{ render_field(form.label_number) }}
        <div class="container" style="border:1px solid #cecece" >
        <div class="row">
                  <div class="col-md-auto">
                      {{ render_field(form.cover) }}
                  </div>
                  <div class="col-md-auto">
                        {{ render_field(form.word) }}
                  </div>
        </div>
        </div>
    <p>

    </p>
<div class="container" style="border:1px solid #cecece" >
        <div class="row">
                  <div class="col-md-auto">
                      {{ render_field(form.count_cassette) }}
                  </div>
                  <div class="col-md-auto">
                      {{ render_field(form.count_lp) }}
                                        </div>
                  <div class="col-md-auto">
                      {{ render_field(form.count_45) }}
                                        </div>
                  <div class="col-md-auto">
                      {{ render_field(form.count_78) }}
                                        </div>
                  <div class="col-md-auto">
                      {{ render_field(form.count_cd) }}
                                        </div>
                  <div class="col-md-auto">
                      {{ render_field(form.count_digital) }}
                                        </div>
                  <div class="col-md-auto">
                      {{ render_field(form.count_copy_cassette) }}
                                        </div>
                  <div class="col-md-auto">
                      {{ render_field(form.count_copy_cd) }}
                                        </div>
        </div>
</div>
      {{ render_field(form.songs, cols="80", rows="14") }}
    </dl>

</form>

The following is the resultant form that is being rendered.

Solution

Once I really understood, how WTForms worked, I was able to stop using the render_field function. Take the following code snippet:

        {{ render_field(form.album_name) }}
        {{ render_field(form.label) }}
        {{ render_field(form.label_number) }}

The above code snippet renders the following:

This code obviously, renders the three fields. The problem with this default, is that there is no way to format the headings differently than the text boxes. One alternative way of rendering this is:

    <div>{{ form.album_name.label }}
         {{ form.album_name() }}</div>
    <div>{{ form.label.label }}
         {{ form.label() }}</div>    
    <div>{{ form.label_number.label }}
         {{ form.label_number() }}</div>

This is actually giving us much more flexibility. However, when you are digging down into the code, what is really happening behind the scenes actually renders the following:

<dl>   
<dt><label for="album_name">Album Title</label>
</dt>
<dd><input id="album_name" name="album_name" type="text" value="123">
</dd>

<dt><label for="label">Label</label>
</dt><dd><input id="label" name="label" type="text" value="123">
</dd>

<dt><label for="label_number">Label Number</label>
</dt><dd><input id="label_number" name="label_number" type="text" value="123">

</dd>

So it absolutely looks like I can reference the forms on WTForms natively. For example, the id and name parameters in the input squares clearly represent the variables that I am using. As a result, the nice pretty way of rendering this was the following:

<div class="form-group">
    <label for="album_name">Album Name:</label>
    <input type="text" class="form-control" id="album_name" name="album_name" placeholder="Enter Album Name"></div>

<div class="form-group">
    <label for="album_name">Album Label:</label>
    <input type="text" class="form-control" id="label" name="label" placeholder="Enter Album Label"> </div>

<div class="form-group">
    <label for="album_name">Album Label Number:</label>
    <input type="text" class="form-control" id="label_number" name="label_number" placeholder="Enter Album Label Number"> </div>

The good news is now that I used that code, the actual final version with Bootstrap looks really nice and pretty: