Rendering Wagtail's AbstractEmailForm on a field-by-field basis

readme.md

I was trying to add Bulma's classes to wagtail's automagically generated contact fields.

There's no simple, straight forward way to do this without making your own custom Django form

The examples here show a failed Django filter that I started writing to add css classes to the appropriate input types.

I simply ended up extending Bulma's CSS reach to child-elements of #is-contact-form instead. Way, way easier. Sass rocks!

Why go to all of this effort?

Because I don't want to write too much CSS when I'm using a framework for one. For another, Wagtail's AbstractEmailForm constructor is amazing. It allows us the ability to collect whatever data we want really easily. I didn't want to shy away from the feature because my framework couldn't hit the child inputs.

_contact_page.scss

#is-contact-form {
  input { 
    @extend .input;
  }
  textarea {
    @extend .textarea;
  }
}

contact_page.html

{% extends 'base.html' %}
{% load wagtailcore_tags custom_form_tags %}

{% block content %}
<section class="section">
  <div class="container">
    <div class="content">
      <h1>{{ self.title }}</h1>
    </div>
  </div>
</section>
<section class="section">
  <div class="container">
    <div class="content">
    {{ self.intro | richtext }}
    </div>
  </div>
  <div class="container content" id="is-contact-form">
    <form action="{% pageurl page %}" method="POST">
      {% csrf_token %}
      {% for field in form %}
      <div class="field">
        {{ field.errors }}
        <label class="label" for="{{ field.id_for_label }}">{{ field.label }}</label>
        <div class="control">
          {{ field | bulma_field }}
        </div>
      </div>
      {% endfor %}
      <input type="submit" class="button is-primary">
    </form>
  </div>
</section>
{% endblock %}

custom_form_tags.py

from django import template

register = template.Library()

@register.filter
def bulma_field(BoundField):
    input_type = False
    try:
        input_type = BoundField.field.widget.input_type
    except AttributeError:
        print('Widget does not support input_type')
        print('What HTML BoundField will render is anyone\'s guess')
    
    print(input_type)

    return BoundField