# Next.js form to email

> Send Next.js form submissions to email with FormDoc. Works with static export, no API route. Plain form or fetch with a success message.

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](https://app.formdoc.dev/new):

JSX

```jsx
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:

JSX

```jsx
"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

-   Every field and error code: [API reference](https://www.formdoc.dev/docs/api-reference/).