CODEWITHSUNDEEP
djangowagtail
Leo
Leo

Reputation: 169

Referencing forms fields generated with Wagtail Form Builder

I have generated a simple contact form with four fields using Wagtail Form Builder. The challenge I'm having, is that I'm unable to reference the form fields with css classes individually, since I'm not sure where I should get the field id and label name from.

Here is the code that renders the form:

<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>

If referencing the fields individually is not possible, what will be the other method(s) to achieve the same result?

Upvotes: 1

Views: 1524

Answers (1)

Serafeim
Serafeim

Reputation: 15104

Wagtail formbuilder creates a dynamic form - the id (name) of each field is created by the following code: str(slugify(text_type(unidecode(self.label))))

(from https://github.com/torchbox/wagtail/blob/master/wagtail/wagtailforms/models.py#L90)

So the field label is converted to ascii characters and then to a slug. For example, if you have a field name First Name it will be converted to 'first-name'.

An easy way to find out what is the actual id of the form fields that wagtail formbuilder creates is to actually output the fields in a template by enumerating them:

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

and then inspect the produced html code to see their actual ids (you'll see <input class="textinput textInput" id="id_first-name" maxlength="255" name="first-name" type="text"> so you'll know that the id of the field is first-name)

Upvotes: 6

Related Questions