FRAMEWORK

Handle form submissions in Next.js

Formstork is the backend that receives your Next.js form's POST. Send your fields to the endpoint with your access key, and Formstork emails you each submission, sets the visitor's email as reply-to, and saves it to a searchable dashboard, no API route or database required.

How it works

When someone submits your Next.js form, the fields are sent as an HTTP POST to the Formstork endpoint with your access key. It works the same whether you use a plain form action, a client component with fetch, or a Server Action, because it is just an HTTP request. Formstork validates and stores the submission, emails it to you with the visitor's address set as reply-to, and lists it in a searchable, taggable dashboard. You never write a Route Handler, connect an SMTP server, or run a database to collect responses. From there you can route submissions to Slack, Notion, Google Sheets, or a signed webhook, all configured in the dashboard.

tsx

"use client";

import { useState, type FormEvent } from "react";

export default function ContactForm() {
  const [status, setStatus] = useState("idle");

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setStatus("sending");
    const res = await fetch("https://api.formstork.com/submit", {
      method: "POST",
      body: new FormData(event.currentTarget),
    });
    setStatus(res.ok ? "sent" : "error");
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
      <input type="email" name="email" required />
      <textarea name="message" required />
      <button disabled={status === "sending"}>Send</button>
    </form>
  );
}

No API route or database to build

Handling form submissions in Next.js normally means writing a Route Handler or Server Action, wiring up an email service, and storing rows somewhere. Formstork is that backend, so you point your form at one endpoint and skip all of it.

Works with every Next.js pattern

Because a submission is just an HTTP POST, it behaves the same in the App Router or Pages Router, from a client component with fetch, a Server Action, or a static export. There is an @formstork/react package too, but a plain fetch call is all you need.

Spam filtering and integrations included

Every form gets a honeypot and a server-side content filter, with optional Turnstile, hCaptcha, or reCAPTCHA. Each submission can also route to Slack, Discord, Telegram, Notion, Airtable, Mailchimp, Google Sheets, or a signed webhook.

Set it up

1In the Formstork dashboard, create a form and copy its access key.
2Add a form to your Next.js page with a hidden input named access_key set to that key.
3POST the form fields to https://api.formstork.com/submit, using fetch in a client component or the form's action attribute.
4Submit the form once to test. Each submission now arrives by email and in your dashboard.

Frequently asked questions

How do I handle form submissions in Next.js?

Point your Next.js form at the Formstork endpoint. Add a hidden access_key field and POST the fields to https://api.formstork.com/submit, either with fetch in a client component or through the form's action attribute. Formstork emails you each submission and stores it in your dashboard, so you do not need your own API route.

Do I need an API route or Server Action?

No. Formstork is the backend that receives the POST, so a plain client-side fetch or an HTML form action is enough. If you prefer a Server Action, you can call the same endpoint from the server, but it is optional.

Is it free to start?

Yes. The free plan includes 250 submissions a month with the full dashboard, email delivery, spam filtering, integrations, and CSV and JSON export, with no credit card. Paid plans add more volume, forever retention, autoresponders, and file uploads.

Try Formstork free

250 submissions a month with a full dashboard. No credit card required.

Get your access key Read the docs