FillioTài liệu

Nhúng biểu mẫu Fillio

Ba cách thêm biểu mẫu Fillio vào bất kỳ trang web nào: Tiêu chuẩn, Popup và Toàn trang.

Tìm mã nhúng ở đâu

Mở biểu mẫu, vào tab Chia sẻ và chọn Nhúng. Fillio tạo sẵn đoạn mã với ID biểu mẫu và các tùy chọn bạn đã chọn. Các ví dụ bên dưới cho thấy kết quả nó tạo ra.

Các chế độ nhúng

Chọn chế độ phù hợp với bố cục của bạn.

Tiêu chuẩn

Nhúng nội tuyến trong phần trang

Popup

Mở dưới dạng lớp phủ modal khi được kích hoạt

Toàn trang

Chiếm toàn bộ trang HTML

Nhúng tiêu chuẩn

Dán mã vào bất kỳ trang HTML nào. Biểu mẫu hiển thị dưới dạng iframe nội tuyến.

Mã nhúng

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

Việc tự đổi kích thước đến từ script widget trong đoạn mã. Hãy giữ nó lại, và iframe sẽ co giãn theo biểu mẫu khi người trả lời chuyển giữa các trang.

Không dùng script

Nếu bạn không muốn tải widget, hãy dùng một iframe thuần với chiều cao cố định. Không có gì co giãn cả, nên hãy chọn chiều cao vừa với trang dài nhất của bạn.

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

Tùy chọn

Thêm các tham số truy vấn này vào URL nhúng để tùy chỉnh.

Tham sốMô tả
?hideTitle=1Ẩn tiêu đề biểu mẫu bên trong phần nhúng
?transparentBackground=1Xóa nền trắng khỏi khung nhúng
?dynamicHeight=1Tự động thay đổi kích thước iframe cho khớp với chiều cao biểu mẫu

Nhúng popup

Kích hoạt biểu mẫu từ bất kỳ nút hoặc liên kết nào. Cần tải script widget Fillio.

1. Thêm Script

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

2. Kích hoạt bằng nút

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

Mọi phần tử mang data-fillio-open đều được gán kiểu nút mặc định của Fillio. Thêm class của riêng bạn để ghi đè.

Thuộc tínhMô tả
data-fillio-openID biểu mẫu (bắt buộc)
data-fillio-widthChiều rộng popup tính bằng pixel
data-fillio-hide-titleĐặt thành 1 để ẩn tiêu đề biểu mẫu

3. Kích hoạt bằng JavaScript

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

Đóng popup từ mã của bạn bất cứ lúc nào.

Fillio.closePopup('YOUR_FORM_ID');

Mở từ một liên kết

Một fragment trong URL sẽ mở popup ngay khi trang tải xong, giúp bạn dễ dàng dẫn tới biểu mẫu từ một mục menu, một tin nhắn hay một trang khác.

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

Cách popup hoạt động

Popup rộng 500 px nếu bạn không đặt chiều rộng, và không bao giờ vượt quá 90% khung nhìn theo cả hai chiều. Nhấp vào nền hoặc nhấn Esc sẽ đóng nó, còn onOpen và onClose chạy ở mỗi đầu.

Nhúng toàn trang

Sử dụng mẫu HTML này khi biểu mẫu cần lấp đầy toàn bộ khung nhìn.

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

Tùy chọn

Thêm các tham số truy vấn này vào URL nhúng để tùy chỉnh.

Tham sốMô tả
?transparentBackground=1Xóa nền trắng khỏi khung nhúng
Mẹo

Biểu mẫu nhúng hoạt động y hệt bản được lưu trữ: logic điều kiện, nhiều trang và giao diện biểu mẫu của bạn đều chạy bên trong iframe.