Уградња 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 widget скрипте.

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