FormDoc
Sign in Create your form

Next.js form to email

With output: "export" a Next.js site has no server, so API routes and server actions aren’t available. FormDoc receives the form instead and emails each submission to you. It also works on server-rendered Next.js sites if you’d rather not build and maintain a form endpoint.

Option 1: a plain form

The simplest version needs no JavaScript at all. Replace the key with yours from app.formdoc.dev/new:

export default function ContactForm() {
  return (
    <form action="https://api.formdoc.dev/v1/submit" method="POST">
      <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
      <label htmlFor="name">Name</label>
      <input type="text" id="name" name="name" required />
      <label htmlFor="email">Email</label>
      <input type="email" id="email" name="email" required />
      <label htmlFor="message">Message</label>
      <textarea id="message" name="message" required />
      <input type="checkbox" name="botcheck" style={{ display: "none" }} tabIndex={-1} autoComplete="off" />
      <button type="submit">Send</button>
    </form>
  );
}

After sending, visitors see FormDoc’s hosted thank-you page, or your own page if you add a hidden redirect field.

Option 2: fetch, with an inline message

Stay on the page and show the result yourself:

"use client";
import { useState } from "react";

export default function ContactForm() {
  const [status, setStatus] = useState("");

  async function onSubmit(event) {
    event.preventDefault();
    const form = event.currentTarget; // React clears currentTarget after an await
    setStatus("Sending…");
    const res = await fetch("https://api.formdoc.dev/v1/submit", {
      method: "POST",
      headers: { Accept: "application/json" },
      body: new FormData(form),
    });
    const result = await res.json();
    setStatus(result.success ? "Thanks, message sent." : result.error.message);
    if (result.success) form.reset();
  }

  return (
    <form onSubmit={onSubmit}>
      <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
      <input type="text" name="name" required />
      <input type="email" name="email" required />
      <textarea name="message" required />
      <input type="checkbox" name="botcheck" style={{ display: "none" }} tabIndex={-1} autoComplete="off" />
      <button type="submit">Send</button>
      <p role="status">{status}</p>
    </form>
  );
}

Next