Page Elements

For each page it renders, the plugin computes a set of view model properties and makes them available to your base layout template — set via baseLayoutPath in the plugin options. Some of these map directly to GOV.UK Frontend components (back link, phase banner, error summary, service navigation). Others are general metadata about the current page or form (title, name, slug) that your layout can use however it needs to.

None of these are required. The form journey will function without any of them, but omitting them may result in a degraded experience: missing back links, no phase banner, inaccessible page titles, and so on. Use whichever ones apply to your service.

The template block names in the examples below follow the GOV.UK Frontend page template.

Back link

Property:

backLink: { text: string; href: string } | undefined

The plugin automatically calculates the back link for each page based on the user's journey. The value is ready to pass directly to the GOV.UK Frontend Back link macro.

Add the following to your base layout's beforeContent block:

Copy
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}

{% block beforeContent %}
  {% if backLink %}
    {{ govukBackLink(backLink) }}
  {% endif %}
{% endblock %}

backLink is undefined on pages with no back navigation — for example, the start page and confirmation page.

Phase banner

Properties:

phaseTag: string | undefined, feedbackLink: string | undefined

The plugin provides both values for rendering a GOV.UK Frontend Phase banner.

• phaseTag comes from the form definition's phaseBanner.phase property.
• feedbackLink is the URL of the built-in form feedback page (/form/feedback?formId=...). It is undefined when user feedback is disabled via disableUserFeedback in the form definition's options.

If either value is not set by the form definition, you can fall back to a value from your own service configuration:

Copy
{% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}

{% set phaseTag = phaseTag or config.phaseTag %}
{% set feedbackLink = feedbackLink or config.feedbackLink %}

{% if phaseTag %}
  {{ govukPhaseBanner({
    tag: { text: phaseTag | capitalize },
    html: '<a class="govuk-link govuk-link--no-visited-state" href="' + feedbackLink + '" target="_blank" rel="noopener noreferrer">Give feedback</a>'
  }) }}
{% endif %}

Error summary

Property:

errors: FormSubmissionError[] | undefined

The plugin populates errors with validation failures when a page is submitted with invalid input. Pass it to the GOV.UK Frontend Error summary component, which must appear at the top of the main content area, above the page heading.

The plugin's own page views already render the error summary. This property is listed here because your pageTitle block should prefix the title with "Error: " when errors are present — a GDS accessibility requirement.

Copy
{% block pageTitle %}
  {{ "Error: " if errors | length }}{{ pageTitle }} - {{ name }} - GOV.UK
{% endblock %}

Page title

Property:

pageTitle: string

The title of the current form page. Use it in your layout's pageTitle block to populate the browser <title> element. name is the form name from the form definition:

Copy
{% block pageTitle %}
  {{ "Error: " if errors | length }}{{ pageTitle }} - {{ name }} - GOV.UK
{% endblock %}

When a page has validation errors, prefix the title with "Error: ". Screen readers announce the page title on load, so this is what alerts users to the presence of errors before they reach the error summary or individual fields. This pattern is documented in the GDS error summary guidance.

Header and service navigation

Properties:

serviceUrl: string, name: string | undefined

• serviceUrl is the root URL of the current form (e.g. /my-form). Use it as the service link in your header so users can return to the start of the form.
• name is the form name from the form definition.

The GOV.UK Service navigation component is recommended for this from GOV.UK Frontend v5.

If your service hosts a single form and the form name is the service name, passing name as serviceName is appropriate:

Copy
{% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}

{{ govukServiceNavigation({
  serviceName: name,
  serviceUrl: serviceUrl
}) }}

If your service hosts multiple forms, serviceName should be your real service name rather than the individual form name. In that case, name is more suited as a page-level heading — for example, as an <h1> above the form content:

Copy
{{ govukServiceNavigation({
  serviceName: "My Service Name",
  serviceUrl: "/"
}) }}

<h1 class="govuk-heading-l">{{ name }}</h1>

Other available properties

The following properties are also available in the template context. They are used internally by the plugin's own page views but can be accessed in your base layout where needed: