Setting the page heading

In Power Pages, it is essential to apply consistent headings for better user experience and accessibility. The way the heading is presented depends on the page type: whether it is a single question page or a multiple question page.

Single question page

For single question pages, the page heading should be included as part of the question's <legend> or <label> element in the form. The default title block in the extended template should be replaced with a blank block, effectively cancelling the default title behaviour. This ensures the question's title (which comes from the content page's title) is used within the form itself.



{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}

{% block main %}
  <div class="govuk-form-group">
    <fieldset class="govuk-fieldset">
      <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
        <h1 class="govuk-fieldset__heading">
          {{ page.title }}
        </h1>
      </legend>
      <div class="govuk-radios">
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="schema-name" name="schema-name" type="radio" value="yes">
          <label class="govuk-label govuk-radios__label" for="schema-name">Yes</label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="schema-name-2" name="schema-name" type="radio" value="no">
          <label class="govuk-label govuk-radios__label" for="schema-name-2">No</label>
        </div>
      </div>
    </fieldset>
  </div>
{% endblock %}

Multiple question page

For multiple question pages, you can omit the {% block title %} block in the extended template. The page will inherit the default page title from the content page, which is set in the Title field in the Power Pages configuration.



{% extends 'DfE/Layouts/2ColumnWideLeft' %}

<!-- Default page heading will display here instead (e.g. 'Personal information') -->
 
{% block main %}
  <div class="govuk-form-group">
    <label class="govuk-label" for="schema-name">
      What is your first name?
    </label>
    <input class="govuk-input" id="schema-name" name="schema-name" type="text">
  </div>

  <div class="govuk-form-group">
    <label class="govuk-label" for="schema-name">
      What is your last name?
    </label>
    <input class="govuk-input" id="schema-name" name="schema-name" type="text">
  </div>
{% endblock %}

Why the difference?

Single question pages need a custom structure for the heading as part of the form itself, while multiple question pages can use the default inherited title. This ensures that both types of pages follow accessible design principles while maintaining consistency across the service.

Both options inherit the page title from the Web Page Content record. This is accessed in Liquid as {{ page.title }}.

Editing the page title in Dynamics 365

To access and modify the page title, follow these steps:

Go to the Power Pages Management model-driven app.
Select Web Pages in the left-hand navigation.
Find and open the Web Page record you want to edit.
Locate the child Web Page Content record and open it.
Edit the Title field and click Save.

Screenshot of the Web Page Content record in Dynamics 365 showing the Title field

Best practices

For single question pages, use the <legend> or <label> element to present the question with its title.
For multiple question pages, let the page title automatically inherit from the content page's metadata.
Remember to use the appropriate component structure and classes associated with single question and multiple question pages. The components area of this design manual provides examples for each use case.