Newsletter Subscribe page has no heading or context, and the email field does not match the Subscribe button height

Problem/Motivation

The Newsletter Subscribe form is a good inline widget, but it is also served on its own page at /form/newsletter-subscribe, and there it has two problems.

1. The page has no heading and no context. The form carries no markup of its own, and the Canvas themes render no page title for a webform route, so a visitor arrives at a bare email field floating under the site header above a large empty area. There is nothing saying what they are subscribing to. Verified on both Horizon Aid and Educare: document.querySelector('h1') returns null on /form/newsletter-subscribe, while /user/login, /search and Canvas pages all have one.

2. The email field and the Subscribe button are different heights. The submit is sized by the theme button classes while the email input keeps the default .form-control height, so the two sit in one flex row at different sizes. Measured on Horizon Aid:

• Desktop 1440px: input 41px, button 56px, a 15px mismatch on a row that is flush at the top.
• Mobile 390px: input 37px, button 53px. The input is also below the 44px minimum touch target.

This matters more now than it used to, because the site templates link their footer Subscribe call to action straight at this page. See Horizon Aid #3622817 and Educare #3622820.

The page today, on an Educare site:

Steps to reproduce

1. Install a site that applies varbase_webform_base.
2. Visit /form/newsletter-subscribe as an anonymous user.
3. Observe that there is no heading, and that the email field is shorter than the Subscribe button.

Proposed resolution

Give the form its own page structure and make the two controls the same height, entirely inside the webform config. No theme change and no custom CSS file.

Add a webform_markup header with a real h1, an eyebrow label, and a lead line; add a footer with a reassurance line and three short value points. Everything uses stock Bootstrap 5.3 utilities that the Vartheme BS5 themes already provide, so it inherits each template brand rather than hardcoding colours.

For the sizing, give the email input and the submit button the same explicit minimum height:

'#attributes':
  class:
    - w-100
    - rounded-pill
    - px-4
  style: 'min-height:3.5rem'

An earlier attempt used h-100 to stretch the input to the row height. That works on desktop, where the row is a flex row with align-items-stretch, but not on mobile, where the row becomes a column and the cross axis is width. An explicit height is correct at every width.

The copy is deliberately neutral, since this form ships to every Varbase site. A template that wants its own wording can override the webform.

The page with this change, on Horizon Aid. It inherits the template brand because it uses Bootstrap utilities rather than hardcoded colours:

And at 390px, where the row stacks and both controls stay 3.5rem tall:

Remaining tasks

• ✅ File an issue
• ✅ Addition/Change/Update/Fix
• ✅ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support
• ➖ User Guide Documentation support
• ✅ UX/UI designer responsibilities
• ✅ Accessibility and Readability
• ❌ Reviewed by a human
• ❌ Code review by maintainers
• ❌ Full testing and approval
• ❌ Credit contributors
• ❌ Review with the product owner
• ✅ Update Release Notes
• ✅ Release varbase_webform_base-1.0.2

User interface changes

• The Newsletter Subscribe page gains a heading, a lead line and three short value points.
• The email field and the Subscribe button are both 3.5rem tall and aligned, on desktop and on mobile, and both now clear the 44px touch target.
• Placed as a block inside a page, the form now also carries that header and footer markup.

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• The Newsletter Subscribe form now has a proper page layout with a heading and supporting copy, and its email field and Subscribe button are the same height on all screen sizes.