integrations · framework

A contact form for Next.js, without writing an API route.

You don't need an API route, a mail provider SDK, or SMTP credentials to receive messages from a Next.js site. Point a plain HTML form at your mailcontact endpoint and submissions land in your project's inbox, with a notification in Discord, Slack, or a webhook.

It works the same in the App Router and the Pages Router, in server and client components, and even with static export, because it's just a form action, not a framework plugin.

Join the waitlist Read the docs

the snippet

A working form for Next.js, in one paste.

Point the form at your project's mailcontact endpoint. Submissions land in your project inbox. No server, no API route, no email service to wire up.

app/contact/page.tsx

export default function ContactPage() {
  return (
    <form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
      <input type="text" name="name" placeholder="Your name" required />
      <input type="email" name="email" placeholder="you@email.com" required />
      <textarea name="message" placeholder="What's on your mind?" required />
      <button type="submit">Send</button>
    </form>
  );
}

how it works

Three steps, start to finish.

Create an inbox

One inbox per project. Name it after your app and you get a form endpoint and a project email address immediately.

Paste the form

Drop the component above anywhere in your app: a page, a footer, a modal. Style it however you like; it's your markup.

Get notified

Add a Discord, Slack, email, or webhook channel. Every submission pings you where you already are.

why mailcontact

Built to pair well with Next.js.

No API route to babysit

No /api/contact handler, no nodemailer config, no environment variables leaking into another deploy. Delete a whole category of glue code.

Static export friendly

Because the form posts to an external endpoint, it keeps working with output: 'export' and on any static host, no server functions required.

One inbox per app you ship

Shipping several Next.js projects? Each gets its own inbox and its own address, instead of everything piling into your personal email.

faq

Next.js + mailcontact, answered

Does this work with both the App Router and the Pages Router?

Yes. The snippet is a plain HTML form, so it renders identically from app/ or pages/, in a server component or a client component.

Can I submit with fetch instead of a native form post?

Yes. POST the same fields as FormData (or JSON) to your endpoint from an onSubmit handler to keep visitors on the page. Native posts currently return a JSON response, and a configurable redirect is coming with the launch.

Does it work with next build && output: 'export' (static hosting)?

Yes, that's the point. The form posts to mailcontact's servers, so your Next.js site can be fully static with no API routes or server functions.

How do I show a thank-you message after submitting?

Submit with a few lines of fetch in an onSubmit handler to keep the visitor on the page and show an inline success state. A configurable redirect for native form posts is coming with the launch.

One inbox for every Next.js project you ship.

Forms and a real email address, together, with notifications where you live. Launching soon. Be the first to know.