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.

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>

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>

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

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

Thuộc tính dữ liệu

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

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