How to align fields on a Wagtail email form

Question

I have created a wagtail email form using the documented method. Unfortunately, when it is displayed the input fields are misaligned and it looks very amateurish.

The html is :

{% block content %}    
    <form action="{% pageurl page %}" method="POST">
        {% csrf_token %}
        {{ form.as_ul }}
        <input type="submit">
    </form>    
{% endblock %}

Is there any way to tidy this up and at least align the start column of the input fields?

Answer 1

The most direct solution is to use {{ form.as_table }}, to render the form as an HTML <table> instead of a list. However, for full control over the layout you can loop over the form object and output each field individually, inside any HTML structure you like (which can then be styled with CSS) - see the Django docs at https://docs.djangoproject.com/en/stable/ref/forms/api/#more-granular-output for details.