Incorporando Formulários Fillio

Três formas de adicionar um formulário Fillio a qualquer site: Padrão, Popup e Página Inteira.

Onde encontrar o seu código

Abra o formulário, vá ao separador Partilhar e escolha Incorporar. O Fillio cria o excerto de código com o ID do seu formulário e as opções que escolheu já preenchidos. Os exemplos abaixo mostram o que produz.

Modos de Incorporação

Escolha o modo que melhor se adapta ao seu layout.

Padrão

Incorporação inline dentro de uma seção da página

Popup

Abre como sobreposição modal ao ser acionado

Página Inteira

Ocupa uma página HTML inteira

Incorporação Padrão

Cole o código em qualquer página HTML. O formulário e exibido como um iframe inline.

Código de Incorporação

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

O redimensionamento automático vem do script do widget incluído no excerto. Mantenha-o e o iframe cresce e encolhe com o formulário à medida que os respondentes mudam de página.

Sem o script

Se preferir não carregar o widget, use um iframe simples com uma altura fixa. Nada é redimensionado, por isso escolha uma altura que sirva à sua página mais longa.

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

Opções

Adicione estes parâmetros a URL de incorporação para personalizar o comportamento.

Parâmetro	Descrição
?hideTitle=1	Oculta o título do formulário dentro da incorporação
?transparentBackground=1	Remove o fundo branco do frame de incorporação
?dynamicHeight=1	Redimensiona o iframe automaticamente para se ajustar a altura do formulário

Incorporação Popup

Acione o formulário a partir de qualquer botão ou link. Requer o carregamento do script do widget Fillio.

1. Adicionar o Script

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

2. Acionar com um Botão

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

Qualquer elemento com data-fillio-open recebe o estilo de botão predefinido do Fillio. Adicione a sua própria classe para o substituir.

Atributo	Descrição
data-fillio-open	ID do formulário (obrigatório)
data-fillio-width	Largura do popup em pixels
data-fillio-hide-title	Defina como 1 para ocultar o título do formulário

3. Acionar com JavaScript

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

Feche um popup a partir do seu próprio código a qualquer momento.

Fillio.closePopup('YOUR_FORM_ID');

Abrir a partir de uma ligação

Um fragmento de URL abre o popup assim que a página carrega, o que facilita chegar ao formulário a partir de um item de menu, de uma mensagem ou de outra página.

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

Comportamento do popup

Um popup tem 500 px de largura, a menos que defina outra, e nunca excede 90% da área visível em qualquer direção. Clicar no fundo ou premir Esc fecha-o, e onOpen e onClose são executados em cada extremo.

Incorporação em Página Inteira

Use este template HTML quando o formulário precisar preencher toda a janela do 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>

Opções

Adicione estes parâmetros a URL de incorporação para personalizar o comportamento.

Parâmetro	Descrição
?transparentBackground=1	Remove o fundo branco do frame de incorporação

Dica

Um formulário incorporado comporta-se exatamente como o alojado: a lógica condicional, as várias páginas e o tema do formulário funcionam todos dentro do iframe.