Fillio Formlarını Gömme

Fillio formunu herhangi bir web sitesine eklemenin üç yolu: Standart, Pop-up ve Tam Sayfa.

Kodunuzu nerede bulacaksınız

Formunuzu açın, Paylaş sekmesine gidin ve Göm seçeneğini kullanın. Fillio, kod parçacığını form kimliğiniz ve seçtiğiniz ayarlarla birlikte hazırlar; aşağıdaki örnekler bu çıktının nasıl göründüğünü gösterir.

Gömme Modları

Düzeninize uygun modu seçin.

Standart

Sayfa bölümü içine satır içi gömme

Pop-up

Tetiklendiğinde modal kaplama olarak açılır

Tam Sayfa

Tüm bir HTML sayfasını kaplar

Standart Gömme

Kodu herhangi bir HTML sayfasına yapıştırın. Form satır içi iframe olarak görüntülenir.

Gömme Kodu

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

Otomatik yeniden boyutlandırma, kod parçacığındaki widget betiğinden gelir. Bu betiği koruduğunuz sürece iframe, katılımcılar sayfalar arasında ilerledikçe formla birlikte büyüyüp küçülür.

Betik olmadan

Widget betiğini yüklemek istemiyorsanız sabit yükseklikli düz bir iframe kullanabilirsiniz. Bu durumda hiçbir şey yeniden boyutlandırılmaz; bu nedenle en uzun sayfanıza yetecek bir yükseklik seçin.

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

Seçenekler

Davranışı özelleştirmek için bu sorgu parametrelerini gömme URL'sine ekleyin.

Parametre	Açıklama
?hideTitle=1	Gömülü formdaki form başlığını gizler
?transparentBackground=1	Gömülü form çerçevesinden beyaz arka planı kaldırır
?dynamicHeight=1	iframe'i form yüksekliğiyle eşleşecek şekilde otomatik olarak yeniden boyutlandırır

Pop-up Gömme

Formu herhangi bir düğme veya bağlantıdan tetikleyin. Fillio widget script'inin yüklenmesini gerektirir.

1. Script'i Ekleyin

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

2. Düğmeyle Tetikleyin

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

data-fillio-open özniteliğini taşıyan her öğeye Fillio'nun varsayılan düğme stili uygulanır. Bunu geçersiz kılmak için kendi sınıfınızı ekleyebilirsiniz.

Nitelik	Açıklama
data-fillio-open	Form ID (zorunlu)
data-fillio-width	Piksel cinsinden pop-up genişliği
data-fillio-hide-title	Form başlığını gizlemek için 1 olarak ayarlayın

3. JavaScript ile Tetikleyin

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

Bir pop-up penceresini dilediğiniz anda kendi kodunuzdan kapatabilirsiniz.

Fillio.closePopup('YOUR_FORM_ID');

Bağlantı üzerinden açmak

URL sonuna eklenen bir parça, sayfa yüklenir yüklenmez pop-up penceresini açar; böylece forma bir menü öğesinden, bir mesajdan veya başka bir sayfadan kolayca ulaşılmasını sağlayabilirsiniz.

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

Pop-up davranışı

Bir genişlik belirtmediğiniz sürece pop-up penceresinin genişliği 500 pikseldir ve hiçbir yönde görüntü alanının %90'ını aşmaz. Arka plana tıklamak veya Esc tuşuna basmak pencereyi kapatır; onOpen ve onClose geri çağrıları da açılış ve kapanış anlarında çalışır.

Tam Sayfa Gömme

Formun tüm görünüm alanını doldurması gerektiğinde bu HTML şablonunu kullanı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>

Seçenekler

Davranışı özelleştirmek için bu sorgu parametrelerini gömme URL'sine ekleyin.

Parametre	Açıklama
?transparentBackground=1	Gömülü form çerçevesinden beyaz arka planı kaldırır

İpucu

Gömülü bir form, barındırılan sürümle tamamen aynı şekilde çalışır: koşullu mantık, çok sayfalı akış ve form temanızın tamamı iframe içinde de geçerlidir.