การฝังฟอร์ม Fillio

สามวิธีในการเพิ่มฟอร์ม Fillio ในเว็บไซต์ใด ๆ ได้แก่ มาตรฐาน Popup และเต็มหน้า

หาโค้ดของคุณได้ที่ไหน

เปิดฟอร์ม ไปที่แท็บ แชร์ แล้วเลือก ฝัง Fillio จะสร้างโค้ดให้พร้อมใส่ ID ฟอร์มและตัวเลือกที่คุณเลือกไว้เรียบร้อย ตัวอย่างด้านล่างคือสิ่งที่มันสร้างออกมา

โหมดการฝัง

เลือกโหมดที่เหมาะกับเลย์เอาต์ของคุณ

มาตรฐาน

ฝังแบบอินไลน์ในส่วนของหน้า

ป๊อปอัป

เปิดเป็น modal overlay เมื่อถูกกระตุ้น

เต็มหน้า

ครอบคลุมทั้งหน้า HTML

การฝังมาตรฐาน

วางโค้ดในหน้า HTML ใด ๆ ฟอร์มจะแสดงเป็น iframe แบบอินไลน์

โค้ดฝัง

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

การปรับขนาดอัตโนมัติมาจากสคริปต์วิดเจ็ตในโค้ดชุดนั้น เก็บมันไว้ แล้ว iframe จะยืดหดตามฟอร์มขณะที่ผู้ตอบเปลี่ยนหน้า

แบบไม่ใช้สคริปต์

ถ้าคุณไม่อยากโหลดวิดเจ็ต ให้ใช้ iframe ธรรมดาที่กำหนดความสูงตายตัว จะไม่มีการปรับขนาดใด จึงควรเลือกความสูงที่พอดีกับหน้าที่ยาวที่สุดของคุณ

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

ตัวเลือก

เพิ่ม query parameter เหล่านี้ต่อท้าย embed URL เพื่อปรับแต่งพฤติกรรม

พารามิเตอร์	คำอธิบาย
?hideTitle=1	ซ่อนชื่อฟอร์มภายในส่วนที่ฝัง
?transparentBackground=1	ลบพื้นหลังสีขาวออกจากกรอบที่ฝัง
?dynamicHeight=1	ปรับขนาด iframe โดยอัตโนมัติให้ตรงกับความสูงของฟอร์ม

การฝังแบบ Popup

เรียกฟอร์มจากปุ่มหรือลิงก์ใด ๆ ต้องโหลด Fillio widget script ก่อน

1. เพิ่ม Script

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

2. เรียกใช้ด้วยปุ่ม

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

อิลิเมนต์ใดก็ตามที่มี data-fillio-open จะได้สไตล์ปุ่มมาตรฐานของ Fillio เพิ่มคลาสของคุณเองเพื่อเขียนทับได้

แอตทริบิวต์	คำอธิบาย
data-fillio-open	รหัสฟอร์ม (จำเป็น)
data-fillio-width	ความกว้างของ popup เป็นพิกเซล
data-fillio-hide-title	ตั้งค่าเป็น 1 เพื่อซ่อนชื่อฟอร์ม

3. เรียกใช้ด้วย JavaScript

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

ปิดป๊อปอัปจากโค้ดของคุณเองได้ทุกเมื่อ

Fillio.closePopup('YOUR_FORM_ID');

เปิดจากลิงก์

URL fragment จะเปิดป๊อปอัปทันทีที่หน้าโหลดเสร็จ ทำให้เข้าถึงฟอร์มจากรายการเมนู ข้อความ หรือหน้าอื่นได้ง่าย

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

พฤติกรรมของป๊อปอัป

ป๊อปอัปกว้าง 500 px เว้นแต่คุณกำหนดความกว้างเอง และไม่เกิน 90% ของหน้าจอทั้งสองด้าน คลิกพื้นหลังหรือกด Esc เพื่อปิด ส่วน onOpen และ onClose ทำงานที่ปลายทั้งสองข้าง

การฝังแบบเต็มหน้า

ใช้ HTML template นี้เมื่อฟอร์มต้องครอบคลุมทั้ง 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>

ตัวเลือก

เพิ่ม query parameter เหล่านี้ต่อท้าย embed URL เพื่อปรับแต่งพฤติกรรม

พารามิเตอร์	คำอธิบาย
?transparentBackground=1	ลบพื้นหลังสีขาวออกจากกรอบที่ฝัง

เคล็ดลับ

ฟอร์มที่ฝังไว้ทำงานเหมือนฟอร์มบนโฮสต์ทุกอย่าง ตรรกะเงื่อนไข หลายหน้า และธีมของฟอร์มใช้ได้ครบภายใน iframe