How to add a backend to a Next.js contact form

Connect a Next.js form without creating an unnecessary API route.

§ 01 · Context Why it still needs a backend.

In many Next.js sites, a form does not need an API route, server action, database table, or email service setup. If the form just needs to collect leads, POST it directly to Formserve and keep your app focused on the page experience.

The form POSTs to an endpoint URL, the submission is stored, and notifications are sent according to the endpoint settings. It's a safer, more maintainable replacement for fragile mailto: patterns or one-off scripts that break the first time your host changes.

§ 02 · Why More than just an email alert.

When the backend stores every submission first and notifies second, you get three things a raw SMTP relay can't give you:

And because the submission is stored, delivery failures stay visible instead of disappearing into email logs. If a notification bounces, you can see it, retry it, and still have the lead.

§ 03 · Setup How to connect it.

None of these steps involve writing server code. First, make sure you have the essentials in place:

§ 04 · Example Keep the form simple.

There's nothing special about the markup. The only required change is the action attribute. The hidden _honeypot input is the one spam-prevention field worth adding by hand:

"use client";

export function ContactForm() {
  async function submit(event) {
    event.preventDefault();
    const res = await fetch("https://formserve.io/f/YOUR_ENDPOINT_KEY", {
      method: "POST",
      body: new FormData(event.currentTarget)
    });
    if (!res.ok) throw new Error("Submission failed");
  }

  return (
    <form onSubmit={submit}>
      <input name="_honeypot" tabIndex="-1" autoComplete="off" className="hidden" />
      <input name="email" type="email" required />
      <textarea name="message" required />
      <button>Send</button>
    </form>
  );
}

§ 05 · FAQ Common questions.