Guides · Code

A Next.js contact form with no API route

Post the form straight to your endpoint, from a Server Component with no JavaScript or a Client Component with fetch. No route handler, no email service.

  • 5 minutes
  • No API route
  • Free for 250 messages a month
Create your inboxJump to the steps

Updated

Step 1 of 40%

Make this guide yours

Type your email and we create your inbox, then put its endpoint in every step. No password, no card.

The usual Next.js contact form has three parts: the form, a route handler or Server Action, and an email service with its API key. You only need the first. The form posts straight to your InboxPanda endpoint, which keeps the message, sets spam aside and emails you.

Get your endpoint by typing your email on the home page and pressing Create your inbox: no password, no card. Open the link we email you to claim the inbox. You can also create it from your terminal:

Terminal
npx inboxpanda init --email you@company.com --framework nextjs
  1. 1

    Option 1: a Server Component, no JavaScript

    A plain form works in the App Router as it is. It sends before your JavaScript loads, and with JavaScript switched off.

    TSX
    // app/contact/page.tsx
export default function Contact() {
  return (
    <form action="https://inboxpanda.io/f/your-form-id" method="POST">
      <label>Name <input name="name" autoComplete="name" required /></label>
      <label>Email <input name="email" type="email" autoComplete="email" required /></label>
      <label>Message <textarea name="message" required /></label>
      <input name="_honey" style={{ display: "none" }} tabIndex={-1} autoComplete="off" />
      <input type="hidden" name="_redirect" value="https://yoursite.com/contact/thanks" />
      <button>Send</button>
    </form>
  )
}

    After sending, the visitor lands on /contact/thanks. Make that a page of your own. The _redirect page has to be on the same site as the form; leave it out and visitors see a thank-you page instead.

  2. 2

    Option 2: a Client Component, no page load

    To show "Thanks" in place, send with fetch and ask for JSON:

    TSX
    // app/contact/contact-form.tsx
"use client"
import { useState } from "react"

export function ContactForm() {
  const [status, setStatus] = useState<"idle" | "sending" | "sent" | "error">("idle")
  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    setStatus("sending")
    const res = await fetch("https://inboxpanda.io/f/your-form-id", {
      method: "POST",
      headers: { "Content-Type": "application/json", Accept: "application/json" },
      body: JSON.stringify(Object.fromEntries(new FormData(e.currentTarget))),
    })
    setStatus(res.ok ? "sent" : "error")
  }
  if (status === "sent") return <p>Thanks. We'll get back to you soon.</p>
  return (
    <form onSubmit={onSubmit}>
      <label>Name <input name="name" autoComplete="name" required /></label>
      <label>Email <input name="email" type="email" autoComplete="email" required /></label>
      <label>Message <textarea name="message" required /></label>
      <input name="_honey" style={{ display: "none" }} tabIndex={-1} autoComplete="off" />
      <button disabled={status === "sending"}>Send</button>
      {status === "error" && <p>Something went wrong. Please try again.</p>}
    </form>
  )
}

    Then render <ContactForm /> from any page. The endpoint accepts posts from any origin, so there's nothing to add to next.config.

  3. 3

    Which one?

    The Server Component if your form is a contact page: it's less code and works everywhere. The Client Component when the form sits in a modal, a footer or a page you don't want to leave.

    Both work on Vercel, Netlify, a static export (output: "export") or your own server, since the browser does the sending.

  4. 4

    Check it works

    Run next dev, open the page and send the form from a different email address than your own. It shows up in your inbox within a few seconds, and you get an email about it. If it lands in Spam, press Not spam: a message that only says "test" can look like spam.

Questions

Can I post from a Server Action instead?

Yes, the endpoint takes a POST from a server too, with the same fields. You'd only need it to do something first, like saving the message to your own database. For sending alone, the browser posting directly is less code.

Should the endpoint go in an environment variable?

Only if it differs between environments, like a test inbox for previews. It isn't a secret: it can only receive messages.

What do I get in the email?

The message's fields, under Panda's summary: its label, like Sales lead or Support, whether it's urgent, and two or three sentences on what the sender wants. Spam is kept out of your email.

Is it free?

Yes, for 250 messages a month, with no card. Spam doesn't count toward that.

Keep going

All guides