Contact Form

A contact form is the most common use case for Formtorch. This recipe walks through a complete implementation: basic HTML form, React with inline feedback, and a Next.js server action.

HTML

Create a form in the dashboard

Sign in to app.formtorch.com , create a project, then create a form. Copy the endpoint URL. It will look something like https://formtorch.com/f/YOUR_FORM_ID.

Add the form to your page

contact.html


<form action="https://formtorch.com/f/YOUR_FORM_ID" method="POST">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" required />
 
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required />
 
  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>
 
  <!-- Honeypot: hidden from real users, traps bots -->
  <input
    name="_honeypot"
    type="text"
    style="display:none"
    tabindex="-1"
    autocomplete="off"
  />
 
  <!-- Redirect after submission -->
  <input
    name="_redirect"
    type="hidden"
    value="https://yoursite.com/thank-you"
  />
 
  <button type="submit">Send message</button>
</form>

Create the thank-you page

thank-you.html


<h1>Message sent</h1>
<p>Thanks for reaching out. We'll reply within one business day.</p>
<a href="/">Back to home</a>

React

Create a form in the dashboard

Build the component

components/ContactForm.tsx


"use client";
 
import { useState } from "react";
 
type Status = "idle" | "loading" | "success" | "error";
 
export function ContactForm() {
  const [status, setStatus] = useState<Status>("idle");
  const [errorMessage, setErrorMessage] = useState("");
 
  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("loading");
    setErrorMessage("");
 
    try {
      const res = await fetch("https://formtorch.com/f/YOUR_FORM_ID", {
        method: "POST",
        headers: { "X-Requested-With": "XMLHttpRequest" },
        body: new FormData(e.currentTarget),
      });
 
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error(data.message ?? "Submission failed");
      }
 
      setStatus("success");
    } catch (err) {
      setStatus("error");
      setErrorMessage(
        err instanceof Error ? err.message : "Something went wrong"
      );
    }
  }
 
  if (status === "success") {
    return (
      <div>
        <h2>Message sent</h2>
        <p>Thanks for reaching out. We'll reply within one business day.</p>
      </div>
    );
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Name</label>
        <input id="name" name="name" type="text" required />
      </div>
 
      <div>
        <label htmlFor="email">Email</label>
        <input id="email" name="email" type="email" required />
      </div>
 
      <div>
        <label htmlFor="message">Message</label>
        <textarea id="message" name="message" rows={5} required />
      </div>
 
      {/* Honeypot */}
      <input
        name="_honeypot"
        type="text"
        style={{ display: "none" }}
        tabIndex={-1}
        autoComplete="off"
      />
 
      {status === "error" && (
        <p role="alert">
          {errorMessage || "Something went wrong. Please try again."}
        </p>
      )}
 
      <button type="submit" disabled={status === "loading"}>
        {status === "loading" ? "Sending…" : "Send message"}
      </button>
    </form>
  );
}

Next.js

Create a form in the dashboard

Create a server action

app/contact/actions.ts


"use server";
 
import { redirect } from "next/navigation";
 
export async function submitContact(formData: FormData) {
  const name = formData.get("name");
  const email = formData.get("email");
  const message = formData.get("message");
 
  if (!name || !email || !message) {
    throw new Error("All fields are required");
  }
 
  const res = await fetch("https://formtorch.com/f/YOUR_FORM_ID", {
    method: "POST",
    body: formData,
  });
 
  if (!res.ok) {
    throw new Error("Submission failed");
  }
 
  redirect("/contact/thank-you");
}

Create the form page

app/contact/page.tsx


import { submitContact } from "./actions";
import { SubmitButton } from "./submit-button";
 
export default function ContactPage() {
  return (
    <main>
      <h1>Contact</h1>
      <form action={submitContact}>
        <div>
          <label htmlFor="name">Name</label>
          <input id="name" name="name" type="text" required />
        </div>
 
        <div>
          <label htmlFor="email">Email</label>
          <input id="email" name="email" type="email" required />
        </div>
 
        <div>
          <label htmlFor="message">Message</label>
          <textarea id="message" name="message" rows={5} required />
        </div>
 
        <SubmitButton />
      </form>
    </main>
  );
}

Add the submit button with pending state

app/contact/submit-button.tsx


"use client";
 
import { useFormStatus } from "react-dom";
 
export function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Sending…" : "Send message"}
    </button>
  );
}

Add the thank-you page

app/contact/thank-you/page.tsx


export default function ThankYouPage() {
  return (
    <main>
      <h1>Message sent</h1>
      <p>Thanks for reaching out. We'll reply within one business day.</p>
    </main>
  );
}

Enabling email notifications

To receive an email for every submission, go to Form Settings → Notifications in the dashboard and add your email address. See Email Notifications for details.

Spam protection

The honeypot field (_honeypot) catches simple bots. Formtorch also runs TorchWarden on every submission: a scoring-based spam filter that checks IP reputation, submission velocity, and field patterns. Spam submissions are stored but flagged; they never trigger email notifications.

You can view spam submissions in the dashboard and mark false positives as legitimate if needed.