Fillio-Formulare einbetten

Drei Möglichkeiten, ein Fillio-Formular zu einer beliebigen Website hinzuzufügen: Standard, Popup und Ganzseite.

Wo Sie Ihren Code finden

Öffnen Sie das Formular, gehen Sie auf den Tab Teilen und wählen Sie Einbetten. Fillio erzeugt den Codeschnipsel mit Ihrer Formular-ID und Ihren gewählten Optionen bereits eingesetzt. Die Beispiele unten zeigen, was dabei herauskommt.

Einbettungsmodi

Wählen Sie den Modus, der zu Ihrem Layout passt.

Standard

Inline-Einbettung in einem Seitenbereich

Popup

Öffnet sich als modales Overlay, wenn ausgelöst

Ganzseite

Füllt eine gesamte HTML-Seite aus

Standard-Einbettung

Fügen Sie den Code in eine beliebige HTML-Seite ein. Das Formular wird als Inline-iframe gerendert.

Einbettungscode

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

Die automatische Größenanpassung kommt vom Widget-Skript im Snippet. Behalten Sie es, dann wächst und schrumpft der iframe mit dem Formular, während Teilnehmer zwischen Seiten wechseln.

Ohne das Skript

Wenn Sie das Widget lieber nicht laden möchten, nehmen Sie einen einfachen iframe mit fester Höhe. Nichts passt sich an. Wählen Sie also eine Höhe, die zu Ihrer längsten Seite passt.

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

Optionen

Fügen Sie diese Query-Parameter zur Einbettungs-URL hinzu, um das Verhalten anzupassen.

Parameter	Beschreibung
?hideTitle=1	Blendet den Formulartitel im Embed aus
?transparentBackground=1	Entfernt den weißen Hintergrund vom Einbettungsrahmen
?dynamicHeight=1	Passt die Größe des iframes automatisch an die Formularhöhe an

Popup-Einbettung

Lösen Sie das Formular über beliebige Buttons oder Links aus. Erfordert das Laden des Fillio-Widget-Skripts.

1. Skript hinzufügen

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

2. Per Button auslösen

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

Jedes Element mit data-fillio-open erhält Fillios Standard-Button-Styling. Mit einer eigenen Klasse überschreiben Sie es.

Attribut	Beschreibung
data-fillio-open	Formular-ID (erforderlich)
data-fillio-width	Popup-Breite in Pixeln
data-fillio-hide-title	Auf 1 setzen, um den Formulartitel auszublenden

3. Per JavaScript auslösen

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

Schließen Sie ein Popup jederzeit aus Ihrem eigenen Code heraus.

Fillio.closePopup('YOUR_FORM_ID');

Aus einem Link öffnen

Ein URL-Fragment öffnet das Popup, sobald die Seite lädt. So erreichen Sie das Formular bequem aus einem Menüpunkt, einer Nachricht oder einer anderen Seite.

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

Popup-Verhalten

Ein Popup ist 500 px breit, sofern Sie keine Breite setzen, und überschreitet in keiner Richtung 90 % des Viewports. Ein Klick auf den Hintergrund oder Esc schließt es, und onOpen und onClose laufen an beiden Enden.

Ganzseitige Einbettung

Verwenden Sie diese HTML-Vorlage, wenn das Formular den gesamten Viewport ausfüllen soll.

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

Optionen

Fügen Sie diese Query-Parameter zur Einbettungs-URL hinzu, um das Verhalten anzupassen.

Parameter	Beschreibung
?transparentBackground=1	Entfernt den weißen Hintergrund vom Einbettungsrahmen

Tipp

Ein eingebettetes Formular verhält sich genau wie das gehostete: Bedingte Logik, mehrere Seiten und Ihr Formular-Theme funktionieren im iframe.