Next.js contact forms without API routes.

Use standard HTML first

For static export, marketing pages, and simple contact flows, a hosted endpoint is simpler than an API route or server action. Put the form in a client or server component and let the browser submit it.

export default function ContactForm() {
  return (
    <form action="https://api.formsfort.com/submit" method="POST">
      <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
      <label htmlFor="email">Email</label>
      <input id="email" type="email" name="email" required />
      <label htmlFor="message">Message</label>
      <textarea id="message" name="message" rows={6} required />
      <input type="checkbox" name="botcheck" style={{ display: "none" }} />
      <button type="submit">Send message</button>
    </form>
  );
}

Production checklist

• Use a public access key only; never expose private API secrets in a Next.js client bundle.
• Add the deployed domain to allowed origins before launch.
• Test the form after deployment, not only in local development.
• Use AJAX only if you need inline success states; the standard POST flow is enough for most forms.

Related Next.js guides

For more detail, see the Next.js contact form guide and the Next.js static export contact form guide.