Delen & Publiceren
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.
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 deellinks. Op de link ingestelde standaardwaarden voor queryparameters zijn de enige uitzondering: ze worden niet toegevoegd aan insluit- of popup-codefragmenten.
Inline insluiting
Een inline insluiting plaatst je formulier direct in een pagina via een iframe. Open het Deel-paneel, klik op de Insluiten-kaart en kopieer het gegenereerde codefragment naar de HTML van je site.
Indeling
| Instelling | Wat het doet |
|---|---|
| Hoogte (px) | iframe-hoogte in pixels. Standaard is 600. |
| Hoogte automatisch aanpassen | Past de iframe-hoogte aan de formulierinhoud aan, zodat respondenten nooit een scrollbalk binnen de insluiting zien. Standaard uit. Als je dit aanzet, wordt een klein script aan het codefragment toegevoegd. |
| Vertraagd laden | Stelt het laden uit totdat de iframe zichtbaar is, door loading="lazy" toe te voegen. Standaard uit. Versnelt het laden van de initiële pagina wanneer het formulier verder naar beneden op de pagina staat. |
Weergave
| Instelling | Wat het doet |
|---|---|
| Omslagafbeelding verbergen | Verwijdert de omslagafbeelding van het formulier binnen de insluiting. Handig als je hostpagina al een eigen header heeft. |
| Logo verbergen | Verwijdert het formulierlogo binnen de insluiting. |
| Kleurenschema | Laat gebruiker kiezen (de standaard, volgt de systeemvoorkeur van de bezoeker), Donkere modus of Lichte modus. Zie Kleurenschema hieronder. |
Klik op Code weergeven om de gegenereerde HTML te zien. Gebruik Insluitingscode kopiëren om het te kopiëren, en plak het vervolgens in je site. Standaardinstellingen herstellen zet alle instellingen terug.
Wat het codefragment bevat
Met automatisch aanpassen uit is het codefragment één enkele iframe die naar je deellink wijst met ?embed=1 toegevoegd. De
weergave-opties voegen hun eigen parameters toe: hideCover=1, hideLogo=1, en theme=dark of
theme=light.
<iframe src="https://form.formbase.so/Abc12XYz?embed=1" width="100%" height="600" style="border: none;"></iframe>Met automatisch aanpassen aan wordt de iframe verpakt in een div en gevolgd door een script. Het ingesloten formulier
verstuurt bij elke hoogteverandering een formbase:resize-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.
Popup
Een popup toont je formulier als een overlay bovenop je pagina. Open het Deel-paneel, klik op de Popup -kaart, stel je opties in en plak het gegenereerde codefragment in je site.
Trigger
Kies hoe de popup opent:
| Trigger | Hoe het werkt |
|---|---|
| Wanneer een functie wordt aangeroepen | De standaard. Het codefragment definieert een globale functie die is vernoemd naar de code of aangepaste slug van je deellink — bijvoorbeeld window.openFormbasePopup_Abc12XYz. Roep deze aan vanuit een knop, een link of een andere event handler op je site. |
| Automatisch bij het laden van de pagina | De popup opent zodra de pagina klaar is met laden. Er verschijnen twee extra instellingen: Vertraging (seconden) en Eén keer per sessie tonen, die een vlag opslaat in de sessionStorage van de bezoeker zodat de popup niet op elke pagina opnieuw opent. |
Indeling
| Instelling | Wat het doet |
|---|---|
| Positie | Waar de popup verschijnt: Gecentreerd, Rechtsonder (de standaard), Linksonder, Rechtsboven of Linksboven. Gecentreerd maakt de popup 80% van de viewporthoogte; de vier hoekposities maken hem 600 px hoog. |
| Breedte (px) | Popupbreedte in pixels, begrensd op 90% van de viewportbreedte. Standaard is 500. |
Weergave
| Instelling | Wat het doet |
|---|---|
| Omslagafbeelding verbergen | Verwijdert de omslagafbeelding van het formulier binnen de popup. |
| Logo verbergen | Verwijdert het formulierlogo binnen de popup. |
| Kleurenschema | Dezelfde drie opties als bij de insluiting. Zie Kleurenschema hieronder. |
Popup-stijl
| Instelling | Wat het doet |
|---|---|
| Overlay-dekking (%) | Donkerte van de achtergrond achter de popup, 0 tot 100. Standaard is 50. |
| Randradius (px) | Afronding van de hoeken van de popup. Standaard is 12. |
Gedrag
| Instelling | Wat het doet |
|---|---|
| Sluiten met Escape-toets | Standaard aan. Op Escape drukken sluit de popup. |
| Sluiten bij klik op overlay | Standaard aan. Klikken op de achtergrond buiten de popup sluit hem. |
| Automatisch sluiten na indiening | Standaard uit. De popup sluit drie seconden nadat de respondent indient. De vertraging ligt vast. |
Klik op Code weergeven om het gegenereerde codefragment te zien. Gebruik Popupcode kopiëren om het te kopiëren, en plak het vervolgens in je site. Standaardinstellingen herstellen zet alle instellingen terug.
Wat het codefragment bevat
Het popup-codefragment is één zelfstandig <script>-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:
<!-- Call window.openFormbasePopup_Abc12XYz() to open the form popup -->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.
Kleurenschema
Insluitingen en popups delen dezelfde drie opties, en beide overschrijven het eigen thema van het formulier binnen het frame:
Laat gebruiker kiezen — de standaard. Het formulier volgt de donker/licht-voorkeur van het besturingssysteem of de browser van de bezoeker.
Donkere modus — forceert de donkere modus ongeacht de voorkeur van de bezoeker.
Lichte modus — forceert de lichte modus ongeacht de voorkeur van de bezoeker.
Pas aan bij het thema van je site
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 uiterlijk & thema.