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）

引用Wagtail Form Builder

1 个答案: