Skip to main content

Foundation 6Improved in 5.0+

The following example assumes you're including necessary Foundation 6 JS and CSS. 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

/foundation-6/
{# CSS overrides #}
{% set cssPath = view.assetManager.publishedUrl('@freeform-formatting-templates/foundation-6/_main.css', true) %}
{% do view.registerCssFile(cssPath) %}

{# JS overrides #}
{% set jsPath = view.assetManager.publishedUrl('@freeform-formatting-templates/foundation-6/_main.js', true) %}
{% do view.registerJsFile(jsPath) %}

{% import "freeform/_templates/formatting/foundation-6/_row.twig" as rowMacro %}

{# Render the opening form tag #}
{{ form.renderTag({
attributes: {
form: { class: "freeform-form", "data-freeform-foundation": true },
row: { class: "grid-x grid-margin-x" },
success: { class: "callout success" },
errors: { class: "callout alert" },
novalidate: true,
},
buttons: {
attributes: {
container: { class: "cell submit-buttons" },
submit: { class: "button primary" },
back: { class: "button secondary" },
save: { class: "button primary" },
},
},
fields: {
"@global": {
attributes: {
container: { class: "cell" },
label: { class: "freeform-label" },
input: {
class: "freeform-field",
},
instructions: { class: "help-text" },
error: { class: "no-bullet freeform-errors" },
},
},
":required": {
attributes: {
label: { "+class": "required" },
},
},
":errors": {
attributes: {
input: { "+class": "has-errors" },
},
},
"@group": {
attributes: {
label: { "+class": "h6" },
},
},
"@signature": {
attributes: {
input: { "+class": "button small secondary" },
},
},
},
}) }}

{# 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 class="mb-0">
{% for error in form.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
{% endif %}
{% endif %}

{# Render page tabs if multi-page #}
{% if form.pages|length > 1 %}
<ul class="menu freeform-page-tabs">
{% for page in form.pages %}
<li class="menu-text{{ form.currentPage.index == page.index ? ' is-active' : '' }}">
{{ page.label }}
</li>
{% endfor %}
</ul>
{% endif %}

{# Display form field rows and columns #}
{{ rowMacro.render(form.rows, form) }}

{# Render the closing form tag #}
{{ form.renderClosingTag }}
/foundation-6/fields/
{{ field.render }}

The following CDN links for Foundation are for v6.8.1, which may no longer be the latest version. Please see official Foundation documentation for latest versions and CDN links.

<!-- Compressed CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css"
crossorigin="anonymous"
/>

<!-- Compressed JavaScript -->
<script
src="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/js/foundation.min.js"
crossorigin="anonymous"
></script>