Bädda in Fillio-formulär

Tre sätt att lägga till ett Fillio-formulär på en webbplats: Standard, Popup och Helsida.

Var du hittar din kod

Öppna formuläret, gå till fliken Dela och välj Bädda in. Fillio bygger kodsnutten med ditt formulär-ID och dina valda alternativ redan ifyllda. Exemplen nedan visar vad den producerar.

Inbäddningslägen

Välj det läge som passar din layout.

Standard

Inline-inbäddning i ett sidavsnitt

Popup

Öppnas som modalt överlägg när det aktiveras

Helsida

Fyller en hel HTML-sida

Standardinbäddning

Klistra in koden på en HTML-sida. Formuläret visas som en inline iframe.

Inbäddningskod

<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 automatiska storleksändringen kommer från widget-skriptet i kodsnutten. Behåll det, så växer och krymper iframen tillsammans med formuläret när respondenterna byter sida.

Utan skriptet

Om du hellre slipper ladda widgeten, använd en vanlig iframe med fast höjd. Ingenting ändrar storlek, så välj en höjd som rymmer din längsta sida.

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

Alternativ

Lägg till dessa frågeparametrar i inbäddnings-URL:en för att anpassa beteendet.

Parameter	Beskrivning
?hideTitle=1	Döljer formulärtiteln i inbäddningen
?transparentBackground=1	Tar bort den vita bakgrunden från inbäddningsramen
?dynamicHeight=1	Anpassar automatiskt iframets storlek till formulärhöjden

Popup-inbäddning

Aktivera formuläret från valfri knapp eller länk. Kräver att Fillio-widgetskriptet laddas.

1. Lägg till skript

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

2. Aktivera med en knapp

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

Alla element som bär data-fillio-open får Fillios standardstil för knappar. Lägg till din egen klass för att skriva över den.

Attribut	Beskrivning
data-fillio-open	Formulär-ID (obligatoriskt)
data-fillio-width	Popup-bredd i pixlar
data-fillio-hide-title	Ange 1 för att dölja formulärtiteln

3. Aktivera med JavaScript

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

Stäng en popup från din egen kod när som helst.

Fillio.closePopup('YOUR_FORM_ID');

Öppna från en länk

Ett URL-fragment öppnar popupen så snart sidan laddas, vilket gör det enkelt att nå formuläret från en menypunkt, ett meddelande eller en annan sida.

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

Popupens beteende

En popup är 500 px bred om du inte anger en bredd, och den överstiger aldrig 90 % av visningsytan i någon riktning. Ett klick på bakgrunden eller ett tryck på Esc stänger den, och onOpen och onClose körs i vardera änden.

Helsidesinbäddning

Använd den här HTML-mallen när formuläret ska fylla hela 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>

Alternativ

Lägg till dessa frågeparametrar i inbäddnings-URL:en för att anpassa beteendet.

Parameter	Beskrivning
?transparentBackground=1	Tar bort den vita bakgrunden från inbäddningsramen

Tips

Ett inbäddat formulär beter sig precis som det hostade: villkorslogik, flera sidor och ditt formulärtema fungerar alla inuti iframen.