> ## Documentation Index
> Fetch the complete documentation index at: https://docs.site.nu/llms.txt
> Use this file to discover all available pages before exploring further.

# Forms embedden

> Plaats Site.nu Forms op je website met de iframe-embed, events of de headless React-renderer.

Embed een Form om bezoekers direct Records te laten aanmaken in Site.nu.

Je website-host moet eerst geverifieerd zijn. Anders blokkeert Site.nu publieke verzoeken vanaf die host.

## Overzicht

Een Form moet **Live** zijn voordat hij publiek laadt. Een draft of gearchiveerd formulier weigert publieke verzoeken.

Voeg eerst de exacte website-host toe onder **Settings > Domains**.

`example.com` en `www.example.com` zijn verschillende origins en moeten apart geverifieerd worden.

## Iframe embed

Plaats deze twee regels op de pagina waar het formulier moet verschijnen:

```html theme={null}
<div data-sitenu-form="your-workspace/form-id"></div>
<script async src="https://app.site.nu/embed.js"></script>
```

De waarde van `data-sitenu-form` is `<workspace-slug>/<form-id>`.

Het script zoekt alle elementen met `data-sitenu-form` en plaatst er een iframe in.

Optionele attributen:

| Attribuut            | Gebruik                         |
| -------------------- | ------------------------------- |
| `data-theme`         | `light` of `dark`.              |
| `data-primary-color` | Hoofdkleur als hex, rgb of hsl. |

## Events op de hostpagina

De embed stuurt DOM-events op de container. Gebruik die voor analytics of conversiemeting.

```html theme={null}
<div id="signup-form" data-sitenu-form="acme/abc-123"></div>
<script>
  document.getElementById("signup-form").addEventListener("sitenuFormSubmitSuccess", (event) => {
    gtag("event", "lead_submitted", { id: event.detail.submissionId });
  });
</script>
```

Beschikbare events:

| Event                     | Detail                                    |
| ------------------------- | ----------------------------------------- |
| `sitenuFormLoaded`        | `{ formId, name }`                        |
| `sitenuFormSubmitSuccess` | `{ submissionId, recordId, redirectUrl }` |
| `sitenuFormSubmitError`   | `{ reason, message }`                     |

`reason` kan `validation`, `captcha`, `rate_limit`, `origin` of `server` zijn.

## Native React-renderer

Gebruik `@site-nu/forms-react` als je het formulier met eigen markup wilt renderen in een React-app.

De hook `useSitenuPublicForm` haalt de formulierdefinitie op, beheert values en errors, ondersteunt uploads en voert `submit()` uit.

Je rendert zelf controls voor de field types die je gebruikt.

Ook bij native rendering moet de website-origin geverifieerd zijn onder Domains.

## Domains en Turnstile

Geverifieerde website-hosts bepalen waar Forms mogen laden. Voor native publieke Forms regelt Site.nu Turnstile-bescherming op geverifieerde hosts.

Zie je in Network een `200`, maar faalt het verzoek toch? Dan blokkeert de browser waarschijnlijk de response.

Voeg de exacte host toe onder **Settings > Domains** en verifieer hem.

## FAQ

<AccordionGroup>
  <Accordion title="Waarom laadt mijn Form niet?">
    Controleer of het Form **Live** is en of de exacte website-host geverifieerd is.
  </Accordion>

  <Accordion title="Kan ik inzendingen naar mijn eigen analytics sturen?">
    Ja. Luister naar `sitenuFormSubmitSuccess` op de embed-container.
  </Accordion>

  <Accordion title="Kan ik zonder iframe renderen?">
    Ja. Gebruik de headless React-renderer als je eigen markup en styling nodig hebt.
  </Accordion>
</AccordionGroup>