Contact form for Next.js

Next.js contact form with no API route

No need for an API route or a server action: the client component posts straight to Formpit. If you prefer server-side, call the same endpoint from a server action.

Create a free form Docs

How to set it up

Create a form in Formpit and copy the endpoint URL.
Use the client component below (App Router or Pages Router).
Deploy to Vercel and send a test submission.

app/contact-form.jsx

"use client";
import { useState } from "react";
export default function ContactForm() {
  const [sent, setSent] = useState(false);
  async function onSubmit(e) {
    e.preventDefault();
    const r = await fetch("https://formpit.com/f/YOUR_FORM_ID", { method: "POST", headers: { Accept: "application/json" }, body: new FormData(e.currentTarget) });
    if (r.ok) setSent(true);
  }
  return sent ? <p>Thanks!</p> : (
    <form onSubmit={onSubmit}>
      <input name="email" type="email" required />
      <textarea name="message" required />
      <input name="_gotcha" style={{ display: "none" }} tabIndex={-1} autoComplete="off" />
      <button>Send</button>
    </form>
  );
}

Replace YOUR_FORM_ID with the endpoint from your form's Setup tab.

What you get

Every submission emailed to you and stored forever in an inbox with New / Replied / Closed statuses.
Reply from the inbox, add tags and notes, search, export CSV or JSON.
Spam filtering with a honeypot, rate limiting and content checks; hCaptcha, reCAPTCHA or Turnstile if you want it.
500 submissions a month free. Pro adds file uploads, Google Sheets, Notion, Slack, webhooks and reminders.

Other platforms

Lovable · Bolt · v0 · WordPress · Shopify · Wix · Squarespace · Framer · Webflow · Carrd · Plain HTML · React · Astro · Hugo, Jekyll & Eleventy · Vue & Nuxt · Svelte & SvelteKit