Встраивание форм 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	Убирает белый фон из рамки встраивания

Совет

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