Wagtailstreamforms如何实现表单字段并排渲染及多列网格布局

Wagtailstreamforms是一款非常便捷的表单构建工具包，默认仅支持表单字段堆叠排列，期望实现指定字段并排渲染，效果如下：

如上所示，姓名与邮箱、项目周期与预算字段分别在同一行并排展示。需要在Wagtailstreamforms表单构建器设置页中选择任意两类字段实现并排布局。 #

补充说明 #

目前Wagtailstreamforms仅支持字段上下堆叠排列，表单构建页没有提供多列网格布局的相关功能。计划通过wagtailstreamforms_fields.py的register装饰器自定义新字段，设置left、right两个选项，每个选项为可选字段列表（排除当前字段本身），让用户可以选择两个字段实现两列并排布局。
目前已初步实现带left、right选项的自定义字段，代码如下：

# wagtailstreamforms_fields.py

from django import forms
from wagtail.core import blocks
from wagtail.core.fields import StreamField
from wagtailstreamforms import streamfield
from wagtailstreamforms.fields import BaseField, register

form_field_list_left = streamfield.FormFieldStreamBlock('form_two_columns_left')
form_field_list_right = streamfield.FormFieldStreamBlock('form_two_columns_left')

@register('two_columns')
class TwoColumns(BaseField):
    field_class = forms.MultiValueField
    widget = forms.MultiWidget
    icon = 'list-ul'
    label = 'Two Columns'

    def get_form_block(self):
        return blocks.StructBlock([
            ('left', form_field_list_left),
            ('right', form_field_list_right),
        ], icon=self.icon, label=self.label)

自定义字段的配置页效果如下：

当前问题：如何在模板中获取left、right两个选项的内容？如果两列字段功能可以正常运行，后续还会扩展支持三列、四列布局。 #

补充思路：另一种网格系统实现方式 #

项目使用Bootstrap CSS，也可以为每个表单字段新增width参数，取值范围1-12（12代表全宽），之后在模板中将参数值拼接到容器div的CSS类中，即col-{{ field.width }}。该方案可以实现更灵活的网格尺寸，只是不如预设列宽的字段直观。 #

你可以按照以下步骤实现模板层的字段渲染，同时支持后续多列扩展：

• 自定义表单渲染模板
  首先复制wagtailstreamforms默认的表单模板到你项目的templates/wagtailstreamforms/form_block.html路径，重写字段渲染逻辑，识别你自定义的two_columns类型字段：

{% load wagtailstreamforms_tags %}

<form class="{{ form_class }}" id="{{ form_id }}" method="post"{% if form.is_multipart %} enctype="multipart/form-data"{% endif %}>
    {% csrf_token %}
    {{ form.media }}
    {% for field in form %}
        {% if field.field_type == 'two_columns' %}
            <div class="row">
                {# 渲染左列字段 #}
                <div class="col-md-6">
                    {% for left_field in field.value.left %}
                        {% include "wagtailstreamforms/field.html" with field=left_field %}
                    {% endfor %}
                </div>
                {# 渲染右列字段 #}
                <div class="col-md-6">
                    {% for right_field in field.value.right %}
                        {% include "wagtailstreamforms/field.html" with field=right_field %}
                    {% endfor %}
                </div>
            </div>
        {% else %}
            {# 原有普通字段渲染逻辑 #}
            {% include "wagtailstreamforms/field.html" with field=field %}
        {% endif %}
    {% endfor %}
    <button type="submit" class="btn btn-primary">{{ submit_button_text }}</button>
</form>

• 适配后续多列扩展的优化方案
  如果后续要做3列、4列布局，不需要重复写多个自定义字段，直接把当前的双列字段调整为通用的网格容器字段：给网格容器新增列数选择项，可选2/3/4列，给每一列配置对应的字段流容器，模板中根据选择的列数动态生成对应的col-md-*类，比如3列就用col-md-4，4列用col-md-3即可。
• 可选的字段级宽度方案实现（和你补充思路对应）
  如果要走单字段配置宽度的方案，只需要给所有基础字段新增width参数，字段渲染模板外层包裹<div class="col-md-{{ field.width }}">，所有字段外层套一层<div class="row">即可自动实现网格布局，不需要额外自定义容器字段。

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