Skip to main content

Materialize

The following example assumes you're including necessary Materialize JS and CSS.

Materialize has been abandoned, but the community has forked it and regularly maintains it.

​Formatting

{# Opening <form> tag #}
{{ form.renderTag }}

{# Display page tabs if Multi-page form #}
{% if form.pages|length > 1 %}
  <ul class="pagination">
    {% for page in form.pages %}
      <li class="{{ form.currentPage.index == loop.index0 ? "active" : "disabled" }}">
        <a href="javascript:;">{{ page.label }}</a>
      </li>
    {% endfor %}
  </ul>
{% endif %}

{# Display Error banner and general errors if applicable #}
{% if form.hasErrors %}
  <div class="alert alert-danger 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 %}

{# Render form fields #}
{% 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 = field.type in ["radio_group", "checkbox_group"] ? "" : "input-field" %}
      {% set columnClass = columnClass ~ (field.errors|length ? " has-error" : "") %}
      {% set columnClass = columnClass ~ form.customAttributes.columnClass %}
      {% set columnClass = columnClass ~ " col m" ~ width ~ " s12" %}

      {% if field.type == "submit" %}
        {% set columnClass = columnClass ~ " submit-align-" ~ field.position %}
      {% endif %}

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

        <div class="{{ columnClass }}" style="margin-bottom: 20px;"{{ field.rulesHtmlData }}>

          {{ field.renderLabel({
            labelClass: " active" ~ (field.required ? " required"),
            instructionsClass: "help-block",
            errorClass: "help-block",
          }) }}

          {% for option in field.options %}
            <p>
              <input type="checkbox"
                   id="{{ form.hash ~ field.handle ~ option.value }}"
                   name="{{ field.handle }}"
                   value="{{ option.value }}"
                  {{ option.value in field.value ? "checked" : "" }}
              />
              <label for="{{ form.hash ~ field.handle ~ option.value }}">{{ option.label|t('freeform')|raw }}</label>
            </p>
          {% endfor %}

          {{ field.renderInstructions }}
          {{ field.renderErrors }}
        </div>

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

        <div class="{{ columnClass }}" style="margin-bottom: 20px;"{{ field.rulesHtmlData }}>

          {{ field.renderLabel({
            labelClass: " active" ~ (field.required ? " required"),
            instructionsClass: "help-block",
            errorClass: "help-block",
          }) }}

          {% for option in field.options %}
            <p>
              <input type="radio"
                   id="{{ form.hash ~ field.handle ~ option.value }}"
                   name="{{ field.handle }}"
                   value="{{ option.value }}"
                  {{ option.value in field.value ? "checked" : "" }}
              />
              <label for="{{ form.hash ~ field.handle ~ option.value }}">{{ option.label|t('freeform')|raw }}</label>
            </p>
          {% endfor %}

          {{ field.renderInstructions }}
          {{ field.renderErrors }}
        </div>

      {% elseif field.type == "dynamic_recipients" and (field.showAsRadio or field.showAsCheckboxes) %}

        <div class="{{ columnClass }}" style="margin-bottom: 20px;"{{ field.rulesHtmlData }}>

          {{ field.renderLabel({
            labelClass: " active" ~ (field.required ? " required"),
            instructionsClass: "help-block",
            errorClass: "help-block",
          }) }}

          {% for option in field.options %}
            <p>
              <input type="{{ field.showAsRadio ? "radio" : "checkbox" }}"
                   id="{{ form.hash ~ field.handle ~ option.value }}"
                   name="{{ field.handle }}[]"
                   value="{{ loop.index0 }}"
                  {{ option.value in field.value ? "checked" : "" }}
              />
              <label for="{{ form.hash ~ field.handle ~ option.value }}">{{ option.label|t('freeform')|raw }}</label>
            </p>
          {% endfor %}

          {{ field.renderInstructions }}
          {{ field.renderErrors }}
        </div>

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

        <div class="{{ columnClass }}"{{ field.rulesHtmlData }}>
          {{ field.renderInput({
            class: 'materialize-textarea'
          }) }}
          {{ field.renderLabel }}

          {{ field.renderInstructions }}
          {{ field.renderErrors }}
        </div>

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

        <div class="{{ columnClass|replace('input-field', '') }}"{{ field.rulesHtmlData }}>

          {{ field.renderInput }}
          {{ field.renderLabel({
            instructionsClass: "help-block",
            errorClass: "help-block",
          }) }}

          {{ field.renderInstructions() }}
          {{ field.renderErrors() }}
        </div>

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

        <div class="{{ columnClass|replace('input-field', '') }}"{{ field.rulesHtmlData }}>

          {{ field.renderInput|replace('<label>', '')|replace('</label>', '')|replace(field.label, '')|raw }}
          {{ field.renderLabel({
            instructionsClass: "help-block",
            errorClass: "help-block",
          }) }}

          {{ field.renderInstructions() }}
          {{ field.renderErrors() }}
        </div>

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

        <div class="{{ columnClass }}"{{ field.rulesHtmlData }}>
          {{ field.render({
            class: "btn btn-large waves-effect waves-light"
          }) }}
        </div>

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

        <div class="{{ columnClass }}">
          {{ field.renderInput }}
        </div>

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

        <div class="{{ columnClass|replace('input-field', '') }} file-field input-field"{{ field.rulesHtmlData }}>
          <div class="btn">
            <span>File</span>
            {{ field.renderInput }}
          </div>
          <div class="file-path-wrapper">
            <input class="file-path validate"
                 type="text"
                 placeholder="{{ field.label }}"
            />
          </div>

          {{ field.renderInstructions }}
          {{ field.renderErrors }}
        </div>

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

        {# FOR FREEFORM PAYMENTS #}

        <div class="{{ columnClass|replace('input-field', '') }}"{{ field.rulesHtmlData }}>
          {{ field.renderLabel }}

          {% for layoutRow in field.layoutRows %}
            <div class="row {{ form.customAttributes.rowClass }}">
              {% set layoutWidth = (12 / (layoutRow|length)) %}
              {% set columnClass = columnClass|replace(' m' ~ width) %}
              {% set columnClass = columnClass ~ " m" ~ layoutWidth %}
              {% for layoutField in layoutRow %}
                <div class="{{ columnClass }}">
                  {{ layoutField.renderInput({
                    class: " select-wrapper chips",
                    instructionsClass: "help-block",
                    instructionsBelowField: true,
                    errorClass: "help-block",
                    inputAttributes: { style: "padding-top: 1rem" },
                  }) }}
                  {{ layoutField.renderLabel({labelClass: " select-label" ~ (layoutField.required ? " required" : "")}) }}

                  {{ 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 }}
        </div>

      {% else %}

        <div class="{{ columnClass }}"{{ field.rulesHtmlData }}>
          {{ field.renderInput({
            instructionsClass: "help-block",
            instructionsBelowField: true,
            labelClass: (field.required ? " required" : ""),
            errorClass: "help-block",
          }) }}
          {{ field.renderLabel }}

          {{ field.renderInstructions }}
          {{ field.renderErrors }}
        </div>

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

{# Closing </form> tag #}
{{ form.renderClosingTag }}

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

<!-- Compiled and minified CSS -->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
Page Feedback