Newsletter signup form for a static site

1Create a FormSMTP project

Sign up free and add a project. Pick your email provider so the SMTP host and port fill in, enter your login, and click Test connection. Not sure which provider? Your existing mailbox works: see the Gmail or Zoho guides.

2Lock the project to your site

In Settings → Security, set Allowed websites to https://yoursite.com and Allowed recipients to your own address. Now the key in your page can only email you, only from your site, and only up to your hourly limit.

3Add the signup form

<form id="signup">
  <input name="email" type="email" placeholder="you@example.com" required>
  <button>Join the newsletter</button>
  <p id="signup-status" role="status"></p>
</form>

<script>
  const form = document.getElementById("signup");
  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    const res = await fetch("https://app.formsmtp.com/api/v1/contacts", {
      method: "POST",
      headers: { Authorization: "Bearer YOUR_API_KEY", "Content-Type": "application/json" },
      body: JSON.stringify({ email: form.email.value, tags: ["newsletter"] }),
    });
    const data = await res.json();
    document.getElementById("signup-status").textContent =
      data.success ? "You're on the list. Thanks!" : data.error;
  });
</script>

Each signup appears under Contacts, tagged newsletter. Signing up twice just updates the contact.

4Email your list

Design an email in Templates, then create an email in Emails: pick the template, choose the newsletter tag, and send now, schedule it, or repeat it weekly or monthly. Every copy is personalised with {{first_name}} and includes a working unsubscribe link and List-Unsubscribe headers.

Only email people who signed up, and use an SMTP account meant for bulk email (SES, Brevo, Mailgun…) once your list grows past a few hundred.

FAQ

More guides

• Send email from a static website
• HTML contact form that emails you
• GitHub Pages contact form
• Next.js contact form