# Vercel

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.

## 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");
}
```

## FAQ

### 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.

---

HTML version: https://www.muxforms.com/docs/vercel
Source: MuxForms (https://www.muxforms.com)