Osadzanie formularzy Fillio

Trzy sposoby dodania formularza Fillio do dowolnej strony: Standardowy, Popup i Pełna strona.

Gdzie znaleźć kod

Otwórz formularz, przejdź do karty Udostępnianie i wybierz Osadź. Fillio złoży fragment kodu z identyfikatorem formularza i wybranymi opcjami. Poniższe przykłady pokazują, co z tego powstaje.

Tryby osadzania

Wybierz tryb pasujący do Twojego układu.

Standardowy

Osadzenie inline w sekcji strony

Popup

Otwiera się jako modalna nakładka po wywołaniu

Pełna strona

Zajmuje całą stronę HTML

Osadzenie standardowe

Wklej kod do dowolnej strony HTML. Formularz renderuje się jako inline iframe.

Kod osadzania

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

Automatyczne dopasowanie wysokości zapewnia skrypt widżetu z fragmentu kodu. Zostaw go, a iframe będzie rósł i malał razem z formularzem, gdy respondenci przechodzą między stronami.

Bez skryptu

Gdy widżet nie ma być ładowany, wystarczy zwykły iframe o stałej wysokości. Nic się wtedy nie dopasowuje, więc wysokość trzeba dobrać do najdłuższej strony.

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

Opcje

Dodaj te parametry zapytania do adresu URL osadzania, aby dostosować zachowanie.

Parametr	Opis
?hideTitle=1	Ukrywa tytuł formularza wewnątrz osadzenia
?transparentBackground=1	Usuwa białe tło z ramki osadzenia
?dynamicHeight=1	Automatycznie dostosowuje rozmiar iframe do wysokości formularza

Osadzenie popup

Wywołuj formularz z dowolnego przycisku lub linku. Wymaga załadowania skryptu widżetu Fillio.

1. Dodaj skrypt

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

2. Wywołaj przyciskiem

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

Każdy element z atrybutem data-fillio-open otrzymuje domyślny styl przycisku Fillio. Dodanie własnej klasy nadpisuje go.

Atrybut	Opis
data-fillio-open	ID formularza (wymagane)
data-fillio-width	Szerokość wyskakującego okna w pikselach
data-fillio-hide-title	Ustaw na 1, aby ukryć tytuł formularza

3. Wywołaj przez JavaScript

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

Popup można zamknąć z własnego kodu w dowolnej chwili.

Fillio.closePopup('YOUR_FORM_ID');

Otwieranie z linku

Fragment adresu URL otwiera popup zaraz po załadowaniu strony, dzięki czemu do formularza łatwo dotrzeć z pozycji menu, z wiadomości albo z innej strony.

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

Zachowanie popupu

Popup ma 500 px szerokości, o ile nie ustawiono innej, i nigdy nie przekracza 90% okna w żadnym kierunku. Kliknięcie tła lub naciśnięcie Esc zamyka go, a na obu końcach uruchamiają się onOpen i onClose.

Osadzenie na pełnej stronie

Użyj tego szablonu HTML, gdy formularz ma wypełniać cały obszar widoku.

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

Opcje

Dodaj te parametry zapytania do adresu URL osadzania, aby dostosować zachowanie.

Parametr	Opis
?transparentBackground=1	Usuwa białe tło z ramki osadzenia

Wskazówka

Osadzony formularz zachowuje się dokładnie tak jak ten hostowany: logika warunkowa, wiele stron i motyw formularza działają również wewnątrz iframe.