Încorporarea formularelor Fillio

Trei moduri de a adăuga un formular Fillio pe orice site web: Standard, Pop-up și Pagină întreagă.

Unde vă găsiți codul

Deschideți formularul, mergeți la fila Partajare și alegeți Încorporare. Fillio generează fragmentul de cod cu ID-ul formularului dvs. și cu opțiunile alese deja completate. Exemplele de mai jos arată ce produce.

Moduri de încorporare

Alegeți modul care se potrivește paginii dvs.

Standard

Încorporare inline într-o secțiune a paginii

Pop-up

Se deschide ca suprapunere modală la declanșare

Pagină întreagă

Ocupă o pagină HTML întreagă

Încorporare standard

Lipiți codul în orice pagină HTML. Formularul se afișează ca iframe inline.

Cod de încorporare

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

Redimensionarea automată vine de la scriptul widget-ului din fragmentul de cod. Păstrați-l și iframe-ul crește și scade odată cu formularul, pe măsură ce respondenții trec dintr-o pagină în alta.

Fără script

Dacă preferați să nu încărcați widget-ul, folosiți un iframe simplu, cu înălțime fixă. Nimic nu se redimensionează, așa că alegeți o înălțime potrivită pentru cea mai lungă pagină a dvs.

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

Opțiuni

Adăugați acești parametri la URL-ul de încorporare, ca să personalizați comportamentul.

Parametru	Descriere
?hideTitle=1	Ascunde titlul formularului în încorporare
?transparentBackground=1	Elimină fundalul alb din cadrul de încorporare
?dynamicHeight=1	Redimensionează automat iframe-ul după înălțimea formularului

Încorporare pop-up

Declanșați formularul de pe orice buton sau link. Necesită încărcarea scriptului widget Fillio.

1. Adăugați scriptul

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

2. Declanșați cu un buton

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

Orice element care poartă data-fillio-open primește stilul de buton implicit al Fillio. Adăugați propria clasă ca să îl suprascrieți.

Atribut	Descriere
data-fillio-open	ID formular (obligatoriu)
data-fillio-width	Lățimea pop-up-ului în pixeli
data-fillio-hide-title	Setați la 1 ca să ascundeți titlul formularului

3. Declanșați cu JavaScript

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

Închideți un popup din propriul cod, oricând.

Fillio.closePopup('YOUR_FORM_ID');

Deschidere dintr-un link

Un fragment de URL deschide popup-ul imediat ce pagina se încarcă, ceea ce face ușor accesul la formular dintr-un element de meniu, dintr-un mesaj sau de pe altă pagină.

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

Comportamentul popup-ului

Un popup are 500 px lățime dacă nu setați altceva și nu depășește niciodată 90% din fereastră, pe nicio direcție. Un clic pe fundal sau tasta Esc îl închide, iar onOpen și onClose rulează la cele două capete.

Încorporare pe pagină întreagă

Folosiți acest șablon HTML când formularul trebuie să ocupe tot ecranul.

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

Opțiuni

Adăugați acești parametri la URL-ul de încorporare, ca să personalizați comportamentul.

Parametru	Descriere
?transparentBackground=1	Elimină fundalul alb din cadrul de încorporare

Sfat

Un formular încorporat se comportă exact ca cel găzduit: logica condițională, paginile multiple și tema formularului dvs. funcționează toate în interiorul iframe-ului.