Mailchimp signup

Newsletter signup styled for a Mailchimp audience.

Why these fields

First name: First name captures a short, searchable answer but remains optional.
Email: Email provides a validated reply address and is required to complete the request.
I agree to receive marketing emails: I agree to receive marketing emails records a clear acknowledgement or preference and is required to complete the request.

Fields

First nametextEmailemailrequiredI agree to receive marketing emailscheckboxrequired

Preview

Code

import { useState } from "react";

export function MailchimpSignupForm() {
  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 /> I agree to receive marketing emails
      </label>
      <input
        type="text"
        name="_gotcha"
        tabIndex={-1}
        autoComplete="off"
        style={{ position: "absolute", left: "-9999px" }}
        aria-hidden="true"
      />
      <button type="submit">Send</button>
    </form>
  );
}

Customize before publishing

Remove fields you do not need and mark only essential answers as required.
Replace placeholder wording with terms your audience already understands.
Add your privacy notice, retention details and expected response time.
Test keyboard focus, validation errors and the confirmation state on mobile.

Use this with Formward

Create a form, copy your endpoint, and replace https://forms.formward.eu/f/your-form-id in the code above.

Get started free →