# Insluiten & Popups

Sluit je formulier in op een website of toon het als een popup-overlay.

## Insluiten & Popups

Voeg je formulier in op elke webpagina als inline insluiting of als popup-overlay. Je stelt het in via het Deelpaneel en plakt één codefragment in je site.

<p>
  Beide codefragmenten worden opgebouwd uit de deellink die je hebt geselecteerd, dus ze dragen de vervaldatum, responslimiet, aangepaste
  domein en analyses van die link mee. Maak de link eerst aan — zie <a href="/nl/sharing-publishing/sharing-embedding">deellinks</a>. Op de
  link ingestelde standaardwaarden voor queryparameters zijn de enige uitzondering: ze worden niet toegevoegd aan insluit- of
  popup-codefragmenten.
</p>

<h2 id="embed">Inline insluiting</h2>

<p>
  Een inline insluiting plaatst je formulier direct in een pagina via een iframe. Open het <strong>Deel</strong>-paneel, klik op de{' '}
  <strong>Insluiten</strong>-kaart en kopieer het gegenereerde codefragment naar de HTML van je site.
</p>

<h3 id="embed-layout">Indeling</h3>

<h3 id="embed-display">Weergave</h3>

<p>
  Klik op <strong>Code weergeven</strong> om de gegenereerde HTML te zien. Gebruik <strong>Insluitingscode kopiëren</strong> om het te
  kopiëren, en plak het vervolgens in je site. <strong>Standaardinstellingen herstellen</strong> zet alle instellingen terug.
</p>

<h3 id="embed-snippet">Wat het codefragment bevat</h3>

<p>
  Met automatisch aanpassen uit is het codefragment één enkele iframe die naar je deellink wijst met <code>?embed=1</code> toegevoegd. De
  weergave-opties voegen hun eigen parameters toe: <code>hideCover=1</code>, <code>hideLogo=1</code>, en <code>theme=dark</code> of{' '}
  <code>theme=light</code>.
</p>

```html
<iframe src="https://form.formstep.io/Abc12XYz?embed=1" width="100%" height="600" style="border: none;"></iframe>
```

<p>
  Met automatisch aanpassen aan wordt de iframe verpakt in een <code>div</code> en gevolgd door een script. Het ingesloten formulier
  verstuurt bij elke hoogteverandering een <code>formbase:resize</code>-bericht; het script controleert de herkomst van het bericht en het
  verzendende frame, en stelt dan de iframe-hoogte in. Verder wordt niets op je pagina aangeraakt, en er wordt geen extern script geladen.
</p>

<h2 id="popup">Popup</h2>

<p>
  Een popup toont je formulier als een overlay bovenop je pagina. Open het <strong>Deel</strong>-paneel, klik op de <strong>Popup</strong>{' '}
  -kaart, stel je opties in en plak het gegenereerde codefragment in je site.
</p>

<h3 id="popup-trigger">Trigger</h3>

<p>Kies hoe de popup opent:</p>

<h3 id="popup-layout">Indeling</h3>

<h3 id="popup-display">Weergave</h3>

<h3 id="popup-styling">Popup-stijl</h3>

<h3 id="popup-behavior">Gedrag</h3>

<p>
  Klik op <strong>Code weergeven</strong> om het gegenereerde codefragment te zien. Gebruik <strong>Popupcode kopiëren</strong> om het te
  kopiëren, en plak het vervolgens in je site. <strong>Standaardinstellingen herstellen</strong> zet alle instellingen terug.
</p>

<h3 id="popup-snippet">Wat het codefragment bevat</h3>

<p>
  Het popup-codefragment is één zelfstandig <code>{'<script>'}</code>-blok. Het bouwt de overlay, de sluitknop en de iframe in gewone
  JavaScript op zodra de popup opent — er wordt daarvoor niets aan je pagina toegevoegd, er wordt geen stylesheet ingevoegd en er wordt geen
  extern script geladen. De opmerking onder het script vertelt je welke functienaam je moet aanroepen:
</p>

```html
<!-- Call window.openFormbasePopup_Abc12XYz() to open the form popup -->
```

<p>
  Een koppelteken in een aangepaste slug wordt een underscore in de functienaam, omdat een koppelteken niet geldig is in een
  JavaScript-identifier. Kopieer de naam uit de opmerking in plaats van hem zelf af te leiden.
</p>

<h2 id="color-scheme">Kleurenschema</h2>

<p>Insluitingen en popups delen dezelfde drie opties, en beide overschrijven het eigen thema van het formulier binnen het frame:</p>

<ul>
  <li>
    <strong>Laat gebruiker kiezen</strong> — de standaard. Het formulier volgt de donker/licht-voorkeur van het besturingssysteem of de
    browser van de bezoeker.
  </li>
  <li>
    <strong>Donkere modus</strong> — forceert de donkere modus ongeacht de voorkeur van de bezoeker.
  </li>
  <li>
    <strong>Lichte modus</strong> — forceert de lichte modus ongeacht de voorkeur van de bezoeker.
  </li>
</ul>

> 💡 **Pas aan bij het thema van je site**
> <p>
>     Als je website altijd donker is, stel de insluiting of popup dan in op Donkere modus zodat het formulier erbij past. Als je site de
>     voorkeur van de bezoeker respecteert, kies dan Laat gebruiker kiezen. Om het formulier zelf van een thema te voorzien, zie{' '}
>     <a href="/nl/branding-domains/appearance-theming">uiterlijk & thema</a>.
>   </p>

<h2 id="next-steps">Volgende stappen</h2>
<div class="not-prose grid gap-3 sm:grid-cols-2">
  - [Deellinks](/nl/sharing-publishing/sharing-embedding) — Maak en beheer deellink-URL's
  - [QR-codes](/nl/sharing-publishing/sharing-embedding#qr-codes) — Genereer en plaats scanbare codes
  - [Aangepaste domeinen](/nl/branding-domains/custom-domains) — Formulieren serveren vanuit je eigen domein
  - [Uiterlijk & thema](/nl/branding-domains/appearance-theming) — Thema, omslag, logo, donkere modus
</div>