Add a Contact Form to Your Next.js Site

You don’t need an API route or server action to handle contact form submissions in Next.js. staticq gives you an endpoint that accepts form data directly — no backend code on your side.

Code example

Create a component at app/contact/page.tsx:

export default function ContactPage() {
  return (
    <main>
      <h1>Contact Us</h1>

      <form action="https://api.staticq.app/q/your-form-slug" method="POST">
        <label htmlFor="name">Name</label>
        <input type="text" id="name" name="name" required />

        <label htmlFor="email">Email</label>
        <input type="email" id="email" name="email" required />

        <label htmlFor="message">Message</label>
        <textarea id="message" name="message" required></textarea>

        <button type="submit">Send Message</button>
      </form>
    </main>
  );
}

This works as a server component (the default in App Router). No "use client" directive needed — the form submits via standard browser POST.

Setup steps

1. Create a form in the staticq dashboard. Name it and set your notification email.
2. Copy the endpoint — it looks like https://api.staticq.app/q/your-form-slug.
3. Set the form action to your endpoint URL in your component.
4. Run and test. Start your dev server with npm run dev, submit the form, and confirm the submission appears in your dashboard.

Get started

staticq is free to start with — no credit card required. Create your first form and have submissions flowing in minutes. See pricing for plan details.