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>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-right{text-align:right}.submit-align-center{text-align:center}.submit-align-center button:not(:first-of-type),.submit-align-left button:not(:first-of-type),.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}</style>

{{ form.renderTag }}

{% if form.pages|length > 1 %}

  <ul class="menu pagemenu">
    {% for page in form.pages %}
      <li class="{{ form.currentPage.index == page.index ? "active" : "" }}">
        {% if form.currentPage.index == page.index %}
          <a href="javascript:;" class="is-active">{{ page.label }}</a>
        {% else %}
          <a href="javascript:;">{{ page.label }}</a>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
{% 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 %}

{% for row in form %}
  <div class="row {{ 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 }}"{{ field.rulesHtmlData }}>

        {% if field.type == "checkbox_group" %}

          {{ field.renderLabel({
            labelClass: (field.required ? " required" : ""),
            instructionsClass: "help-text",
          }) }}

          {% for option in field.options %}
            <div class="checkbox">
              <label>
                <input type="checkbox"
                     name="{{ field.handle }}[]"
                     value="{{ option.value }}"
                    {{ option.checked ? "checked" : "" }}
                />
                {{ option.label|t|raw }}
              </label>
            </div>
          {% endfor %}

          {{ field.renderInstructions() }}
          {{ field.renderErrors() }}

        {% elseif field.type == "radio_group" %}

          {{ field.renderLabel({
            labelClass: (field.required ? " required" : ""),
            instructionsClass: "help-text",
          }) }}

          {% for option in field.options %}
            <div class="radio">
              <label>
                <input type="radio"
                     name="{{ field.handle }}"
                     value="{{ option.value }}"
                    {{ option.checked ? "checked" : "" }}
                />
                {{ option.label|t|raw }}
              </label>
            </div>
          {% 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 option in field.options %}
            <div class="radio">
              <label>
                <input type="{{ field.showAsRadio ? "radio" : "checkbox" }}"
                     name="{{ field.handle }}[]"
                     value="{{ loop.index0 }}"
                    {{ option.checked ? "checked" : "" }}
                />
                {{ option.label|t|raw }}
              </label>
            </div>
          {% 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="row {{ 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 }}">
                  {{ 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 == "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 %}


{{ form.renderClosingTag }}
​Foundation

Foundation
