# Astro

MuxForms on Astro is embed.js in src/layouts or a small client:load island that calls window.MuxForms.mount after navigation. Allow your production Astro origin (Cloudflare, Netlify, or Vercel URL).

## Astro

| Piece | Location |
| --- | --- |
| Script | Base layout <head> or before </body> |
| Mount target | Page or Contact.astro |
| Client nav | mount() in island if needed |
| Allowlist | Deployed site origin |

## Contact.astro

```
---
// src/pages/contact.astro
import Base from "../layouts/Base.astro";
---
<Base title="Contact">
  <h1>Contact</h1>
  <div data-form-id="FORM_UUID"></div>
</Base>
```

## Base layout script

```
<!-- src/layouts/Base.astro (excerpt) -->
<body>
  <slot />
  <script src="https://www.muxforms.com/embed.js" defer></script>
</body>
```

## FAQ

### SSR vs static?

Embed works in both; allowlist uses the public URL.

### View Transitions?

Call MuxForms.mount on the new contact page container after transition.

### React integration?

Use @muxforms/react inside a client:load React island.

### Secret in Astro?

Use Astro server endpoints to POST with ingest secret for custom HTML forms.

---

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