This document is for an older version of
Express Forms
.
View latest version →
Templating Examples
TIP
Be sure to check out the following resources for more help:
- Getting Started tutorial to learn the basics.
- Templating Overview docs for the specifics of what's available.
- Field Types docs for complete information about available field types.
- Install the Demo if you need further help setting up your site.
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
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
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
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
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