Django — Step 14

Styling A Django Form

This is a continuation of step 13:

Django — Step 13

Currently, We are using Django Forms in its simplest implementation in formForGallery1.html:

{{ form }}

This renders the form, but without any particular styling. Alternatively we can call each individual element of our form in order to add custom styling.

The first step is to start your development server and navigate to the form, http://127.0.0.1:8000/display_1/g1_post

right-click the form in the browser and view page source and you will see the forms HTML code that is rendered by Django Forms. We will use this to identify each element:

Now open up the formForGallery1.html file and comment out the {{ form }} line. And add:

{{ form.non_field_errors }}

This is where errors in the uploading will be displayed.

Next, we will start with the title. In the page source the title element is:

<tr><th><label for="id_title">Title:</label></th><td><input type="text" name="title" maxlength="200" required id="id_title"></td></tr>

Django Forms uses a div with the class of fieldwrapper when declaring the specific elements of a form. Inside the div is the form error-tag for the element, a label and an input:

<div class="fieldWrapper">
    {{ form.form_element.errors }}
   <label for=''></label>
   <input type='' name='' id=''>
</div>

Using the title info from the page source, we can create the title element for the form:

<div class="fieldWrapper" style="margin-left:10px;">
    {{ form.title.errors }}
      <label for="id_title">Title:</label><br>
      <input type="text" name="title" maxlength="200" required id="id_title">
</div>

In the templates/components folder create a customForm.html file. We can put our custom fields in this file:

{{ form.non_field_errors }}
        
<div class="fieldWrapper" style="margin-left:10px;">
    {{ form.title.errors }}
      <label for="id_title">Title:</label><br>
      <input type="text" name="title" maxlength="200" required id="id_title">
</div>
<div class="fieldWrapper"  style="margin:10px;">
    {{ form.description_1.errors }}
      <label for="id_description_1">Description 1:</label><br>
      <textarea name="description_1" cols="40" rows="5" required id="id_description_1"></textarea>
</div>
<div class="fieldWrapper" style="margin:10px;">
    {{ form.description_2.errors }}
      <label for="id_description_2">Description 2:</label><br>
      <textarea name="description_2" cols="40" rows="5" id="id_description_2"></textarea>
</div>
<div class="fieldWrapper" style="margin:10px;">
    {{ form.description_3.errors }}
      <label for="id_description_3">Description 3:</label><br>
      <textarea name="description_3" cols="40" rows="5" id="id_description_3"></textarea>
</div>
<div class="fieldWrapper" style="margin:10px;">
    {{ form.reference_link.errors }}
      <label for="id_reference_link">Reference link:</label><br>
      <textarea type="url" name="reference_link" cols="50" rows="1" id="id_reference_link"></textarea>
</div>
<div class="fieldWrapper" style="margin:10px;">
    {{ form.photo_main.errors }}
      <label for="id_photo_main">Photo main:</label><br>
      <input type="file" name="photo_main" required id="id_photo_main" style="margin:10px;" class="btn btn-success">
</div>
<div class="fieldWrapper" style="margin:10px;">
    {{ form.photo_1.errors }}
      <label for="id_photo_1">Photo 1:</label><br>
      <input type="file" name="photo_1" id="id_photo_1" style="margin:10px;" class="btn btn-success">
</div>
<div class="fieldWrapper" style="margin:10px;">
    {{ form.photo_2.errors }}
      <label for="id_photo_2">Photo 2:</label><br>
      <input type="file" name="photo_2" id="id_photo_2" style="margin:10px;" class="btn btn-success">
</div>
<div class="fieldWrapper" style="margin:10px;">
    {{ form.photo_3.errors }}
      <label for="id_photo_3">Photo 3:</label><br>
      <input type="file" name="photo_3" id="id_photo_3" style="margin:10px;" class="btn btn-success">
</div>
<div class="fieldWrapper" style="margin:10px;">
    {{ form.photo_4.errors }}
      <label for="id_photo_4">Photo 4:</label><br>
      <input type="file" name="photo_4" id="id_photo_4" style="margin:10px;" class="btn btn-success">
</div>
<div class="fieldWrapper" style="margin:10px;">
    {{ form.photo_5.errors }}
      <label for="id_photo_5">Photo 5:</label><br>
      <input type="file" name="photo_5" id="id_photo_5" style="margin:10px;" class="btn btn-success">
</div>
<div class="fieldWrapper" style="margin:10px;">
    {{ form.photo_6.errors }}
      <label for="id_photo_6">Photo 6:</label><br>
      <input type="file" name="photo_6" id="id_photo_6" style="margin:10px;" class="btn btn-success">
</div>
<div class="fieldWrapper" style="margin:10px;">
    {{ form.is_published.errors }}
      <label for="id_is_published">Check the box to publish:</label>
      <input class="checkbox1 btn btn-primary" type="checkbox" name="is_published" id="id_is_published" style="margin:10px;" >
</div>
<div class="fieldWrapper" style="margin:10px;">
    {{ form.is_published.errors }}
      <label for="id_list_date">List date:</label>
      {{ form.list_date }}
</div>

Save the customForm.html file and add the include in formForGallery1.html file:

{% extends 'base.html' %}
{% block content %}
<section>
  <h1 class="display-4 mb-4 text-center">
    Gallery 1 post form
  </h1>
    <form action="" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <!-- {{ form }} -->
        {% include 'components/customForm.html' %}
<input type="submit" value="Submit" class="btn btn-primary" style="margin-left:250px;">
    </form>
</section>
{% endblock %}

I removed the div that initially encompassed the form, and added some style to the submit button.

In the customForm.html file, I just used inline styling to customize the form. However, with the way things are now set up, the styling can be moved to a css stylesheet and classes can be applied to each element.

In the next step to this tutorial, we will cover creating a user login and registration option for our app.