Embedding Fillio Forms

Three ways to add a Fillio form to any website: Standard, Popup, and Full Page.

Where to find your code

Open the form, go to the Share tab and choose Embed. Fillio builds the snippet with your form ID and your chosen options already filled in. The examples below show what it produces.

Embed Modes

Choose the mode that fits your layout.

Standard

Inline embed inside a page section

Popup

Opens as a modal overlay when triggered

Full Page

Takes over an entire HTML page

Standard Embed

Paste the code into any HTML page. The form renders as an inline iframe.

Embed Code

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

The automatic resize comes from the widget script in the snippet. Keep it, and the iframe grows and shrinks with the form as respondents move between pages.

Without the script

If you would rather not load the widget, use a plain iframe with a fixed height. Nothing resizes, so pick a height that fits your longest page.

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

Options

Append these query parameters to the embed URL to customize behavior.

Parameter	Description
?hideTitle=1	Hides the form title inside the embed
?transparentBackground=1	Removes the white background from the embed frame
?dynamicHeight=1	Resizes the iframe automatically to match the form height

Popup Embed

Trigger the form from any button or link. Requires loading the Fillio widget script.

1. Add the Script

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

2. Trigger with a Button

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

Any element carrying data-fillio-open is given Fillio's default button styling. Add your own class to override it.

Attribute	Description
data-fillio-open	Form ID (required)
data-fillio-width	Popup width in pixels
data-fillio-hide-title	Set to 1 to hide the form title

3. Trigger with JavaScript

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

Close a popup from your own code at any time.

Fillio.closePopup('YOUR_FORM_ID');

Open from a link

A URL fragment opens the popup as soon as the page loads, which makes it easy to reach the form from a menu item, a message or another page.

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

Popup behaviour

A popup is 500 px wide unless you set a width, and it never exceeds 90% of the viewport in either direction. Clicking the backdrop or pressing Esc closes it, and onOpen and onClose run at each end.

Full Page Embed

Use this HTML template when the form should fill the entire viewport.

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

Options

Append these query parameters to the embed URL to customize behavior.

Parameter	Description
?transparentBackground=1	Removes the white background from the embed frame

Tip

An embedded form behaves exactly like the hosted one: conditional logic, multiple pages and your form theme all work inside the iframe.