Multipage All FieldsNew in 5.0+
If you'd like to display ALL fields for a multipage form for the purpose of reviewing/previewing fields on other pages, it is possible by additionally iterating over {% for page in form.pages %}
and then {% for row in page %}
instead of {% for row in form %}
. You can place the additional CSS and JS inside the formatting template or add to your site's CSS / JS files.
Preview
Video: Preview of Formatting Template Examples
Templates
/multipage-all-fields/
{# Pull in CSS and field rendering #}
<style>
{% include "freeform/_templates/formatting/multipage-all-fields/_main.css" %}
</style>
{% import "freeform/_templates/formatting/multipage-all-fields/_row.twig" as rowMacro %}
{# Render the opening form tag #}
{{ form.renderTag({
attributes: {
row: { class: "freeform-row" },
success: { class: "freeform-form-success" },
errors: { class: "freeform-form-errors" },
novalidate: true,
},
fields: {
"@global": {
attributes: {
input: {
class: "freeform-input",
},
label: { class: "freeform-label" },
instructions: { class: "freeform-instructions" },
error: { class: "freeform-errors" },
}
},
":required": {
attributes: {
label: { "+class": "freeform-required" },
}
},
":errors": {
attributes: {
input: { "+class": "is-invalid has-validation" },
},
},
"@group": {
attributes: {
label: { "+class": "group-label" },
}
},
"@signature": {
attributes: {
input: { "-class": "freeform-input" },
},
},
},
}) }}
{# Pull in JS overrides #}
<script>
{% include "freeform/_templates/formatting/multipage-all-fields/_main.js" %}
</script>
{# Success and error message handling for non-AJAX forms #}
{% if not form.settings.ajax %}
{% if form.submittedSuccessfully %}
<div{{ form.attributes.success|raw }}>
<p>{{ form.settings.successMessage | t('freeform') }}</p>
</div>
{% endif %}
{% if form.hasErrors %}
<div{{ form.attributes.errors|raw }}>
<p>{{ form.settings.errorMessage | t('freeform') }}</p>
{% if form.errors|length %}
<ul>
{% for error in form.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
{% endif %}
{% endif %}
{# Display form field rows and columns #}
{{ rowMacro.render(form.rows, form) }}
{# Render the closing form tag #}
{{ form.renderClosingTag }}
/multipage-all-fields/fields/
{{ field.render }}
Live Demo
The demo below is a live demo site that shows most of what the Demo Templates include (some sections and data has been limited).