Pag-embed ng mga Fillio Form

Tatlong paraan upang magdagdag ng Fillio form sa anumang website: Standard, Popup, at Full Page.

Saan makikita ang inyong code

Buksan ang form, pumunta sa Share tab at piliin ang Embed. Binubuo ng Fillio ang snippet na nakalagay na ang form ID ninyo at ang mga napili ninyong opsyon. Ipinapakita ng mga halimbawa sa ibaba kung ano ang nabubuo nito.

Mga Embed Mode

Piliin ang mode na angkop sa iyong layout.

Standard

Inline na embed sa loob ng isang seksyon ng pahina

Popup

Bumubukas bilang modal overlay kapag na-trigger

Buong pahina

Sumasaklaw sa buong HTML page

Standard embed

I-paste ang code sa anumang HTML page. Ang form ay nagre-render bilang inline na iframe.

Embed code

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

Nagmumula sa widget script sa snippet ang awtomatikong pag-resize. Panatilihin ito, at lalaki at liliit ang iframe kasabay ng form habang lumilipat ng pahina ang mga respondent.

Kung walang script

Kung ayaw ninyong mag-load ng widget, gumamit ng simpleng iframe na may nakapirming taas. Walang nagre-resize, kaya pumili ng taas na kasya sa inyong pinakamahabang pahina.

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

Mga Opsyon

Idagdag ang mga query parameter na ito sa embed URL upang i-customize ang gawi.

Parameter	Paglalarawan
?hideTitle=1	Itinatago ang pamagat ng form sa loob ng embed
?transparentBackground=1	Iniaalis ang puting background mula sa embed frame
?dynamicHeight=1	Awtomatikong binabago ang laki ng iframe upang tumugma sa taas ng form

Popup embed

I-trigger ang form mula sa anumang button o link. Kailangang i-load ang Fillio widget script.

1. Magdagdag ng Script

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

2. I-trigger gamit ang Button

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

Ang anumang elementong may dalang data-fillio-open ay binibigyan ng default na estilo ng button ng Fillio. Idagdag ang sarili ninyong class para palitan ito.

Attribute	Paglalarawan
data-fillio-open	Form ID (kinakailangan)
data-fillio-width	Lapad ng popup sa pixels
data-fillio-hide-title	I-set sa 1 upang itago ang pamagat ng form

3. I-trigger gamit ang JavaScript

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

Isara ang popup mula sa sarili ninyong code anumang oras.

Fillio.closePopup('YOUR_FORM_ID');

Buksan mula sa link

Binubuksan ng URL fragment ang popup sa oras na mag-load ang pahina, kaya madaling marating ang form mula sa menu item, mensahe o ibang pahina.

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

Paggana ng popup

500 px ang lapad ng popup maliban kung magtakda kayo ng lapad, at hindi ito lumalampas sa 90% ng viewport sa alinmang direksyon. Isinasara ito ng pag-click sa backdrop o pagpindot sa Esc, at tumatakbo ang onOpen at onClose sa magkabilang dulo.

Full page embed

Gamitin ang HTML template na ito kapag dapat punan ng form ang buong viewport.

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

Mga Opsyon

Idagdag ang mga query parameter na ito sa embed URL upang i-customize ang gawi.

Parameter	Paglalarawan
?transparentBackground=1	Iniaalis ang puting background mula sa embed frame

Tip

Kumikilos ang naka-embed na form nang eksaktong katulad ng naka-host: gumagana sa loob ng iframe ang conditional logic, ang maraming pahina at ang tema ng form ninyo.