Skip to main content

Page Object

The Page object represents a single page within a multi-page Freeform form. Each page contains all of the Rows and their corresponding Fields assigned to it in the Form Builder.

If your form only has one page, there will still be one Page object available.

You can iterate over the entire form or use form.currentPage for the active page — both are valid depending on context. When using multi-page forms, navigation and progress tracking typically use form.pages and form.currentPage.

​Overview

  • Each Page contains one or more Rows.
  • A Page has a label (its title) and an index (starting from 0).
  • You can iterate over the Page object directly or use the getRows() method to access its rows.

​Properties

​index

Returns the zero-based index of the page. The first page returns 0, the second page returns 1, and so on. E.g. {{ form.currentPage.index }}.

You can display user-friendly page numbers by adding + '1' in Twig.

{{ page.index + '1' }}

​label

Outputs the display label of the page, as defined in the form builder. E.g. {{ form.currentPage.label }}.

​Methods

​getRows()

Returns all Rows assigned to this page. You can use this method directly, or iterate over the page itself. Both yield the same result.

{% for row in form.currentPage.getRows() %}
  {% for field in row %}
    {{ field.label }}
  {% endfor %}
{% endfor %}

This is equivalent to:

{% for row in form.currentPage %}
  {% for field in row %}
    {{ field.label }}
  {% endfor %}
{% endfor %}

​Usage Examples

​Page Label and Index

<p>Page {{ form.currentPage.index + 1 }}: {{ form.currentPage.label }}</p>

​Display All Form Pages

Render a list of all pages in the form and visually indicate the active one. This example can be styled as a progress indicator or navigation header for multi-page forms.

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

​All Fields in the Current Page

Render all fields from all rows in the currently active page:

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

Or equivalently (since iterating over the form automatically renders the current page):

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

​Total Number of Pages

Total pages: {{ form.pages|length }}
Page Feedback