Does this work with `output: 'export'` (static export)?

Yes, but Server Actions need a server. On a static export, use the client-fetch / AJAX variant instead — it POSTs straight to FormLoom from the browser.

Is the access key safe to commit?

Yes. The FormLoom form id IS the public access key, designed to be committed client-side. There's no secret to leak.

How do I show a success message?

Wrap the action in `useActionState` and render based on the returned `{ success, message }` JSON FormLoom sends back.

Next.js contact form

Verified against Next.js 15.5 · June 2026

Next.js Server Actions are eating the high-intent contact-form segment, and that's fine — you should use them. The thing Server Actions don't give you is a place to store submissions, a spam score, a dashboard, file handling, and deliverable transactional email. FormLoom slots in behind your action: your action POSTs the form data to FormLoom, FormLoom does the boring durable parts, and you keep your typed, progressive-enhancement-friendly form.

Customize in the generator Full Next.js guide

The code

Define an inline `"use server"` action that forwards the FormData to your FormLoom endpoint. No client JS required — it works with JavaScript disabled and progressively enhances. For richer UIs, pair it with `useActionState` for pending/error states.

Server Action (recommended)

app/contact/page.tsx

// app/contact/page.tsx — Next.js 15 App Router, Server Action
export default function ContactPage() {
  async function submit(formData: FormData) {
    "use server";
    const res = await fetch("https://formloom.vercel.app/api/submit/YOUR_ACCESS_KEY", {
      method: "POST",
      headers: { "Content-Type": "application/json", Accept: "application/json" },
      body: JSON.stringify(Object.fromEntries(formData)),
    });
    // FormLoom scores spam, stores the row, and emails you — no backend to wire.
    return res.json();
  }

  return (
    <form action={submit}>
      <label>
        Name
        <input type="text" name="name" required />
      </label>
      <label>
        Email
        <input type="email" name="email" required />
      </label>
      <label>
        Message
        <textarea name="message" required placeholder="How can we help?"></textarea>
      </label>
      <!-- honeypot: bots fill this, humans don't see it -->
      <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />
      <button type="submit">Send</button>
    </form>
  );
}

React component (client)

ContactForm.tsx

// ContactForm.tsx — React (works in Vite, CRA, Next 'use client')
"use client";
import { useState } from "react";

export function ContactForm() {
  const [status, setStatus] = useState<"idle" | "ok" | "error">("idle");

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = e.currentTarget;
    const res = await fetch("https://formloom.vercel.app/api/submit/YOUR_ACCESS_KEY", {
      method: "POST",
      headers: { "Content-Type": "application/json", Accept: "application/json" },
      body: JSON.stringify(Object.fromEntries(new FormData(form))),
    });
    setStatus((await res.json()).success ? "ok" : "error");
    if (status !== "error") form.reset();
  }

  if (status === "ok") return <p>Thanks — we got your message.</p>;
  return (
    <form onSubmit={onSubmit}>
      <label>
        Name
        <input type="text" name="name" required />
      </label>
      <label>
        Email
        <input type="email" name="email" required />
      </label>
      <label>
        Message
        <textarea name="message" required placeholder="How can we help?"></textarea>
      </label>
      <!-- honeypot: bots fill this, humans don't see it -->
      <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />
      <button type="submit">Send</button>
    </form>
  );
}

@formloom/client (typed SDK)

submit.ts

// npm i @formloom/client
import { createForm } from "@formloom/client";

type Contact = {
  name: string;
  email: string;
  message: string;
};

const form = createForm<Contact>("YOUR_ACCESS_KEY");

// End-to-end typed: TS errors if you send the wrong shape.
const { success, message } = await form.submit({
  name: form.name.value,
  email: form.email.value,
  message: form.message.value,
});

Gotchas

Server Actions run on the server, so the fetch to FormLoom won't be blocked by CORS — but set `Accept: application/json` so FormLoom returns JSON instead of a redirect.
If you render the form in a Client Component, you can still pass a Server Action via props; the action stays on the server.
Don't put your FormLoom access key in `NEXT_PUBLIC_*` env if you only call from the server — but it's safe to expose anyway (the form id IS the public key).
For file uploads, send `multipart/form-data` (pass the raw FormData) rather than JSON-stringifying it.

Form types for Next.js

Tailored field sets and code for common use cases.

Next.js contact form Next.js newsletter form Next.js waitlist form Next.js feedback form Next.js support ticket form Next.js lead capture form Next.js rsvp form Next.js job application form Next.js survey form Next.js bug report form

FAQ

Prefer a Server Action for contact forms — it works without JS and keeps the request server-side. Use a client fetch when you need optimistic UI or you're on a static export.