wagtail_bakerydemo/bakerydemo/templates/base/form_page.html

{% extends "base.html" %}
{% load wagtailcore_tags navigation_tags wagtailimages_tags %}

{% block content %}
{% include "base/include/header-hero.html" %}

<div class="container">
    <div class="row">
        <div class="col-md-8">
            {% if page.intro %}
                <p class="intro">{{ page.intro|richtext }}</p>
            {% endif %}
            {% if page.body %}
                {{ page.body }}
            {% endif %}
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-8 form-page">
        {% comment %}
        You could render your form using a Django rendering shortcut such as `{{ form.as_p }}` but that will tend towards unsemantic code, and make it difficult to style. You can read more on Django form at:
        https://docs.djangoproject.com/en/1.10/topics/forms/#form-rendering-options
        {% endcomment %}
            <form action="{% pageurl page %}" method="POST" role="form">
                {% csrf_token %}
                {% if form.subject.errors %}
                    <ol role="alertdialog">
                    {% for error in form.subject.errors %}
                        <li role="alert"><strong>{{ error|escape }}</strong></li>
                    {% endfor %}
                    </ol>
                {% endif %}

                {% for field in form %}
                    <div class="fieldWrapper" aria-required={% if field.field.required %}"true"{% else %}"false"{% endif %}>
                        
                        {{ field.label_tag }}{% if field.field.required %}<span class="required">*</span>{% endif %}

                        {{ field }}
                        
                        {% if field.help_text %}
                            <p class="help">{{ field.help_text|safe }}</p>
                        {% endif %}
                    </div>
                {% endfor %}

                <input type="submit">
            </form>
        </div>
    </div>
</div>
{% endblock content %}