Fillio-formulieren insluiten

Drie manieren om een Fillio-formulier aan een website toe te voegen: Standaard, Popup en Volledige pagina.

Waar u uw code vindt

Open het formulier, ga naar het tabblad Delen en kies Insluiten. Fillio bouwt het fragment met uw formulier-ID en de door u gekozen opties er al in. De voorbeelden hieronder tonen wat dat oplevert.

Insluitingsmodi

Kies de modus die bij jouw lay-out past.

Standaard

Inline insluiting in een paginasectie

Popup

Opent als modaal overlay wanneer geactiveerd

Volledige pagina

Vult een volledige HTML-pagina

Standaard insluiting

Plak de code in een HTML-pagina. Het formulier wordt weergegeven als een inline iframe.

Insluitcode

<iframe data-fillio-src="https://fillio.so/embed/YOUR_FORM_ID" width="100%" height="800" frameborder="0" marginheight="0" marginwidth="0" title="Form" loading="lazy"></iframe>
<script>var d=document,w="https://fillio.so/widgets/embed.js",v=function(){"undefined"!=typeof Fillio?Fillio.loadEmbeds():d.querySelectorAll("iframe[data-fillio-src]:not([src])").forEach((function(e){e.src=e.dataset.fillioSrc}))};if("undefined"!=typeof Fillio)v();else if(d.querySelector('script[src="'+w+'"]')==null){var s=d.createElement("script");s.src=w,s.onload=v,s.onerror=v,d.body.appendChild(s);}</script>

Het automatisch meeschalen komt van het widgetscript in het fragment. Laat het staan, en het iframe groeit en krimpt mee met het formulier terwijl respondenten tussen pagina's bewegen.

Zonder het script

Wilt u de widget liever niet laden, gebruik dan een gewoon iframe met een vaste hoogte. Er schaalt niets mee, dus kies een hoogte die op uw langste pagina past.

<iframe src="https://fillio.so/embed/YOUR_FORM_ID" width="100%" height="800" frameborder="0" marginheight="0" marginwidth="0" title="Form" style="border: 1px solid #e5e7eb; border-radius: 8px;"></iframe>

Opties

Voeg deze queryparameters toe aan de insluit-URL om het gedrag aan te passen.

Parameter	Beschrijving
?hideTitle=1	Verbergt de formuliertitel in het embed
?transparentBackground=1	Verwijdert de witte achtergrond van het insluitkader
?dynamicHeight=1	Past de grootte van het iframe automatisch aan de formulierhoogte aan

Popup-insluiting

Activeer het formulier vanuit elke knop of link. Vereist het laden van het Fillio-widgetscript.

1. Script toevoegen

<script async src="https://fillio.so/widgets/embed.js"></script>

2. Activeren met een knop

<button data-fillio-open="YOUR_FORM_ID" data-fillio-width="500">Open Form</button>

Elk element met data-fillio-open krijgt de standaard knopstijl van Fillio. Voeg uw eigen class toe om die te overschrijven.

Attribuut	Beschrijving
data-fillio-open	Formulier-ID (verplicht)
data-fillio-width	Popupbreedte in pixels
data-fillio-hide-title	Stel in op 1 om de formuliertitel te verbergen

3. Activeren met JavaScript

Fillio.openPopup('YOUR_FORM_ID', {
  width: 500,
  hideTitle: false,
  onOpen: function () {},
  onClose: function () {}
});

Sluit een popup op elk moment vanuit uw eigen code.

Fillio.closePopup('YOUR_FORM_ID');

Openen vanaf een link

Een URL-fragment opent de popup zodra de pagina laadt, waardoor het formulier eenvoudig bereikbaar is vanuit een menu-item, een bericht of een andere pagina.

<a href="https://your-site.com/page#fillio-open=YOUR_FORM_ID&fillio-width=600">Open Form</a>

Gedrag van de popup

Een popup is 500 px breed tenzij u een breedte instelt, en hij komt in geen enkele richting boven 90% van het scherm uit. Klikken op de achtergrond of op Esc drukken sluit hem, en onOpen en onClose draaien aan beide uiteinden.

Volledige pagina-insluiting

Gebruik deze HTML-sjabloon wanneer het formulier de volledige viewport moet vullen.

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Form</title>
    <script async src="https://fillio.so/widgets/embed.js"></script>
    <style type="text/css">
      html { margin: 0; height: 100%; overflow: hidden; }
      iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 0; }
    </style>
  </head>
  <body>
    <iframe data-fillio-src="https://fillio.so/embed/YOUR_FORM_ID" width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0" title="Form"></iframe>
  </body>
</html>

Opties

Voeg deze queryparameters toe aan de insluit-URL om het gedrag aan te passen.

Parameter	Beschrijving
?transparentBackground=1	Verwijdert de witte achtergrond van het insluitkader

Tip

Een ingesloten formulier gedraagt zich precies als het gehoste formulier: voorwaardelijke logica, meerdere pagina's en uw formulierthema werken allemaal binnen het iframe.