如何为基于AbstractEmailForm的Wagtail表单应用Bootstrap样式？

问题背景 #

希望为基于Wagtail的表单应用Bootstrap样式，尝试在模型中直接添加类名无效，寻求可行方法。

现有模型代码 #

from django.db import models
from modelcluster.fields import ParentalKey
from wagtail.admin.panels import FieldPanel, InlinePanel, MultiFieldPanel, FieldRowPanel
from wagtail.contrib.forms.models import AbstractFormField, AbstractEmailForm
from wagtail.fields import RichTextField

from wagtailcaptcha.models import WagtailCaptchaEmailForm


class FormField(AbstractFormField):
    page = ParentalKey("ContactPage", on_delete=models.CASCADE, related_name="form_fields")


class ContactPage(WagtailCaptchaEmailForm):
    # Hérite de AbstractEmailForm
    template = "contact/contact_page.html"
    intro = RichTextField(blank=True)
    thank_you_text = RichTextField(blank=True)

content_panels = AbstractEmailForm.content_panels + [
    FieldPanel('intro'),
    InlinePanel('form_fields', label="Champs du formulaire"),
    FieldPanel('thank_you_text'),
    MultiFieldPanel([
        FieldRowPanel([
            FieldPanel('from_address', classname="col-6"),
            FieldPanel('to_address', classname="col-6"),
        ]),
        FieldPanel('subject')
    ], heading="Configurations des adresses"),
]

现有HTML模板代码 #

<form method="post">
    {% csrf_token %}
    {{ form.as_p }}

    <input type="submit" value="Envoyer" class="btn btn-success btn-sm">
</form>

可行解决方案 #

方法一：手动渲染表单字段（推荐） #

放弃{{ form.as_p }}的自动渲染，手动遍历每个字段并套用Bootstrap的表单结构，同时添加必要的样式类：

修改模板代码如下：

<form method="post" class="needs-validation" novalidate>
    {% csrf_token %}
    {% for field in form %}
        <div class="mb-3">
            {{ field.label_tag }}
            {% if field.field.required %}
                <span class="text-danger">*</span>
            {% endif %}
            <!-- 为字段添加form-control类，错误时标记is-invalid -->
            <input type="{{ field.field.widget.input_type }}" 
                   name="{{ field.name }}" 
                   id="{{ field.id_for_label }}" 
                   class="form-control {% if field.errors %}is-invalid{% endif %}"
                   {% if field.value %}value="{{ field.value }}"{% endif %}
                   {% if field.field.required %}required{% endif %}>
            <!-- 错误提示 -->
            {% if field.errors %}
                {% for error in field.errors %}
                    <div class="invalid-feedback d-block">
                        {{ error }}
                    </div>
                {% endfor %}
            {% endif %}
            <!-- 帮助文本 -->
            {% if field.help_text %}
                <div class="form-text">
                    {{ field.help_text|safe }}
                </div>
            {% endif %}
        </div>
    {% endfor %}

    <!-- 单独处理验证码字段（如果使用wagtailcaptcha） -->
    {% if form.captcha %}
        <div class="mb-3">
            {{ form.captcha.label_tag }}
            <div class="d-flex align-items-center">
                {{ form.captcha }}
            </div>
            {% if form.captcha.errors %}
                <div class="invalid-feedback d-block">
                    {{ form.captcha.errors.0 }}
                </div>
            {% endif %}
        </div>
    {% endif %}

    <input type="submit" value="Envoyer" class="btn btn-success btn-sm">
</form>

方法二：使用django-widget-tweaks简化类名添加 #

借助django-widget-tweaks库可以快速为表单字段添加类，无需手动编写输入标签：

1. 安装库：

pip install django-widget-tweaks

2. 在项目settings.py的INSTALLED_APPS中添加：

INSTALLED_APPS = [
    # 其他应用
    'widget_tweaks',
]

3. 修改模板代码：

{% load widget_tweaks %}

<form method="post" class="needs-validation" novalidate>
    {% csrf_token %}
    {% for field in form %}
        <div class="mb-3">
            {{ field.label_tag }}
            {% if field.field.required %}
                <span class="text-danger">*</span>
            {% endif %}
            <!-- 直接添加form-control类，错误时自动标记is-invalid -->
            {% render_field field class="form-control" %}
            {% if field.errors %}
                {% for error in field.errors %}
                    <div class="invalid-feedback d-block">
                        {{ error }}
                    </div>
                {% endfor %}
            {% endif %}
            {% if field.help_text %}
                <div class="form-text">
                    {{ field.help_text|safe }}
                </div>
            {% endif %}
        </div>
    {% endfor %}

    {% if form.captcha %}
        <div class="mb-3">
            {{ form.captcha.label_tag }}
            <div class="d-flex align-items-center">
                {% render_field form.captcha class="form-control me-2" %}
            </div>
            {% if form.captcha.errors %}
                <div class="invalid-feedback d-block">
                    {{ form.captcha.errors.0 }}
                </div>
            {% endif %}
        </div>
    {% endif %}

    <input type="submit" value="Envoyer" class="btn btn-success btn-sm">
</form>

方法三：重写Wagtail表单类添加全局样式 #

在models.py中重写ContactPage的get_form方法，动态为所有字段的widget添加Bootstrap类：

class ContactPage(WagtailCaptchaEmailForm):
    # 原有代码...

    def get_form(self, *args, **kwargs):
        form = super().get_form(*args, **kwargs)
        # 为每个字段添加form-control类
        for field_name, field in form.fields.items():
            # 跳过验证码字段，避免影响其渲染
            if field_name != 'captcha':
                field.widget.attrs.update({'class': 'form-control'})
        return form

此方法可以配合form.as_p使用，但仍建议手动调整模板结构以匹配Bootstrap的表单布局规范。

内容的提问来源于stack exchange，提问作者Gabriel Trouvé