Insertar formularios de Fillio

Tres formas de agregar un formulario de Fillio a cualquier sitio web: Estándar, Popup y Página completa.

Dónde encontrar su código

Abra el formulario, vaya a la pestaña Compartir y elija Insertar. Fillio genera el fragmento con el ID de su formulario y las opciones que haya elegido ya rellenados; los ejemplos de abajo muestran lo que produce.

Modos de inserción

Elija el modo que mejor se adapte a su diseño.

Estándar

Inserción inline dentro de una sección de la página

Ventana emergente

Se abre como superposición modal al activarse

Página completa

Ocupa una página HTML completa

Inserción estándar

Pegue el código en cualquier página HTML. El formulario se muestra como un iframe inline.

Código de inserción

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

El redimensionado automático viene del script del widget que incluye el fragmento. Consérvelo y el iframe crecerá y se encogerá con el formulario a medida que quien responde cambia de página.

Sin el script

Si prefiere no cargar el widget, use un iframe normal con una altura fija. Nada se redimensiona, así que elija una altura que sirva para su página más larga.

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

Opciones

Agregue estos parámetros a la URL de inserción para personalizar el comportamiento.

Parámetro	Descripción
?hideTitle=1	Oculta el título del formulario dentro de la inserción
?transparentBackground=1	Elimina el fondo blanco del marco de inserción
?dynamicHeight=1	Redimensiona el iframe automáticamente para adaptarse a la altura del formulario

Inserción popup

Active el formulario desde cualquier botón o enlace. Requiere cargar el script del widget de Fillio.

1. Agregar el script

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

2. Activar con un botón

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

Cualquier elemento que lleve data-fillio-open recibe el estilo de botón por defecto de Fillio. Añada su propia clase para sobrescribirlo.

Atributo	Descripción
data-fillio-open	ID del formulario (obligatorio)
data-fillio-width	Ancho del popup en píxeles
data-fillio-hide-title	Establezca en 1 para ocultar el título del formulario

3. Activar con JavaScript

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

Cierre una ventana emergente desde su propio código en cualquier momento.

Fillio.closePopup('YOUR_FORM_ID');

Abrir desde un enlace

Un fragmento de URL abre la ventana emergente en cuanto carga la página, lo que facilita llegar al formulario desde un elemento de menú, un mensaje u otra página.

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

Comportamiento de la ventana emergente

Una ventana emergente mide 500 px de ancho salvo que fije un ancho, y nunca supera el 90 % del viewport en ninguna dirección. Al hacer clic en el fondo o pulsar Esc se cierra, y onOpen y onClose se ejecutan en cada extremo.

Inserción en página completa

Use esta plantilla HTML cuando el formulario deba ocupar toda la ventana del navegador.

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

Opciones

Agregue estos parámetros a la URL de inserción para personalizar el comportamiento.

Parámetro	Descripción
?transparentBackground=1	Elimina el fondo blanco del marco de inserción

Consejo

Un formulario insertado se comporta exactamente igual que el alojado: la lógica condicional, las varias páginas y el tema de su formulario funcionan dentro del iframe.