Newsletter signup

<!-- 1. inline -->
<form class="news inline" novalidate>
  <label for="e1">Get the monthly dispatch</label>
  <div class="row">
    <input type="email" id="e1" name="email" placeholder="you@example.com"
           autocomplete="email" required aria-describedby="e1-err">
    <button type="submit">Subscribe</button>
  </div>
  <p class="hint">One email a month. Unsubscribe in one click.</p>
  <p class="err" id="e1-err" hidden>Please enter a valid email address.</p>
  <p class="done" hidden>Thanks — check your inbox to confirm.</p>
</form>

<!-- 2. boxed -->
<form class="news boxed" novalidate>
  <h3>The monthly dispatch</h3>
  <p class="blurb">Notes on cloth, making and the occasional mistake. Sent once a month, never sold.</p>
  <label for="e2">Email address</label>
  <input type="email" id="e2" name="email" autocomplete="email" required aria-describedby="e2-err">
  <p class="err" id="e2-err" hidden>Please enter a valid email address.</p>
  <button type="submit">Subscribe</button>
  <p class="done" hidden>Thanks — check your inbox to confirm.</p>
</form>

<!-- 3. footer strip -->
<form class="news strip" novalidate>
  <div>
    <strong>Stay in touch</strong>
    <span>One email a month.</span>
  </div>
  <div class="row">
    <label class="sr" for="e3">Email address</label>
    <input type="email" id="e3" name="email" placeholder="you@example.com"
           autocomplete="email" required aria-describedby="e3-err">
    <button type="submit">Join</button>
  </div>
  <p class="err" id="e3-err" hidden>Please enter a valid email address.</p>
  <p class="done" hidden>Thanks — check your inbox to confirm.</p>
</form>

* { box-sizing: border-box; margin: 0; }
body { font: 16px/1.6 system-ui, -apple-system, sans-serif; background: #f6f8fb; padding: 24px; }

.news { max-width: 520px; margin: 0 auto 22px; }

label { display: block; font-size: .88rem; font-weight: 500; color: #16202e; margin-bottom: 7px; }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

input[type="email"] {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  padding: 11px 13px;
  border: 1px solid #d9e0ea;
  border-radius: 9px;
  background: #fff;
  color: #16202e;
}

input::placeholder { color: #a9b4c5; }
input:focus { outline: 2px solid #3b4fe4; outline-offset: 1px; border-color: #3b4fe4; }
input[aria-invalid="true"] { border-color: #c93b3b; }

button {
  font: inherit;
  font-size: .93rem;
  font-weight: 500;
  padding: 11px 22px;
  border: 0;
  border-radius: 9px;
  background: #3b4fe4;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}

button:hover { background: #2a3abf; }
button:disabled { background: #c9d3e2; cursor: not-allowed; }

.row { display: flex; gap: 9px; }
.hint { font-size: .8rem; color: #8593ab; margin-top: 8px; }
.err { font-size: .82rem; color: #c93b3b; margin-top: 8px; }
.done { font-size: .88rem; color: #1f8a5b; margin-top: 10px; }

/* ---- boxed ---- */
.boxed {
  padding: 26px 26px 28px;
  background: #fff;
  border: 1px solid #e2e7ef;
  border-radius: 14px;
}

.boxed h3 { font-size: 1.15rem; color: #16202e; }
.blurb { font-size: .9rem; color: #5b6b83; margin: 6px 0 20px; }
.boxed button { width: 100%; margin-top: 14px; }

/* ---- footer strip ---- */
.strip {
  max-width: 760px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px 24px;
  background: #16202e;
  border-radius: 14px;
}

.strip strong { display: block; color: #fff; font-size: 1rem; }
.strip span { font-size: .85rem; color: #9aaac3; }
.strip .row { margin-left: auto; }
.strip input { min-width: 240px; border-color: #2b394f; background: #1e2a3b; color: #fff; }
.strip input::placeholder { color: #6d7e99; }
.strip .err, .strip .done { flex-basis: 100%; margin-top: 0; }

@media (max-width: 560px) {
  .inline .row { flex-direction: column; }
  .inline button { width: 100%; }
  .strip .row { margin-left: 0; width: 100%; }
  .strip input { min-width: 0; flex: 1; }
}

const valid = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim());

document.querySelectorAll(".news").forEach((form) => {
  const input = form.querySelector('input[type="email"]');
  const err = form.querySelector(".err");
  const done = form.querySelector(".done");
  const btn = form.querySelector("button");

  input.addEventListener("input", () => {
    if (input.getAttribute("aria-invalid") === "true" && valid(input.value)) {
      input.setAttribute("aria-invalid", "false");
      err.hidden = true;
    }
  });

  form.addEventListener("submit", async (e) => {
    e.preventDefault();

    if (!valid(input.value)) {
      input.setAttribute("aria-invalid", "true");
      err.hidden = false;
      input.focus();
      return;
    }

    input.setAttribute("aria-invalid", "false");
    err.hidden = true;
    btn.disabled = true;
    btn.textContent = "…";

    try {
      // replace with your list provider's endpoint
      await new Promise((r) => setTimeout(r, 600));
      form.querySelector(".row, input").closest("form")
        .querySelectorAll("input, button").forEach((el) => (el.disabled = true));
      done.hidden = false;
    } finally {
      btn.textContent = "Subscribe";
    }
  });
});