Como acionar o formulário Fillout pelos botões nativos do Webflow

O script embed/v1 do Fillout percorre os elementos que possuem o atributo data-fillout-id. Se o elemento é uma div, ele trata aquilo como container e monta o formulário ali, além de criar o botão flutuante quando o tipo é slider ou popup. Se o elemento não é uma div, ele apenas registra o disparo no clique. Essa diferença é o que permite usar o botão nativo do Webflow como gatilho.

Ganhos diretos

• O formulário só é baixado quando a pessoa clica, o que tira peso relevante de JavaScript da primeira carga.
• O CTA passa a seguir a identidade visual do site, sem o botão flutuante padrão do Fillout.
• É possível ter vários CTAs na mesma página apontando para o mesmo formulário.
• Os parâmetros de campanha continuam sendo herdados da URL, porque não existe recarregamento de página.

1. 1

   Remova o embed antigo da página

   Localize o bloco Embed que contém a div com data-fillout-id e o script. Ele será substituído pelo script único no rodapé mais os atributos no botão.

2. 2

   Inclua o script uma vez no rodapé do projeto

   Project settings, aba Custom code, campo Footer code. Cole apenas a tag script. Se o site tiver páginas com código próprio, confirme que o script não está repetido.

3. 3

   Selecione o botão que vai abrir o formulário

   Pode ser um Button ou um Link Block já existentes. O importante é que o elemento não seja uma div. Não use Div Block nem Section como gatilho.

4. 4

   Adicione os atributos personalizados

   Com o elemento selecionado, abra Element settings e vá em Custom attributes. Adicione um par nome e valor para cada atributo da tabela da unidade correspondente.

5. 5

   Ajuste o link do botão

   No campo de link do Button ou Link Block, use a URL # para evitar navegação. Se o botão apontar para outra página, o clique leva embora antes de o formulário abrir.

6. 6

   Publique e valide no domínio publicado

   Custom code do projeto não roda no preview do Designer. O teste precisa acontecer no site publicado, incluindo o subdomínio webflow.io quando usado como homologação.

Script único, no rodapé do projeto

<script src="https://server.fillout.com/embed/v1/"></script>

Project settings > Custom code > Footer code. Uma vez por projeto.

Atributos comuns a todas as unidades

Embed atual, a ser removido da página

<div data-fillout-id="7z8nKUGg5Jus" data-fillout-embed-type="slider" data-fillout-button-text="Pré-inscrição 2027" data-fillout-button-color="#F04E25" data-fillout-button-size="medium" data-fillout-button-float="bottom-left" data-fillout-slider-direction="right" data-fillout-inherit-parameters data-fillout-domain="forms.novosconceitos.com.br" data-fillout-popup-size="medium"></div>
<script src="https://server.fillout.com/embed/v1/"></script>

Atributos a aplicar no botão

Referência do HTML publicado

<a href="#" class="button"
   data-fillout-id="7z8nKUGg5Jus"
   data-fillout-embed-type="slider"
   data-fillout-slider-direction="right"
   data-fillout-domain="forms.novosconceitos.com.br"
   data-fillout-popup-size="medium"
   data-fillout-inherit-parameters="true">Pré-inscrição 2027</a>

Este HTML é o resultado esperado. No Designer, o mesmo é obtido pelo painel de atributos personalizados.

Embed atual, a ser removido da página

<div data-fillout-id="b1NZtHXriRus" data-fillout-embed-type="slider" data-fillout-slider-direction="right" data-fillout-inherit-parameters data-fillout-domain="forms.novosconceitos.com.br" data-fillout-popup-size="medium"></div>
<script src="https://server.fillout.com/embed/v1/"></script>

Atributos a aplicar no botão

Referência do HTML publicado

<a href="#" class="button"
   data-fillout-id="b1NZtHXriRus"
   data-fillout-embed-type="slider"
   data-fillout-slider-direction="right"
   data-fillout-domain="forms.novosconceitos.com.br"
   data-fillout-popup-size="medium"
   data-fillout-inherit-parameters="true">Faça sua pré-inscrição</a>

Embed atual, a ser removido da página

<div data-fillout-id="po77tNaSfGus" data-fillout-embed-type="slider" data-fillout-slider-direction="right" data-fillout-inherit-parameters data-fillout-domain="forms.novosconceitos.com.br" data-fillout-popup-size="medium"></div>
<script src="https://server.fillout.com/embed/v1/"></script>

Atributos a aplicar no botão

Referência do HTML publicado

<a href="#" class="button"
   data-fillout-id="po77tNaSfGus"
   data-fillout-embed-type="slider"
   data-fillout-slider-direction="right"
   data-fillout-domain="forms.novosconceitos.com.br"
   data-fillout-popup-size="medium"
   data-fillout-inherit-parameters="true">Faça sua pré-inscrição</a>

Embed atual, a ser removido da página

<div data-fillout-id="pmmyY4NaCvus" data-fillout-embed-type="slider" data-fillout-slider-direction="right" data-fillout-inherit-parameters data-fillout-domain="forms.novosconceitos.com.br" data-fillout-popup-size="medium"></div>
<script src="https://server.fillout.com/embed/v1/"></script>

Atributos a aplicar no botão

Referência do HTML publicado

<a href="#" class="button"
   data-fillout-id="pmmyY4NaCvus"
   data-fillout-embed-type="slider"
   data-fillout-slider-direction="right"
   data-fillout-domain="forms.novosconceitos.com.br"
   data-fillout-popup-size="medium"
   data-fillout-inherit-parameters="true">Faça sua pré-inscrição</a>

Embed atual, a ser removido da página

<div data-fillout-id="nhcZKpt3hpus" data-fillout-embed-type="slider" data-fillout-slider-direction="right" data-fillout-inherit-parameters data-fillout-domain="forms.novosconceitos.com.br" data-fillout-popup-size="medium"></div>
<script src="https://server.fillout.com/embed/v1/"></script>

Atributos a aplicar no botão

Referência do HTML publicado

<a href="#" class="button"
   data-fillout-id="nhcZKpt3hpus"
   data-fillout-embed-type="slider"
   data-fillout-slider-direction="right"
   data-fillout-domain="forms.novosconceitos.com.br"
   data-fillout-popup-size="medium"
   data-fillout-inherit-parameters="true">Faça sua pré-inscrição</a>

• Elemento errado: se o gatilho for uma div, o script volta a criar o botão flutuante e a montar o formulário no carregamento. Use Button ou Link Block.
• Link ativo: um botão apontando para uma página real navega antes de o painel abrir. Use # como destino.
• Atributo booleano sem valor: o Webflow descarta atributos vazios na publicação. Use true em data-fillout-inherit-parameters.
• Elementos criados depois do carregamento, como itens de slider, abas ou modais montados por script, podem não receber o disparo. Nesses casos, prefira posicionar o CTA em conteúdo estático ou reexecutar a inicialização após a criação do elemento.
• Cópia de componente: ao duplicar um botão em Symbol ou Component, os atributos vão junto. Confirme se a unidade correta está no data-fillout-id de cada projeto.
• Teste no Designer: custom code do projeto não roda no preview. Sempre valide no site publicado.

1. 1

   Abra a página publicada com o DevTools

   Aba Network, filtro por fillout, com o cache desativado.

2. 2

   Confirme o carregamento zero antes do clique

   Somente o arquivo embed/v1 deve aparecer. Nenhuma requisição para forms.novosconceitos.com.br pode ocorrer enquanto ninguém clicar.

3. 3

   Clique no CTA

   O painel deve entrar pela direita, com o formulário da unidade correta, e o restante da página deve continuar navegável ao fechar.

4. 4

   Verifique a herança de parâmetros

   Acesse a página com utm_source=teste na URL, abra o formulário e confirme, no Fillout, que o parâmetro chegou junto com o envio.

5. 5

   Compare o peso da página

   Na aba Network, anote o total transferido antes e depois da mudança. A diferença é o ganho entregue ao cliente.