Foundation
Foundation
The following example assumes you're including necessary Foundation JS and CSS. You can keep the inline CSS inside the formatting template or move it to your page's <head></head> tags of course.
<style>button[type=submit].ff-loading{display:inline-flex;flex-wrap:nowrap;align-items:center}button[type=submit].ff-loading:before{content:"";display:block;flex:1 0 11px;width:11px;height:11px;margin-right:10px;border-style:solid;border-width:2px;border-color:transparent transparent #fff #fff;border-radius:50%;animation:ff-loading .5s linear infinite}@keyframes ff-loading{0%{transform:rotate(0)}100%{transform:rotate(1turn)}}label.required:after{content:"*";color:#d00;margin-left:5px;font-size:12px;font-family:serif;font-weight:700}.submit{margin-top:15px}.submit-align-left{text-align:left}.submit-align-left button:not(:first-of-type){margin-left:5px}.submit-align-center{text-align:center}.submit-align-center button:not(:first-of-type){margin-left:5px}.submit-align-right{text-align:right}.submit-align-right button:not(:first-of-type){margin-left:5px}.submit-align-spread button:first-child{float:left}.submit-align-spread button:last-child{float:right}.form-rating-field-wrapper label{margin-left:0;margin-right:0}</style>
{{ form.renderTag }}
{% if form.pages|length > 1 %}
<ul class="menu">
{% for page in form.pages %}
<li class="menu-text{{ form.currentPage.index == page.index ? ' is-active' : '' }}">
{{ page.label }}
</li>
{% endfor %}
</ul>
<br />
{% endif %}
{% if form.hasErrors %}
<div class="callout alert">
{{ "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 %}
<div class="grid-container">
{% for row in form %}
<div class="grid-x grid-padding-x {{ form.customAttributes.rowClass }}">
{% for field in row %}
{% set width = (12 / (row|length)) %}
{% set isCheckbox = field.type in ["checkbox","mailing_list"] %}
{% set columnClass = "" %}
{% set columnClass = columnClass ~ form.customAttributes.columnClass %}
{% set columnClass = columnClass ~ " medium-" ~ width ~ " columns" %}
{% if field.type == "submit" %}
{% set columnClass = columnClass ~ " submit submit-align-" ~ field.position %}
{% endif %}
<div class="{{ columnClass }} cell"{{ field.rulesHtmlData }}>
{% if field.type == "checkbox_group" %}
{{ field.renderLabel({
labelClass: (field.required ? " required" : ""),
instructionsClass: "help-text",
}) }}
{% for index, option in field.options %}
{{ not field.oneLine ? '<div class="checkbox">'|raw }}
<input type="checkbox"
name="{{ field.handle }}[]"
value="{{ option.value }}"
id="{{ field.idAttribute }}-{{ index }}"
{{ option.checked ? "checked" : "" }}
/>
<label for="{{ field.idAttribute }}-{{ index }}">{{ option.label|t|raw }}</label>
{{ not field.oneLine ? '</div>'|raw }}
{% endfor %}
{{ field.renderInstructions() }}
{{ field.renderErrors() }}
{% elseif field.type == "radio_group" %}
{{ field.renderLabel({
labelClass: (field.required ? " required" : ""),
instructionsClass: "help-text",
}) }}
{% for index, option in field.options %}
{{ not field.oneLine ? '<div class="radio">'|raw }}
<input type="radio"
name="{{ field.handle }}"
value="{{ option.value }}"
id="{{ field.idAttribute }}-{{ index }}"
{{ option.checked ? "checked" : "" }}
/>
<label for="{{ field.idAttribute }}-{{ index }}">{{ option.label|t|raw }}</label>
{{ not field.oneLine ? '</div>'|raw }}
{% endfor %}
{{ field.renderInstructions() }}
{{ field.renderErrors() }}
{% elseif field.type == "dynamic_recipients" and (field.showAsRadio or field.showAsCheckboxes) %}
{{ field.renderLabel({
labelClass: (field.required ? " required" : ""),
instructionsClass: "help-text",
}) }}
{% for index, option in field.options %}
{{ not field.oneLine ? '<div class="radio">'|raw }}
<input type="{{ field.showAsRadio ? "radio" : "checkbox" }}"
name="{{ field.handle }}[]"
value="{{ loop.index0 }}"
id="{{ field.idAttribute }}-{{ index }}"
{{ option.checked ? "checked" : "" }}
/>
<label for="{{ field.idAttribute }}-{{ index }}">{{ option.label|t|raw }}</label>
{{ not field.oneLine ? '</div>'|raw }}
{% endfor %}
{{ field.renderInstructions() }}
{{ field.renderErrors() }}
{% elseif field.type == "cc_details" %}
{# FOR FREEFORM PAYMENTS #}
{{ field.renderLabel({
labelClass: (field.required ? " required" : ""),
instructionsClass: "help-text",
}) }}
{% for layoutRow in field.layoutRows %}
<div class="grid-x grid-padding-x {{ form.customAttributes.rowClass }}">
{% set layoutWidth = (12 / (layoutRow|length)) %}
{% set columnClass = columnClass|replace(' medium-' ~ width) %}
{% set columnClass = columnClass ~ " medium-" ~ layoutWidth %}
{% for layoutField in layoutRow %}
<div class="{{ columnClass }} cell">
{{ layoutField.renderLabel({
labelClass: (layoutField.required ? " required" : ""),
instructionsClass: "help-text",
}) }}
{{ layoutField.renderInput({
instructionsClass: "help-block",
instructionsBelowField: true,
labelClass: (layoutField.required ? " required" : ""),
errorClass: "help-block",
inputAttributes: {type: "text"},
}) }}
{{ layoutField.renderInstructions() }}
{{ layoutField.renderErrors() }}
</div>
{% endfor %}
</div>
{% endfor %}
{{ field.renderInput({
instructionsClass: "help-block",
instructionsBelowField: true,
labelClass: (field.required ? " required" : ""),
errorClass: "help-block",
}) }}
{{ field.renderInstructions }}
{{ field.renderErrors }}
{% elseif field.type == "signature" %}
{{ field.render({ class: "button" }) }}
{% elseif field.type == "submit" %}
{{ field.render({ class: "button" }) }}
{% else %}
{{ field.render({
class: isCheckbox ? "checkbox" : "form-control",
instructionsClass: "help-text",
instructionsBelowField: true,
labelClass: (field.required ? " required" : ""),
}) }}
{% endif %}
</div>
{% endfor %}
</div>
{% endfor %}
</div>
{{ form.renderClosingTag }}
<script>
var form = document.querySelector('[data-id="{{ form.anchor }}"]');
if (form) {
form.addEventListener("freeform-ready", function (event) {
var freeform = event.target.freeform;
freeform.setOption("errorClassBanner", ["callout", "alert", "form-errors"]);
freeform.setOption("errorClassList", ["errors"]);
freeform.setOption("errorClassField", "has-error");
freeform.setOption("successClassBanner", ["callout", "success"]);
})
form.addEventListener("freeform-stripe-styling", (event) => {
event.detail.base = {
fontSize: "16px",
fontFamily: "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"",
}
})
}
</script>