Next.js contact form without a backend

Next.js sites can use FormDrop from a client component — no API route, no server action, no email SDK.

Client component

"use client";
import { useState } from "react";

export default function ContactForm() {
  const [status, setStatus] = useState("idle");
  async function onSubmit(e) {
    e.preventDefault();
    setStatus("sending");
    const body = Object.fromEntries(new FormData(e.currentTarget));
    const res = await fetch("https://forms.elimbi.com/submit", {
      method: "POST",
      headers: { "Content-Type": "application/json", Accept: "application/json" },
      body: JSON.stringify({ ...body, access_key: "YOUR-ACCESS-KEY" }),
    });
    const data = await res.json();
    setStatus(data.success ? "sent" : "error");
  }
  if (status === "sent") return <p>Thanks! I'll get back to you soon.</p>;
  return (
    <form onSubmit={onSubmit}>
      <input name="name" required placeholder="Name" />
      <input name="email" type="email" required placeholder="Email" />
      <textarea name="message" required placeholder="Message" />
      <input type="checkbox" name="botcheck" style={{ display: "none" }} tabIndex={-1} />
      <button disabled={status === "sending"}>Send</button>
      {status === "error" && <p>Something went wrong. Please try again.</p>}
    </form>
  );
}

Drop it into app/contact/page.tsx. Because the request goes from the browser to FormDrop, it also works with output: "export" static builds.

Supported fields

• access_key — your key (required).
• email — if present, FormDrop sets it as Reply-To so you can answer directly.
• subject — optional email subject.
• redirect — optional thank-you page URL for plain HTML posts.
• botcheck — hidden honeypot; if a bot fills it, the submission is silently dropped.

Every other field is included in the email and saved in your dashboard log. Send Accept: application/json to get a JSON reply instead of a redirect.

Test it

1. Create a free access key with your email.
2. Paste the key, deploy, submit a test message.
3. Check your inbox and the dashboard log. If mail is delayed, the submission is still stored in the log.

FAQ

Related guides