引用使用 Wagtail Form Builder 生成的表单字段

Question

我使用 Wagtail Form Builder 生成了一个包含四个字段的简单联系表单。我面临的挑战是我无法单独引用带有 css 类的表单字段，因为我不确定应该从哪里获取字段 ID 和标签名称。

这是呈现表单的代码：

<h1>{{ page.title }}</h1>
    {{ page.intro|richtext }}

    <form action="{% pageurl page %}" method="POST" class="sky-form contact-style">
        {% csrf_token %}
        {{ form.as_p }}
        <input type="submit">
    </form>

如果单独引用字段是不可能的，那么实现相同结果的其他方法是什么？

Answer 1

Wagtail formbuilder 创建动态表单——每个字段的 id（名称）由以下代码创建： str(slugify(text_type(unidecode(self.label))))

（来自https://github.com/torchbox/wagtail/blob/master/wagtail/wagtailforms/models.py#L90）

所以字段标签被转换为 ascii 字符，然后转换为 slug。例如，如果您有一个字段名称 First Name，它将被转换为'first-name'.

找出 wagtail formbuilder 创建的表单字段的实际 id 的一种简单方法是通过枚举它们实际输出模板中的字段：

{% for field in form %} 
    {{ field }} 
{% endfor %} 

然后检查生成的 html 代码以查看它们的实际 id（你会看到<input class="textinput textInput" id="id_first-name" maxlength="255" name="first-name" type="text">所以你会知道该字段的 id 是first-name）