# Website embed

The MuxForms website embed is a script that reads data-form-id, downloads your form schema, renders fields, validates input, and POSTs submissions to MuxForms. Add one div and embed.js on any HTML page, including WordPress, Next.js client routes, and static hosts.

## Embed requirements

| Step | Action |
| --- | --- |
| 1 | Create a form; copy the UUID |
| 2 | Allow your site origin on the form |
| 3 | Paste div + script tag |
| 4 | Read submissions in the inbox |

## Install

Replace `FORM_UUID` with the id from your dashboard.

```html
<div data-form-id="FORM_UUID"></div>
<script src="https://www.muxforms.com/embed.js"></script>
```

## React, Next.js, and SPAs

`embed.js` watches for new `[data-form-id]` nodes (client-side navigation included). You can also call `window.MuxForms.mount(el)` after your framework renders.

```tsx
import { MuxForm } from "@muxforms/react";

export default function Page() {
  return <MuxForm formId="FORM_UUID" />;
}
```

The `@muxforms/react` package lives under `packages/react` in the MuxForms repo. Load `embed.js` once in your layout or let the component inject it.

## Origins

Add the exact origin (scheme + host, no trailing slash) to limit which sites can load the embed in a browser, for example `https://www.yoursite.com`. Server and curl clients need the per-form ingest secret from Settings.

The embed fetches a short-lived submit token with the schema, sends it on POST, and can show Cloudflare Turnstile when configured on the form.

## Styling

Appearance (colors, radius, fonts, submit label) is stored on the form. The embed applies those tokens without a custom CSS file.

## FAQ

### What URL loads the embed?

https://www.muxforms.com/embed.js — cache-friendly and CORS-enabled for browser use.

### Does the embed work after client-side navigation?

Yes. embed.js observes new [data-form-id] nodes and can be called via window.MuxForms.mount.

### Can I use React?

Use @muxforms/react or mount after render; see the embed docs code sample.

### Why do I need an allowlist?

Browser submissions require your production origin on the form CORS allowlist.

---

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