Newsletter Signup

A newsletter signup form collects just an email address. Keep it minimal: one field, one button, instant confirmation.

HTML

newsletter.html


<form action="https://formtorch.com/f/YOUR_FORM_ID" method="POST">
  <input name="email" type="email" placeholder="you@example.com" required />
 
  <!-- Honeypot -->
  <input
    name="_honeypot"
    type="text"
    style="display:none"
    tabindex="-1"
    autocomplete="off"
  />
 
  <input
    name="_redirect"
    type="hidden"
    value="https://yoursite.com/subscribed"
  />
 
  <button type="submit">Subscribe</button>
</form>

React

Build the component

components/NewsletterForm.tsx


"use client";
 
import { useState } from "react";
 
export function NewsletterForm() {
  const [status, setStatus] = useState<
    "idle" | "loading" | "success" | "error"
  >("idle");
 
  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("loading");
 
    const res = await fetch("https://formtorch.com/f/YOUR_FORM_ID", {
      method: "POST",
      headers: { "X-Requested-With": "XMLHttpRequest" },
      body: new FormData(e.currentTarget),
    });
 
    setStatus(res.ok ? "success" : "error");
  }
 
  if (status === "success") {
    return <p>You're subscribed. Check your inbox for a confirmation.</p>;
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <input name="email" type="email" placeholder="you@example.com" required />
 
      {/* Honeypot */}
      <input
        name="_honeypot"
        type="text"
        style={{ display: "none" }}
        tabIndex={-1}
        autoComplete="off"
      />
 
      {status === "error" && (
        <p role="alert">Something went wrong. Please try again.</p>
      )}
 
      <button type="submit" disabled={status === "loading"}>
        {status === "loading" ? "Subscribing…" : "Subscribe"}
      </button>
    </form>
  );
}

Next.js

app/newsletter/page.tsx


import { redirect } from "next/navigation";
 
async function subscribe(formData: FormData) {
  "use server";
 
  const res = await fetch("https://formtorch.com/f/YOUR_FORM_ID", {
    method: "POST",
    body: formData,
  });
 
  if (!res.ok) throw new Error("Subscription failed");
 
  redirect("/subscribed");
}
 
export default function NewsletterPage() {
  return (
    <form action={subscribe}>
      <input name="email" type="email" placeholder="you@example.com" required />
      <button type="submit">Subscribe</button>
    </form>
  );
}

Tagging subscribers by source

Add a hidden source field to track where signups come from:


<input name="source" type="hidden" value="homepage-footer" />

That field will appear in the dashboard and in any webhook payloads you receive.

Double opt-in

Formtorch stores the submission immediately. If you need double opt-in (sending a confirmation email before adding to your list), connect a webhook to your email platform and trigger the confirmation flow there.

Newsletter signups are low-risk for spam but high-value targets for fake addresses. The honeypot field filters most bot traffic. For higher confidence, enable TorchWarden in Form Settings.