# Gatsby

MuxForms on Gatsby adds embed.js in gatsby-ssr or the page component via react-helmet or a Script in the contact template, plus data-form-id on src/pages/contact.js. Allow your Gatsby Cloud or Netlify URL.

## Gatsby

| Hook | Use |
| --- | --- |
| src/pages/contact.js | Form mount div |
| gatsby-browser.js | import script side effect optional |
| Helmet | Script src in head |
| Allowlist | Published site origin |

## src/pages/contact.js

```
import { Helmet } from "react-helmet";

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

## FAQ

### Gatsby Functions?

Optional server proxy; embed avoids them for marketing contact.

### MDX contact page?

Import a React component that renders the div + Helmet script.

### Image CDN domain?

Allowlist is the page origin, not the asset CDN.

### Migrate from getform?

Swap endpoint for MuxForms embed snippet.

---

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