A newer version of
Freeform
is available.
Try Freeform 5 now →
User Guides
Passing a Custom Property to a Formatting Template
Sometimes you may need to dynamically control what is displayed in a formatting template, e.g. toggle display of the form title, etc. This can be done by passing a custom property to the formatting template, eliminating the need to have duplicate, mostly-identical formatting templates.
Instructions
In your custom formatting template, add in a custom property. For the purpose of this example, we'll set up a conditional around the form title. We'll call that property showFormTitle. It can be accessed through form.properties.
{% if form.properties.showFormTitle %}
<h2>{{ form.name }}</h2>
{% endif %}
2
3
In a very basic formatting template, that might look something like this:
{# Opening <form> tag #}
{{ form.renderTag }}
{# Custom Property #}
{% if form.properties.showFormTitle %}
<h2>{{ form.name }}</h2>
{% endif %}
{# Display Error banner and general errors if applicable #}
{% if form.hasErrors %}
<div class="freeform-form-has-errors">
{{ "Error! Please review the form and try submitting again."|t('freeform') }}
{% if form.errors|length %}
<ul>
{% for error in form.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
{% endif %}
{# Render form fields #}
{% for row in form %}
<div class="freeform-row {{ form.customAttributes.rowClass }}">
{% for field in row %}
{% set columnClass = "freeform-column " ~ form.customAttributes.columnClass %}
{% if field.type == "submit" %}
{% set columnClass = columnClass ~ " freeform-column-content-align-" ~ field.position %}
{% endif %}
<div class="{{ columnClass }}"{{ field.rulesHtmlData }}>
{{ field.render({
class: field.type not in ["submit", "signature"] ? "freeform-input" : "",
labelClass: "freeform-label" ~ (field.inputOnly ? " freeform-input-only-label" : "") ~ (field.required ? " freeform-required" : ""),
errorClass: "freeform-errors",
instructionsClass: "freeform-instructions",
}) }}
</div>
{% endfor %}
</div>
{% endfor %}
{# Closing </form> tag #}
{{ form.renderClosingTag }}
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
Inside the template that is calling the form, you can add the new showFormTitle custom property into the form payload like this:
{{ craft.freeform.form("myFormHandle").render({ showFormTitle: true }) }}
OR
{{ form.render({ showFormTitle: true }) }}
TIP
You can add as many custom properties as you like, but be sure not to use any reserved words such as class, id, etc (anything that is already a parameter/property name in the Form query).