如何修改Wagtail表单输入字段的属性？附场景示例

不用复杂的JS，完全可以通过Wagtail/Django的原生机制来实现这些需求，下面给你几个最便捷的方案：

方案1：后端统一配置（推荐，全局生效） #

在你的FormPage模型里重写get_form_class方法，直接修改表单字段的widget属性，这样所有从这个页面生成的表单都会自动带上你要的属性：

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

class FormField(AbstractFormField):
    page = ParentalKey('FormPage', related_name='form_fields')

class FormPage(AbstractEmailForm):
    landing_page_template = 'blog/form_page.html'
    intro = RichTextField(blank=True)
    thank_you_text = RichTextField(blank=True)

    content_panels = AbstractEmailForm.content_panels + [
        FormSubmissionsPanel(),
        FieldPanel('intro', classname="full"),
        InlinePanel('form_fields', label="Form fields"),
        FieldPanel('thank_you_text', classname="full"),
        MultiFieldPanel([
            FieldRowPanel([
                FieldPanel('from_address', classname="col6"),
                FieldPanel('to_address', classname="col6"),
            ]),
            FieldPanel('subject'),
        ], "Email"),
    ]

    # 新增这个方法来修改表单字段属性
    def get_form_class(self):
        # 获取父类生成的表单类
        form_class = super().get_form_class()
        
        # 遍历所有表单字段，添加自定义属性
        for field_name, field in form_class.base_fields.items():
            # 给所有字段添加form-control类
            field.widget.attrs.update({'class': 'form-control'})
            
            # 针对textarea类型，修改rows为5
            if isinstance(field.widget, forms.Textarea):
                field.widget.attrs['rows'] = 5
        
        return form_class

这样处理后，模板里只需要保留原来的{% for field in form %}{{ field }}{% endfor %}，渲染出来的字段就自动带上class="form-control"，textarea的rows也变成5了。

方案2：模板层面精细控制 #

如果不想修改后端代码，或者需要对个别字段做特殊处理，可以在模板里手动渲染字段，而不是用默认的{{ field }}：

方式A：借助widget_tweaks库（更简洁） #

先安装django-widget-tweaks（轻量Django第三方库，专门用来调整表单widget属性），然后在模板里这样写：

{% load widget_tweaks %}

{% for field in form %}
    <div class="form-group">
        {{ field.label_tag }}
        {% if field.widget_type == 'textarea' %}
            {{ field|add_class:"form-control"|attr:"rows:5" }}
        {% else %}
            {{ field|add_class:"form-control" }}
        {% endif %}
        {% if field.errors %}
            {% for error in field.errors %}
                <small class="text-danger">{{ error }}</small>
            {% endfor %}
        {% endif %}
    </div>
{% endfor %}

方式B：纯原生模板代码（无需第三方库） #

如果不想加额外依赖，也可以手动拼接HTML：

{% for field in form %}
    <div class="form-group">
        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
        {% if field.widget_type == 'textarea' %}
            <textarea 
                name="{{ field.name }}" 
                id="{{ field.id_for_label }}" 
                class="form-control" 
                rows="5"
                {% if field.required %}required{% endif %}
            >{{ field.value|default_if_none:"" }}</textarea>
        {% else %}
            <input 
                type="{{ field.field.widget.input_type }}" 
                name="{{ field.name }}" 
                id="{{ field.id_for_label }}" 
                class="form-control" 
                value="{{ field.value|default_if_none:"" }}"
                {% if field.required %}required{% endif %}
                {% if field.field.max_length %}maxlength="{{ field.field.max_length }}"{% endif %}
            >
        {% endif %}
        {% if field.errors %}
            {% for error in field.errors %}
                <small class="text-danger">{{ error }}</small>
            {% endfor %}
        {% endif %}
    </div>
{% endfor %}

方案3：全局自定义Widget模板 #

如果希望整个项目里的所有同类表单字段都统一用这个样式，可以自定义Django的Widget模板：

1. 在你的模板目录下创建django/forms/widgets/text.html：

<input type="{{ widget.type }}" name="{{ widget.name }}"{% if widget.value != None %} value="{{ widget.value|stringformat:'s' }}"{% endif %}{% include "django/forms/widgets/attrs.html" %} class="form-control" />

2. 创建django/forms/widgets/textarea.html：

<textarea name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %} class="form-control" rows="5">{{ widget.value|default_if_none:"" }}</textarea>

3. 在settings.py里添加配置，告诉Django使用自定义的模板渲染表单：

FORM_RENDERER = 'django.forms.renderers.TemplatesSetting'

这样所有的文本输入框和textarea都会自动应用你定义的属性，不需要修改任何页面的模板或模型代码。

内容的提问来源于stack exchange，提问作者NarūnasK