Menyematkan Formulir Fillio

Tiga cara untuk menambahkan formulir Fillio ke situs web mana pun: Standar, Popup, dan Halaman Penuh.

Tempat menemukan kode Anda

Buka formulir, masuk ke tab Bagikan, lalu pilih Sematan. Fillio menyusun cuplikan kodenya dengan ID formulir dan opsi pilihan Anda yang sudah terisi. Contoh di bawah menunjukkan hasilnya.

Mode Sematan

Pilih mode yang sesuai dengan tata letak Anda.

Standar

Sematan inline di dalam bagian halaman

Popup

Terbuka sebagai overlay modal saat dipicu

Halaman Penuh

Mengambil alih seluruh halaman HTML

Sematan Standar

Tempelkan kode ke halaman HTML mana pun. Formulir ditampilkan sebagai iframe inline.

Kode Sematan

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

Penyesuaian ukuran otomatis berasal dari skrip widget di dalam cuplikan itu. Pertahankan skripnya, dan iframe akan membesar dan mengecil mengikuti formulir saat responden berpindah halaman.

Tanpa skrip

Jika Anda tidak ingin memuat widget-nya, gunakan iframe biasa dengan tinggi tetap. Tidak ada yang menyesuaikan ukuran, jadi pilih tinggi yang cukup 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>

Opsi

Tambahkan parameter kueri ini ke URL sematan untuk menyesuaikan perilaku.

Parameter	Deskripsi
?hideTitle=1	Menyembunyikan judul formulir di dalam sematan
?transparentBackground=1	Menghapus latar belakang putih dari bingkai sematan
?dynamicHeight=1	Mengubah ukuran iframe secara otomatis agar sesuai dengan tinggi formulir

Sematan Popup

Picu formulir dari tombol atau tautan mana pun. Memerlukan pemuatan skrip widget Fillio.

1. Tambahkan Script

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

2. Picu dengan Tombol

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

Setiap elemen yang membawa data-fillio-open diberi gaya tombol bawaan Fillio. Tambahkan kelas Anda sendiri untuk menimpanya.

Atribut	Deskripsi
data-fillio-open	ID Formulir (wajib)
data-fillio-width	Lebar popup dalam piksel
data-fillio-hide-title	Atur ke 1 untuk menyembunyikan judul formulir

3. Picu dengan JavaScript

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

Tutup popup dari kode Anda sendiri kapan saja.

Fillio.closePopup('YOUR_FORM_ID');

Membuka dari sebuah tautan

Fragmen URL membuka popup begitu halaman dimuat, sehingga formulir mudah dijangkau dari item menu, sebuah pesan, atau halaman lain.

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

Perilaku popup

Popup berlebar 500 px kecuali Anda menentukan lebarnya, dan tidak pernah melampaui 90% viewport ke arah mana pun. Mengeklik latar atau menekan Esc akan menutupnya, dan onOpen serta onClose berjalan di masing-masing ujungnya.

Sematan Halaman Penuh

Gunakan template HTML ini saat formulir harus mengisi seluruh 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>

Opsi

Tambahkan parameter kueri ini ke URL sematan untuk menyesuaikan perilaku.

Parameter	Deskripsi
?transparentBackground=1	Menghapus latar belakang putih dari bingkai sematan

Tips

Formulir yang disematkan berperilaku persis seperti versi yang dihosting: logika bersyarat, banyak halaman, dan tema formulir Anda semuanya berfungsi di dalam iframe.