Intégration des formulaires Fillio

Trois façons d'ajouter un formulaire Fillio à n'importe quel site web : Standard, Popup et Pleine page.

Où trouver votre code

Ouvrez le formulaire, allez dans l'onglet Partager et choisissez Intégrer. Fillio génère l'extrait avec l'identifiant de votre formulaire et les options que vous avez choisies déjà renseignés. Les exemples ci-dessous montrent ce qu'il produit.

Modes d'intégration

Choisissez le mode adapté à votre mise en page.

Standard

Intégration iframe en ligne dans une section de page

Popup

S'ouvre en superposition modale au déclenchement

Pleine page

Occupe une page HTML entière

Intégration standard

Collez le code dans n'importe quelle page HTML. Le formulaire s'affiche sous forme d'iframe en ligne.

Code d'intégration

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

Le redimensionnement automatique vient du script du widget présent dans l'extrait. Gardez-le et l'iframe grandit et rétrécit avec le formulaire à mesure que les répondants changent de page.

Sans le script

Si vous préférez ne pas charger le widget, utilisez une simple iframe avec une hauteur fixe. Rien ne se redimensionne : choisissez donc une hauteur adaptée à votre page la plus longue.

<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

Ajoutez ces paramètres à l'URL d'intégration pour personnaliser le comportement.

Paramètre	Description
?hideTitle=1	Masque le titre du formulaire dans l'intégration
?transparentBackground=1	Supprime l'arrière-plan blanc du cadre d'intégration
?dynamicHeight=1	Redimensionne l'iframe automatiquement pour s'adapter à la hauteur du formulaire

Intégration popup

Déclenchez le formulaire depuis n'importe quel bouton ou lien. Nécessite le chargement du script du widget Fillio.

1. Ajouter le script

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

2. Déclenchement par bouton

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

Tout élément portant data-fillio-open reçoit le style de bouton par défaut de Fillio. Ajoutez votre propre classe pour le remplacer.

Attribut	Description
data-fillio-open	Identifiant du formulaire (obligatoire)
data-fillio-width	Largeur du popup en pixels
data-fillio-hide-title	Définir à 1 pour masquer le titre du formulaire

3. Déclenchement par JavaScript

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

Fermez un popup depuis votre propre code à tout moment.

Fillio.closePopup('YOUR_FORM_ID');

Ouvrir depuis un lien

Un fragment d'URL ouvre le popup dès le chargement de la page, ce qui permet d'atteindre facilement le formulaire depuis un élément de menu, un message ou une autre page.

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

Comportement du popup

Un popup fait 500 px de large tant que vous ne fixez pas de largeur, et il ne dépasse jamais 90 % de la fenêtre dans l'une ou l'autre direction. Un clic sur le fond ou la touche Échap le ferme, et onOpen et onClose s'exécutent à chaque extrémité.

Intégration pleine page

Utilisez ce modèle HTML lorsque le formulaire doit occuper toute la fenêtre d'affichage.

<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

Ajoutez ces paramètres à l'URL d'intégration pour personnaliser le comportement.

Paramètre	Description
?transparentBackground=1	Supprime l'arrière-plan blanc du cadre d'intégration

Conseil

Un formulaire intégré se comporte exactement comme celui hébergé par Fillio : la logique conditionnelle, les pages multiples et le thème de votre formulaire fonctionnent tous dans l'iframe.