Row Object

The Row object represents a single row inside a Freeform form layout. Each row can usually contain up to four fields/columns, depending on how the form was configured in the form builder. This number could also be larger than 4 if configured that way, but it's not recommended.

Rows do not include additional metadata or special methods. They are simple iterable objects that contain the Field objects assigned to that row.

Overview

• Each Row usually contains between 1 and 4 Field objects.
• Rows do not include non-renderable fields such as Hidden fields.
• The object itself does not expose properties or methods. It's meant to be iterated over in Twig templates.
• Rows exist within a Page, which exists within a Form. The hierarchy is: Form → Page → Row → Field.

Usage in Templates

Basic Example

Render all rows and fields from the currently active page in a form:

{% for row in form %}
  <div class="row">
    {% for field in row %}
      <div class="field">
        {{ field.label }}
        {{ field.renderInput() }}
      </div>
    {% endfor %}
  </div>
{% endfor %}

Real-World Example

Below is a more practical example with semantic HTML and classes for grid layouts (e.g. Tailwind, Bootstrap, etc.). This shows how you might dynamically set the number of grid columns based on the number of fields in each row.

{% for row in form %}
  <div class="freeform-row grid grid-cols-{{ row|length }} gap-4">
    {% for field in row %}
      <div class="freeform-field">
        <label for="{{ field.id }}">{{ field.label }}</label>
        {{ field.renderInput() }}
        {% if field.instructions %}
          <small class="freeform-instructions">{{ field.instructions }}</small>
        {% endif %}
        {{ field.renderErrors() }}
      </div>
    {% endfor %}
  </div>
{% endfor %}