Indlejring af Fillio-formularer

Tre måder at tilføje en Fillio-formular til en hjemmeside: Standard, Popup og Fuldside.

Hvor du finder din kode

Åbn formularen, gå til fanen Del og vælg Indlejr. Fillio laver kodestumpen med dit formular-ID og dine valgte indstillinger allerede sat ind. Eksemplerne herunder viser, hvad den producerer.

Indlejringstilstande

Vælg den tilstand, der passer til dit layout.

Standard

Inline-indlejring i en sidesektion

Popup

Åbnes som modal overlejring, når aktiveret

Fuldside

Fylder en hel HTML-side

Standard-indlejring

Indsæt koden på en HTML-side. Formularen vises som en inline iframe.

Indlejringskode

<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>

Den automatiske højdetilpasning kommer fra widget-scriptet i kodestumpen. Behold det, så vokser og skrumper iframen i takt med formularen, når respondenter skifter side.

Uden scriptet

Vil du hellere undgå at indlæse widgetten, kan du bruge en almindelig iframe med fast højde. Intet tilpasser sig, så vælg en højde, der passer til din længste side.

<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>

Indstillinger

Tilføj disse queryparametre til indlejrings-URL'en for at tilpasse adfærden.

Parameter	Beskrivelse
?hideTitle=1	Skjuler formulartitlen i embeddet
?transparentBackground=1	Fjerner den hvide baggrund fra indlejringsrammen
?dynamicHeight=1	Tilpasser automatisk iframets størrelse til formularens højde

Popup-indlejring

Aktivér formularen fra en knap eller et link. Kræver indlæsning af Fillio-widgetscriptet.

1. Tilføj script

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

2. Aktivér med en knap

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

Ethvert element med data-fillio-open får Fillios standardknapstil. Tilføj din egen klasse for at overskrive den.

Attribut	Beskrivelse
data-fillio-open	Formular-ID (påkrævet)
data-fillio-width	Popup-bredde i pixels
data-fillio-hide-title	Sæt til 1 for at skjule formulartitlen

3. Aktivér med JavaScript

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

Luk en popup fra din egen kode når som helst.

Fillio.closePopup('YOUR_FORM_ID');

Åbn fra et link

Et URL-fragment åbner popuppen, så snart siden indlæses, og det gør det nemt at nå formularen fra et menupunkt, en besked eller en anden side.

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

Popuppens adfærd

En popup er 500 px bred, medmindre du sætter en bredde, og den fylder aldrig mere end 90 % af viewporten i nogen retning. Et klik på baggrunden eller et tryk på Esc lukker den, og onOpen og onClose kører i hver sin ende.

Fuldside-indlejring

Brug denne HTML-skabelon, når formularen skal fylde hele viewporten.

<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>

Indstillinger

Tilføj disse queryparametre til indlejrings-URL'en for at tilpasse adfærden.

Parameter	Beskrivelse
?transparentBackground=1	Fjerner den hvide baggrund fra indlejringsrammen

Tip

En indlejret formular opfører sig præcis som den hostede: betinget logik, flere sider og dit formulartema virker alt sammen inde i iframen.