See /docs/nextjs for MuxForm component and Server Action samples.

Environment variables?

Store MUXFORMS_INGEST_SECRET in Vercel env for server-side POST only.

Either runtime can POST JSON to MuxForms submit API.

Same MuxForms workspace; different form ids per project.

MuxForms on Vercel works via embed.js on marketing pages or POST from a Server Action with the ingest secret. Allow https://your-app.vercel.app and production domains on the form for browser embeds.

Docs

Vercel

Vercel excels at shipping frontends—MuxForms keeps form ingest out of your serverless budget unless you want a Server Action proxy.

Vercel patterns

Pattern	Use when
embed.js	Marketing site, no API route
Server Action	Custom UI, secret on server
/docs/nextjs	App Router details
Preview URLs	Add to allowlist for QA

App Router page (embed)

// app/contact/page.tsx
export default function ContactPage() {
  return (
    <main>
      <h1>Contact</h1>
      <div data-form-id="FORM_UUID" />
      <script src="https://www.muxforms.com/embed.js" defer />
    </main>
  );
}

Server Action submit (custom fields)

"use server";

export async function contactAction(data: { email: string; message: string }) {
  const res = await fetch("https://www.muxforms.com/api/v1/forms/FORM_UUID/submit", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${process.env.MUXFORMS_INGEST_SECRET}`,
    },
    body: JSON.stringify({ ...data, _hp: "" }),
  });
  if (!res.ok) throw new Error("Submit failed");
}

Related: Next.js integration.

Common questions

Next.js on Vercel?: See /docs/nextjs for MuxForm component and Server Action samples.
Environment variables?: Store MUXFORMS_INGEST_SECRET in Vercel env for server-side POST only.
Edge vs Node?: Either runtime can POST JSON to MuxForms submit API.
Multiple projects?: Same MuxForms workspace; different form ids per project.

Preview deployments should not break contact.

Allow preview origins once; ship forms with every Vercel project.

Upgrade to Pro