Templating Examples

TIP

Be sure to check out the following resources for more help:

Below are some complete examples to help you get started with rendering forms in Express Forms:

Manual

Below is an example of a fairly manual form setup with some "helper" properties:

{% set form = craft.expressforms.form("contact") %}

{# Flash Success #}
{% if form.submittedSuccessfully %}
    <div class="success">
        {{ "Form has been submitted successfully!"|t }}
    </div>
{% endif %}

{# General Error Handling #}
{% if not form.valid %}
    <div class="errors">
        {{ "Error! Please review the form and try submitting again."|t }}
        {% if form.errors|length %}
            <ul>
                {% for error in form.errors %}
                    <li>{{ error|t }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>
{% endif %}

{# Automatically set Form tags with Return, CSRF and Honeypot (if enabled) #}
{{ form.openTag({ return: 'contact/thanks' }) }}
<p>
    <label for="name"{{ form.fields.name.isRequired ? ' class="required"' }}>{{ form.fields.name.label }}</label>
    <input id="name" type="text" name="name" value="{{ form.fields.name.value }}">
    {% if form.fields.name.hasErrors %}
        {{ "This field is required!"|t }}
    {% endif %}
</p>
<p>
    <label for="email"{{ form.fields.email.isRequired ? ' class="required"' }}>{{ form.fields.email.label }}</label>
    <input id="email" type="email" name="email" value="{{ form.fields.email.value }}">
    {% if form.fields.email.hasErrors %}
        {{ "This field is required!"|t }}
    {% endif %}
</p>
<p>
    <label for="subject"{{ form.fields.subject.isRequired ? ' class="required"' }}>{{ form.fields.subject.label }}</label>
    <input id="subject" type="text" name="subject" value="{{ form.fields.subject.value }}">
    {% if form.fields.subject.hasErrors %}
        {{ "This field is required!"|t }}
    {% endif %}
</p>
<p>
    <label for="message"{{ form.fields.message.isRequired ? ' class="required"' }}>{{ form.fields.message.label }}</label>
    <textarea rows="10" cols="40" id="message" name="message">{{ form.fields.message.value }}</textarea>
    {% if form.fields.message.hasErrors %}
        {{ "This field is required!"|t }}
    {% endif %}
</p>
<p>
    <label{{ form.fields.message.isRequired ? ' class="required"' }}>{{ form.fields.howHeard.label }}</label>
    <div class="checkbox">
        <label>
            <input type="checkbox" name="howHeard[]" value="newspaper"{{ "newspaper" in form.fields.howHeard.value ? " checked" }} /> Newspaper
        </label>
        <label>
            <input type="checkbox" name="howHeard[]" value="radio"{{ "radio" in form.fields.howHeard.value ? " checked" }} /> Radio
        </label>
        <label>
            <input type="checkbox" name="howHeard[]" value="friend"{{ "friend" in form.fields.howHeard.value ? " checked" }} /> Friend
        </label>
    </div>
    {% if form.fields.howHeard.hasErrors %}
        {{ "This field is required!"|t }}
    {% endif %}
</p>
<p>
    <label for="attachment"{{ form.fields.attachment.isRequired ? ' class="required"' }}>{{ form.fields.attachment.label }}</label>
    <input type="file" name="attachment[]" multiple>
    {% if form.fields.attachment.hasErrors %}
        <ul class="errors">
            {# Loop through available Errors #}
            {% for error in form.fields.attachment.errors %}
                <li>{{ error|t }}</li>
            {% endfor %}
        </ul>
    {% endif %}
</p>
<input type="submit" value="Submit">
{{ form.closeTag }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

Manual with Macro

Below is an example of the above fairly manual form setup, but uses a macro to clean up the error handling:

{# Macro for Field Errors #}
{% macro renderErrors(field) %}
    {% if field.hasErrors and field.errors|length %}
        <ul class="errors">
            {% for error in field.errors %}
                <li>{{ error|t }}</li>
            {% endfor %}
        </ul>
    {% endif %}
{% endmacro %}
{% import _self as forms %}

{% set form = craft.expressforms.form("contact") %}

{# Flash Success #}
{% if form.submittedSuccessfully %}
    <div class="success">
        {{ "Form has been submitted successfully!"|t }}
    </div>
{% endif %}

{# General Error Handling #}
{% if not form.valid %}
    <div class="errors">
        {{ "Error! Please review the form and try submitting again."|t }}
        {% if form.errors|length %}
            <ul>
                {% for error in form.errors %}
                    <li>{{ error|t }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>
{% endif %}

{# Automatically set Form tags with Return, CSRF and Honeypot (if enabled) #}
{{ form.openTag({ return: 'express-forms/test' }) }}
<p>
    <label for="name"{{ form.fields.name.isRequired ? ' class="required"' }}>{{ form.fields.name.label }}</label>
    <input id="name" type="text" name="name" value="{{ form.fields.name.value }}">
    {{ forms.renderErrors(form.fields.name) }}
</p>
<p>
    <label for="email"{{ form.fields.email.isRequired ? ' class="required"' }}>{{ form.fields.email.label }}</label>
    <input id="email" type="email" name="email" value="{{ form.fields.email.value }}">
    {{ forms.renderErrors(form.fields.email) }}
</p>
<p>
    <label for="subject"{{ form.fields.subject.isRequired ? ' class="required"' }}>{{ form.fields.subject.label }}</label>
    <input id="subject" type="text" name="subject" value="{{ form.fields.subject.value }}">
    {{ forms.renderErrors(form.fields.subject) }}
</p>
<p>
    <label for="message"{{ form.fields.message.isRequired ? ' class="required"' }}>{{ form.fields.message.label }}</label>
    <textarea rows="10" cols="40" id="message" name="message">{{ form.fields.message.value }}</textarea>
    {{ forms.renderErrors(form.fields.message) }}
</p>
<p>
    <label{{ form.fields.howHeard.isRequired ? ' class="required"' }}>{{ form.fields.howHeard.label }}</label>
    <div class="checkbox">
        <label>
            <input type="checkbox" name="howHeard[]" value="newspaper"{{ "newspaper" in form.fields.howHeard.value ? " checked" }} /> Newspaper
        </label>
        <label>
            <input type="checkbox" name="howHeard[]" value="radio"{{ "radio" in form.fields.howHeard.value ? " checked" }} /> Radio
        </label>
        <label>
            <input type="checkbox" name="howHeard[]" value="friend"{{ "friend" in form.fields.howHeard.value ? " checked" }} /> Friend
        </label>
    </div>
    {{ forms.renderErrors(form.fields.howHeard) }}
</p>
<p>
    <label for="attachment"{{ form.fields.attachment.isRequired ? ' class="required"' }}>{{ form.fields.attachment.label }}</label>
    <input type="file" name="attachment[]" multiple>
    {{ forms.renderErrors(form.fields.attachment) }}
</p>
<input type="submit" value="Submit">
{{ form.closeTag }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

Automated

The following is an automated approach and displays fields based on their order in Form Builder. Not everything is automated, so things like class names and such can be added in by hard coding:

{% set form = craft.expressforms.form("contact") %}

{# Flash Success #}
{% if form.submittedSuccessfully %}
   <div class="success">
        {{ "Form has been submitted successfully!"|t }}
   </div>
{% endif %}

{# General Error Handling #}
{% if not form.valid %}
    <div class="errors">
        {{ "Error! Please review the form and try submitting again."|t }}
        {% if form.errors|length %}
            <ul>
                {% for error in form.errors %}
                    <li>{{ error|t }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>
{% endif %}

{# Automatically set Form tags with Return, CSRF and Honeypot (if enabled) #}
{{ form.openTag({ return: 'contact/thanks' }) }}

{# Automation of Field Rendering #}
{% for field in form.fields %}
    {% if field.type == "hidden" %}
    <input id="{{ field.handle }}" type="hidden" name="{{ field.handle }}" value="{{ field.value }}">
    {% elseif field.type == "textarea" %}
        <p>
            <label for="{{ field.handle }}"{{ field.isRequired ? ' class="required"' }}>{{ field.label }}</label>
            <textarea rows="10" cols="40" id="{{ field.handle }}" name="{{ field.handle }}">
                {{- field.value -}}
            </textarea>
            {% if field.errors %}
                <ul class="errors">
                    {% for error in field.errors %}
                        <li>{{ error|t }}</li>
                    {% endfor %}
                </ul>
            {% endif %}
        </p>
    {% elseif field.type == "file" %}
        <p>
            <label for="{{ field.handle }}"{{ field.isRequired ? ' class="required"' }}>{{ field.label }}</label>
            <input type="{{ field.type }}" name="{{ field.handle }}[]" multiple>
            {% if field.errors %}
                <ul class="errors">
                    {% for error in field.errors %}
                        <li>{{ error|t }}</li>
                    {% endfor %}
                </ul>
            {% endif %}
        </p>
    {% elseif field.type == "checkbox" %}
        <p>
            <label{{ field.isRequired ? ' class="required"' }}>
                <input type="checkbox" name="{{ field.handle }}" value="1"{{ "1" in field.value ? " checked" }}>
                {{ field.label }}
            </label>
            {% if field.errors %}
                <ul class="errors">
                    {% for error in field.errors %}
                        <li>{{ error|t }}</li>
                    {% endfor %}
                </ul>
            {% endif %}
        </p>
    {% else %}
        {# Check on a Field Handle for Exception to Markup #}
        {% if field.handle == "howHeard" %}
            <p>
                <label{{ field.isRequired ? ' class="required"' }}>{{ field.label }}</label>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" name="howHeard[]" value="newspaper"{{ "newspaper" in form.fields.howHeard.value ? " checked" }} /> Newspaper
                    </label>
                    <label>
                        <input type="checkbox" name="howHeard[]" value="radio"{{ "radio" in form.fields.howHeard.value ? " checked" }} /> Radio
                    </label>
                    <label>
                        <input type="checkbox" name="howHeard[]" value="friend"{{ "friend" in form.fields.howHeard.value ? " checked" }} /> Friend
                    </label>
                </div>
                {% if field.errors %}
                    <ul class="errors">
                    {% for error in field.errors %}
                        <li>{{ error|t }}</li>
                    {% endfor %}
                    </ul>
                {% endif %}
            </p>
        {% else %}
            <p>
                <label for="{{ field.handle }}"{{ field.isRequired ? ' class="required"' }}>{{ field.label }}</label>
                <input id="{{ field.handle }}" type="{{ field.type }}" name="{{ field.handle }}" value="{{ field.value }}">
                {% if field.errors %}
                    <ul class="errors">
                    {% for error in field.errors %}
                        <li>{{ error|t }}</li>
                    {% endfor %}
                    </ul>
                {% endif %}
            </p>
        {% endif %}
    {% endif %}
{% endfor %}

<input type="submit" value="Submit">
{{ form.closeTag }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

Automated with Macro

This is the same as the regular Automated example, but uses a macro to clean up the error handling:

{# Macro for Field Errors #}
{% macro renderErrors(field) %}
    {% if field.hasErrors and field.errors|length %}
        <ul class="errors">
        {% for error in field.errors %}
            <li>{{ error|t }}</li>
        {% endfor %}
        </ul>
    {% endif %}
{% endmacro %}
{% import _self as forms %}

{% set form = craft.expressforms.form("contact") %}

{# Flash Success #}
{% if form.submittedSuccessfully %}
<div class="success">
    {{ "Form has been submitted successfully!"|t }}
</div>
{% endif %}

{# General Error Handling #}
{% if not form.valid %}
    <div class="errors">
        {{ "Error! Please review the form and try submitting again."|t }}
        {% if form.errors|length %}
            <ul>
                {% for error in form.errors %}
                    <li>{{ error|t }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>
{% endif %}

{# Automatically set Form tags with Return, CSRF and Honeypot (if enabled) #}
{{ form.openTag({ return: 'contact/thanks' }) }}

{# Automation of Field Rendering #}
{% for field in form.fields %}
    {% if field.type == "hidden" %}
        <input id="{{ field.handle }}" type="hidden" name="{{ field.handle }}" value="{{ field.value }}">
    {% elseif field.type == "textarea" %}
        <p>
            <label for="{{ field.handle }}"{{ field.isRequired ? ' class="required"' }}>{{ field.label }}</label>
            <textarea rows="10" cols="40" id="{{ field.handle }}" name="{{ field.handle }}">
                {{- field.value -}}
            </textarea>
            {{ forms.renderErrors(field) }}
        </p>
    {% elseif field.type == "file" %}
        <p>
            <label for="{{ field.handle }}"{{ field.isRequired ? ' class="required"' }}>{{ field.label }}</label>
            <input type="{{ field.type }}" name="{{ field.handle }}[]" multiple>
            {{ forms.renderErrors(field) }}
        </p>
    {% elseif field.type == "checkbox" %}
        <p>
            <label{{ field.isRequired ? ' class="required"' }}>
                <input type="checkbox" name="{{ field.handle }}" value="1"{{ "1" in field.value ? " checked" }}>
                {{ field.label }}
            </label>
            {{ forms.renderErrors(field) }}
        </p>
    {% else %}
        {# Check on a Field Handle for Exception to Markup #}
        {% if field.handle == "howHeard" %}
            <p>
            <label{{ field.isRequired ? ' class="required"' }}>{{ field.label }}</label>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="howHeard[]" value="newspaper"{{ "newspaper" in form.fields.howHeard.value ? " checked" }} /> Newspaper
                </label>
                <label>
                    <input type="checkbox" name="howHeard[]" value="radio"{{ "radio" in form.fields.howHeard.value ? " checked" }} /> Radio
                </label>
                <label>
                    <input type="checkbox" name="howHeard[]" value="friend"{{ "friend" in form.fields.howHeard.value ? " checked" }} /> Friend
                </label>
            </div>
            {{ forms.renderErrors(field) }}
            </p>
        {% else %}
            <p>
            <label for="{{ field.handle }}"{{ field.isRequired ? ' class="required"' }}>{{ field.label }}</label>
            <input id="{{ field.handle }}" type="{{ field.type }}" name="{{ field.handle }}" value="{{ field.value }}">
            {{ forms.renderErrors(field) }}
            </p>
        {% endif %}
    {% endif %}
{% endfor %}

<input type="submit" value="Submit">
{{ form.closeTag }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
Last Updated: 4/25/2019, 12:44:23 AM