Skip to main content

Grid

Grid​

The Grid implementation includes a lot more CSS to style it correctly. You can keep this CSS inside the formatting template or move it to your page's <head></head> tags of course.

<style>.freeform-pages{padding:0;margin:0 0 10px;list-style:none}.freeform-pages:after{content:"";display:table;clear:both}.freeform-pages li{float:left;margin:0 10px 0 0}.freeform-row{display:block;margin:0 -15px}.freeform-row:after{content:"";display:table;clear:both}.freeform-row .freeform-column{display:block;padding:10px 15px;float:left;box-sizing:border-box}.freeform-row .freeform-column:after{content:"";display:table;clear:both}.freeform-row .freeform-column>.freeform-row:first-child{margin-top:-10px}.freeform-row .freeform-column label{display:block}.freeform-row .freeform-column .freeform-label{font-weight:bold}.freeform-row .freeform-column .freeform-label.freeform-required:after{content:"*";margin-left:5px;color:red}.freeform-row .freeform-column .freeform-input{width:100%;display:block;box-sizing:border-box}.freeform-row .freeform-column .freeform-input[type=checkbox],.freeform-row .freeform-column .freeform-input[type=radio]{width:auto;display:inline;margin-right:5px}.freeform-row .freeform-column .freeform-input.StripeElement{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield;border:1px solid;padding-top:5px;height:26px}.freeform-row .freeform-column .freeform-input-only-label{font-weight:normal}.freeform-row .freeform-column .freeform-input-only-label>.freeform-input{display:inline-block;width:auto;margin-right:5px}.freeform-row .freeform-column .freeform-errors{list-style:none;padding:0;margin:5px 0 0}.freeform-row .freeform-column .freeform-errors>li{color:red}.freeform-row .freeform-column .freeform-instructions{margin:0 0 5px;font-size:13px;color:#ABA7A7}.freeform-row .freeform-column.freeform-column-content-align-left{text-align:left}.freeform-row .freeform-column.freeform-column-content-align-left button:not(:first-of-type){margin-left:5px}.freeform-row .freeform-column.freeform-column-content-align-center{text-align:center}.freeform-row .freeform-column.freeform-column-content-align-center button:not(:first-of-type){margin-left:5px}.freeform-row .freeform-column.freeform-column-content-align-right{text-align:right}.freeform-row .freeform-column.freeform-column-content-align-right button:not(:first-of-type){margin-left:5px}.freeform-row .freeform-column.freeform-column-content-align-spread button:first-child{float:left}.freeform-row .freeform-column.freeform-column-content-align-spread button:last-child{float:right}.freeform-row .freeform-column-1{width:8.33333%}.freeform-row .freeform-column-2{width:16.66667%}.freeform-row .freeform-column-3{width:25%}.freeform-row .freeform-column-4{width:33.33333%}.freeform-row .freeform-column-5{width:41.66667%}.freeform-row .freeform-column-6{width:50%}.freeform-row .freeform-column-7{width:58.33333%}.freeform-row .freeform-column-8{width:66.66667%}.freeform-row .freeform-column-9{width:75%}.freeform-row .freeform-column-10{width:83.33333%}.freeform-row .freeform-column-11{width:91.66667%}.freeform-row .freeform-column-12{width:100%}.freeform-form-has-errors{color:red}</style>

{{ form.renderTag }}

{% if form.pages|length > 1 %}
  <ul class="freeform-pages">
    {% for page in form.pages %}
      <li>
        {% if form.currentPage.index == page.index %}
          <a href="javascript:;">{{ page.label }}</a>
        {% else %}
          {{ page.label }}
        {% endif %}
      </li>
    {% endfor %}
  </ul>
{% endif %}

{% 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 %}

{% for row in form %}
  <div class="freeform-row {{ form.customAttributes.rowClass }}">
    {% for field in row %}
      {% set columnClass = "freeform-column " ~ form.customAttributes.columnClass %}
      {% set columnClass = columnClass ~ " freeform-column-" ~ (12 / (row|length)) %}
      {% if field.type == "submit" %}
        {% set columnClass = columnClass ~ " freeform-column-content-align-" ~ field.position %}
      {% endif %}
      <div class="{{ columnClass }}"{{ field.rulesHtmlData }}>

        {{ field.render({
          class: field.type != "submit" ? "freeform-input" : "",
          labelClass: "freeform-label" ~ (field.inputOnly ? " freeform-input-only-label" : "") ~ (field.required ? " freeform-required" : ""),
          errorClass: "freeform-errors",
        }) }}

        {# FOR FREEFORM PAYMENTS #}
        {% if field.layoutRows is defined %}
          {% for layoutRow in field.layoutRows %}
            <div class="freeform-row {{ form.customAttributes.rowClass }}">
              {% set layoutWidth = (12 / (layoutRow|length)) %}
              {% set columnClass = columnClass|replace(' col-lg-' ~ (row|length)) %}
              {% set columnClass = columnClass ~ " col-lg-" ~ layoutWidth %}
              {% for layoutField in layoutRow %}
                <div class="{{ columnClass }}">
                  {{ layoutField.render({
                    class: "freeform-input",
                    labelClass: "freeform-label" ~ (layoutField.inputOnly ? " freeform-input-only-label" : "") ~ (layoutField.required ? " freeform-required" : ""),
                    errorClass: "freeform-errors",
                  }) }}
                </div>
              {% endfor %}
            </div>
          {% endfor %}
        {% endif %}

      </div>
    {% endfor %}
  </div>
{% endfor %}

{{ form.renderClosingTag }}
Page Feedback