Subscribe

<form class="p234-subscribe">
  <h3 class="p234-subscribe__title">Get the Canada visa updates</h3>
  <p class="p234-subscribe__what">One email when the eligibility lists or processing times change. Usually twice a month.</p>
  <div class="p234-subscribe__row">
    <label for="sub-a" style="position:absolute;left:-9999px">Email address</label>
    <input id="sub-a" class="p234-subscribe__field" type="email" placeholder="you@example.com" autocomplete="email">
    <button class="p234-btn" type="submit">Subscribe</button>
  </div>
  <p class="p234-subscribe__note">Unsubscribe in one click. We never share your address.</p>
</form>

<form class="p234-subscribe">
  <h3 class="p234-subscribe__title">Daily brief</h3>
  <p class="p234-subscribe__what">The day's stories in one email, every weekday morning.</p>
  <div class="p234-subscribe__row">
    <label for="sub-b" style="position:absolute;left:-9999px">Email address</label>
    <input id="sub-b" class="p234-subscribe__field" type="email" value="not-an-address" aria-invalid="true" aria-describedby="sub-b-err">
    <button class="p234-btn" type="submit">Subscribe</button>
  </div>
  <p id="sub-b-err" class="p234-subscribe__error">Enter an email address in the form you@example.com</p>
</form>

Say what arrives

The one line under the title is the component's real work. "Subscribe to our newsletter" asks for an address and promises nothing. Say what is in it and how often, and match the offer to the page: a reader on a visa article is being offered visa updates, not the daily brief.

• Name the frequency. Twice a month, every weekday, when something changes.
• Put the unsubscribe promise next to the button, not in the footer.
• Use type="email" and autocomplete="email" so a phone offers the right keyboard and the saved address.
• Keep the label present for screen readers even when it is visually hidden.

• Do not ask for a name. The address is the only thing needed to send an email.
• Do not use a placeholder as the label.
• Do not interrupt the article with a modal. This block sits in the flow.

After it is submitted

Replace the form with a confirmation in the same space, and say what happens next, including the confirmation email if there is one. Do not move the reader to another page: they were in the middle of an article.

Consent

Feature and product emails need the terms checkbox and a recorded consent version. The daily and weekly briefs do not. Those rules live with the email system, not here, but a block that collects an address for anything beyond the briefs has to carry the checkbox.