Вбудовування форм Fillio

Три способи додати форму Fillio на будь-який сайт: стандартний, спливне вікно та повна сторінка.

Де взяти свій код

Відкрийте форму, перейдіть на вкладку «Поділитися» і виберіть «Вбудувати». Fillio готує фрагмент коду з вашим ID форми та вибраними параметрами. Приклади нижче показують, що з цього виходить.

Режими вбудовування

Виберіть режим, що підходить для вашого макету.

Стандартний

Вбудування inline у секцію сторінки

Спливне вікно

Відкривається як модальне накладання при активації

Повна сторінка

Займає всю HTML-сторінку

Стандартне вбудовування

Вставте код на будь-яку HTML-сторінку. Форма відображається як inline 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>

Параметри

Додайте ці параметри запиту до URL вбудовування для налаштування поведінки.

Параметр	Опис
?hideTitle=1	Приховує заголовок форми всередині вбудовування
?transparentBackground=1	Прибирає білий фон із рамки вбудовування
?dynamicHeight=1	Автоматично змінює розмір iframe відповідно до висоти форми

Вбудовування у спливне вікно

Викликайте форму з будь-якої кнопки або посилання. Потребує завантаження скрипту віджету Fillio.

1. Додайте скрипт

<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	ID форми (обов’язково)
data-fillio-width	Ширина спливного вікна в пікселях
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 відкриває спливне вікно щойно сторінка завантажиться, тож до форми легко дістатися з пункту меню, повідомлення або іншої сторінки.

<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-шаблон, коли форма має заповнювати весь видимий екран.

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

Параметри

Додайте ці параметри запиту до URL вбудовування для налаштування поведінки.

Параметр	Опис
?transparentBackground=1	Прибирає білий фон із рамки вбудовування

Порада

Вбудована форма поводиться точно як розміщена у Fillio: умовна логіка, кілька сторінок і ваша тема форми працюють усередині iframe.