Membenamkan Borang Fillio

Tiga cara untuk menambah borang Fillio ke mana-mana laman web: Standard, Popup dan Halaman Penuh.

Tempat mencari kod anda

Buka borang, pergi ke tab Kongsi dan pilih Benam. Fillio menjana petikan kod dengan ID borang anda dan pilihan yang anda tetapkan sudah terisi. Contoh di bawah menunjukkan apa yang dihasilkannya.

Mod Benam

Pilih mod yang sesuai dengan susun atur anda.

Standard

Benam sebaris dalam bahagian halaman

Popup

Terbuka sebagai tindanan modal apabila dicetuskan

Halaman Penuh

Mengambil alih seluruh halaman HTML

Benam Standard

Tampal kod ke mana-mana halaman HTML. Borang dipaparkan sebagai iframe sebaris.

Kod Benam

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

Pengubahsuaian saiz automatik datang daripada skrip widget dalam petikan kod itu. Kekalkannya, dan iframe akan membesar serta mengecil bersama borang ketika responden berpindah antara halaman.

Tanpa skrip

Jika anda tidak mahu memuatkan widget itu, gunakan iframe biasa dengan ketinggian tetap. Tiada apa-apa yang berubah saiz, jadi pilih ketinggian yang muat untuk halaman terpanjang anda.

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

Pilihan

Tambah parameter pertanyaan ini ke URL benam untuk menyesuaikan kelakuan.

Parameter	Penerangan
?hideTitle=1	Menyembunyikan tajuk borang dalam benam
?transparentBackground=1	Mengalih keluar latar belakang putih daripada bingkai benam
?dynamicHeight=1	Mengubah saiz iframe secara automatik mengikut ketinggian borang

Benam Popup

Cetuskan borang daripada mana-mana butang atau pautan. Memerlukan pemuatan skrip widget Fillio.

1. Tambah Skrip

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

2. Cetuskan dengan Butang

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

Mana-mana elemen yang membawa data-fillio-open akan diberikan gaya butang lalai Fillio. Tambah kelas anda sendiri untuk menggantikannya.

Atribut	Penerangan
data-fillio-open	ID Borang (wajib)
data-fillio-width	Lebar popup dalam piksel
data-fillio-hide-title	Tetapkan kepada 1 untuk menyembunyikan tajuk borang

3. Cetuskan dengan JavaScript

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

Tutup popup daripada kod anda sendiri pada bila-bila masa.

Fillio.closePopup('YOUR_FORM_ID');

Buka daripada pautan

Serpihan URL membuka popup sebaik halaman dimuatkan, yang memudahkan borang dicapai daripada item menu, mesej atau halaman lain.

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

Kelakuan popup

Popup berukuran lebar 500 px melainkan anda menetapkan lebarnya, dan ia tidak pernah melebihi 90% viewport pada mana-mana arah. Mengklik latar atau menekan Esc akan menutupnya, dan onOpen serta onClose berjalan pada setiap hujung.

Benam Halaman Penuh

Gunakan templat HTML ini apabila borang perlu mengisi keseluruhan 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>

Pilihan

Tambah parameter pertanyaan ini ke URL benam untuk menyesuaikan kelakuan.

Parameter	Penerangan
?transparentBackground=1	Mengalih keluar latar belakang putih daripada bingkai benam

Petua

Borang yang dibenamkan berkelakuan sama seperti borang yang dihoskan: logik bersyarat, berbilang halaman dan tema borang anda semuanya berfungsi di dalam iframe.