如何使用Wagtail formbuilder将表单字段分组为独立展示区块

你不需要修改现有models.py代码，仅调整模板的表单渲染逻辑即可实现需求，具体操作如下：

第一步：确认后台字段配置 #

在Wagtail后台对应ProductPage的「Form Fields」管理区域，确认两个首区块字段的clean_name属性：

• 姓名字段的clean_name为name
• 服务选择字段的clean_name为select_service
clean_name是Wagtail表单字段的唯一标识，支持手动修改，只要和模板调用的名称保持一致即可。

第二步：修改Products.html模板代码 #

替换原有硬编码的表单部分，采用「单独渲染指定字段+循环渲染剩余字段」的逻辑，完整表单代码如下：

<form id="quickContact" class="bg-white p-4" action="{% pageurl page %}" method="POST">
    {% csrf_token %}
    <!-- 第一区块：姓名、服务选择 -->
    <div class="row">
        <div class="col-lg-6 col-12">
            <div class="form-group mb-3">
                <!-- 单独渲染姓名字段，保留原有样式 -->
                <input 
                    type="text" 
                    class="form-control border-0 bg-dark bg-opacity-10 border-0 font-14 ps-4" 
                    name="{{ form.name.name }}" 
                    value="{{ form.name.value|default:'' }}"
                    placeholder="ชื่อ"
                >
                <!-- 字段错误提示，可选 -->
                {% if form.name.errors %}
                    <div class="text-danger mt-1">{{ form.name.errors.0 }}</div>
                {% endif %}
            </div>
        </div>
        <div class="col-lg-6 col-12">
            <div class="form-group mb-3">
                <!-- 单独渲染服务选择字段 -->
                <select 
                    class="form-control form-select border-0 bg-dark bg-opacity-10 border-0 font-14 ps-4" 
                    name="{{ form.select_service.name }}"
                >
                    <option value="">เลือกบริการ</option>
                    {% for value, label in form.select_service.field.choices %}
                        <option value="{{ value }}" {% if form.select_service.value == value %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
                {% if form.select_service.errors %}
                    <div class="text-danger mt-1">{{ form.select_service.errors.0 }}</div>
                {% endif %}
            </div>
        </div>
    </div>
    <!-- 第二区块：剩余所有字段 -->
    <div class="row">
        <div class="col-lg-6 col-12">
            {% for field in form %}
                <!-- 过滤已经渲染过的两个字段和多行文本字段 -->
                {% if field.name != 'name' and field.name != 'select_service' and field.field.widget.input_type != 'textarea' %}
                    <div class="form-group mb-3">
                        <input 
                            type="{{ field.field.widget.input_type }}" 
                            class="form-control border-0 bg-dark bg-opacity-10 border-0 font-14 ps-4" 
                            name="{{ field.name }}"
                            value="{{ field.value|default:'' }}"
                            placeholder="{{ field.label }}"
                        >
                        {% if field.errors %}
                            <div class="text-danger mt-1">{{ field.errors.0 }}</div>
                        {% endif %}
                    </div>
                {% endif %}
            {% endfor %}
        </div>
        <div class="col-lg-6 col-12">
            {% for field in form %}
                <!-- 单独渲染多行文本字段 -->
                {% if field.field.widget.input_type == 'textarea' %}
                    <textarea 
                        class="bg-dark bg-opacity-10 border-0 form-control font-14 ps-4" 
                        name="{{ field.name }}"
                        placeholder="{{ field.label }}"
                        rows="7"
                    >{{ field.value|default:'' }}</textarea>
                    {% if field.errors %}
                        <div class="text-danger mt-1">{{ field.errors.0 }}</div>
                    {% endif %}
                {% endif %}
            {% endfor %}
        </div>
    </div>
    <div class="row">
        <div class="col-12 mt-3 text-center">
            <button type="submit" class="btn btn-primary w-50 rounded-pill">ส่ง</button>
        </div>
    </div>
</form>

方案说明 #

• 第一区块的两个字段固定展示，完全匹配你需要的布局
• 第二区块的字段会自动同步后台添加的所有表单字段，后续新增字段不需要修改模板
• 保留了Wagtail表单原生的验证、提交逻辑，不会出现功能异常
• 若后续需要调整字段分组，仅修改模板中的过滤条件即可

内容的提问来源于stack exchange，提问作者Ranjitha Sanker