Newsletter signup form template

03 / Make it yours

Choose your stack. Copy your form.

Replace the example endpoint with your Formward endpoint, then adapt the fields to your needs.

<form action="https://forms.formward.eu/f/your-form-id" method="POST">
  <label for="email">Email</label>
  <input type="email" name="email" id="email" required />
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px" aria-hidden="true" />
  <button type="submit">Send</button>
</form>

Accessibility

Accessible by default, and how to keep it that way

• Every field in the code has a visible label tied to it with for and id, so screen readers announce what to enter and a click on the label focuses the field.
• Required fields carry the required attribute, so the browser explains a missing answer before anything is sent. Say “required” in words as well; an asterisk or a colour alone is easy to miss.
• The spam trap field (_gotcha) is hidden from screen readers with aria-hidden and skipped by the Tab key, so people never meet it.
• In the JavaScript versions, show the confirmation or error in an element with role="status" so the result is announced, and keep the entered answers when sending fails.

Changed the fields? Paste your version into the HTML form tester to see exactly what it sends, or run it through the GDPR form checker.

04 / Implementation

How the code talks to Formward

Next.js client component

Copy"use client";

import { useState } from "react";

export function EmailSignupForm() {
  const [sent, setSent] = useState(false);

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = e.currentTarget;
    const res = await fetch("https://forms.formward.eu/f/your-form-id", {
      method: "POST",
      headers: { Accept: "application/json" },
      body: new FormData(form),
    });
    if (res.ok) {
      setSent(true);
      form.reset();
    }
  }

  if (sent) return <p>Thanks! Your message has been sent.</p>;

  return (
    <form onSubmit={onSubmit}>
      <label htmlFor="email">Email</label>
      <input type="email" name="email" id="email" required />
      <input
        type="text"
        name="_gotcha"
        tabIndex={-1}
        autoComplete="off"
        style={{ position: "absolute", left: "-9999px" }}
        aria-hidden="true"
      />
      <button type="submit">Send</button>
    </form>
  );
}

05 / Alternative

Signup with a recorded consent box

A first name for a friendlier greeting and a required checkbox named _consent. Switch on consent capture in the form settings, mark it required, and paste the same wording there as on the box. Formward stores the configured text and the time with each signup and refuses submissions without the tick.

HTML

Copy<form action="https://forms.formward.eu/f/your-form-id" method="POST">
  <label for="name">First name</label>
  <input type="text" name="name" id="name" />
  <label for="email">Email</label>
  <input type="email" name="email" id="email" required />
  <label>
    <input type="checkbox" name="_consent" id="_consent" required /> Email me the monthly newsletter. I can unsubscribe at any time with the link in every issue.
  </label>
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px" aria-hidden="true" />
  <button type="submit">Send</button>
</form>

Next.js

Copy"use client";

import { useState } from "react";

export function NewsletterSignupConsentForm() {
  const [sent, setSent] = useState(false);

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = e.currentTarget;
    const res = await fetch("https://forms.formward.eu/f/your-form-id", {
      method: "POST",
      headers: { Accept: "application/json" },
      body: new FormData(form),
    });
    if (res.ok) {
      setSent(true);
      form.reset();
    }
  }

  if (sent) return <p>Thanks! Your message has been sent.</p>;

  return (
    <form onSubmit={onSubmit}>
      <label htmlFor="name">First name</label>
      <input type="text" name="name" id="name" />
      <label htmlFor="email">Email</label>
      <input type="email" name="email" id="email" required />
      <label>
        <input type="checkbox" name="_consent" id="_consent" required /> Email me the monthly newsletter. I can unsubscribe at any time with the link in every issue.
      </label>
      <input
        type="text"
        name="_gotcha"
        tabIndex={-1}
        autoComplete="off"
        style={{ position: "absolute", left: "-9999px" }}
        aria-hidden="true"
      />
      <button type="submit">Send</button>
    </form>
  );
}

Questions

Do I need double opt-in for a newsletter in the EU?

The GDPR does not name it, but Article 7(1) requires you to be able to show that each person consented, and a confirmation email is the usual way to prove the address belongs to the person who signed up. In some countries, Germany among them, it is widely treated as the expected standard. Your mailing tool normally handles it.

Can Formward send the newsletter itself?

No. Formward collects and stores signups and can send a one-off autoresponder. Send the newsletter from a mailing tool, and move signups there by export, webhook or n8n.

Related

• Signup templates

  Mailchimp and Klaviyo styled signups, and the waitlist.

• Waitlist template

  For interest before a launch.

• Consent checkboxes

  Wording that holds up, and how proof is stored.

• Integrations

  Webhooks, n8n and exports to move signups on.

• React forms

  The signup as a component with inline success.