Formserve
Features Templates Pricing Docs Blog FAQ
Sign in Create endpoint
← All guides

Next.js guide

Next.js contact form powered by Formserve

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

No backend API route Honeypot spam trap Works with any host

Overview

What you are building

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.

Requirements

Before you start

Client component when needed

Use a client component if you want inline success and error state.

Endpoint URL

The Formserve endpoint URL is safe to use in frontend code.

Allowed domain

Add the deployed domain before launch.

Honeypot

Include _honeypot to keep CAPTCHA out of the user experience.

Setup steps

Connect the form

1

Find the form component

Update the existing component instead of creating a separate backend route.

2

Use FormData

Let the browser collect named fields from the form.

3

Submit directly

POST to the Formserve endpoint from the client component.

4

Confirm in production

Deploy and send a real test from the final domain.

Code

Minimal HTML contract

Every framework eventually sends these same fields. If your tool generates a component, ask it to preserve styling and only adjust the submission behavior. 

"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>
  );
}

Testing checklist

  • ✓ Use a client component only if inline state is needed.
  • ✓ Keep validation in the UI.
  • ✓ Add production domain to allowed domains.
  • ✓ Check the Formserve inbox after deploy.

Common mistakes

  • ! Building a custom API route for simple lead capture.
  • ! Putting secret keys in NEXT_PUBLIC variables.
  • ! Forgetting the honeypot field.
  • ! Testing only in preview mode.