Como adicionar GorilaForms em qualquer landing page: Framer, Webflow e HTML

Um formulário para landing page que rastreia UTM automaticamente deveria funcionar em qualquer plataforma. O GorilaForms foi desenhado para isso: um embed de duas linhas que funciona em Framer, Webflow, WordPress, HTML puro ou qualquer construtor de páginas.

Este guia cobre a incorporação nas plataformas mais usadas por gestores de tráfego pago e agências de performance.

Como o embed do GorilaForms funciona?

O que são as duas linhas do embed?

O embed é composto por:

Um div com o atributo "data-gorila-form" definido com o ID do formulário
Um script que carrega o runtime do GorilaForms

<div data-gorila-form="SEU_FORM_ID"></div>
<script src="https://cdn.gorilaforms.app/embed.js" async></script>

O script detecta todos os divs com "data-gorila-form" na página, lê o ID, busca as configurações do formulário e renderiza o form dentro do div. Os UTMs são capturados da URL nesse momento.

O script pode ficar no head ou só no body?

Pode ficar em qualquer lugar. O atributo async garante que o script carrega sem bloquear a renderização da página. A recomendação é colocar o script antes do fechamento do ou no final do .

Rastreie cada lead com UTM completo

Formulários que capturam origem, campanha e anúncio enviando direto ao seu CRM.

Criar conta grátis

Incorporando no Framer

Como adicionar HTML customizado no Framer?

No editor do Framer, clique em Insert no canto superior esquerdo
Selecione Embed na lista de componentes
Arraste o bloco Embed para a seção onde o formulário deve aparecer
Clique duas vezes no bloco para abrir o editor de HTML
Cole o embed code do GorilaForms

O Framer renderiza o formulário dentro do bloco embed. Ajuste a largura e a posição do bloco como qualquer outro elemento no editor.

Como o formulário aparece no modo de preview do Framer?

O Framer Preview carrega o embed normalmente. Se o formulário não aparecer no editor (modo de design), é comportamento esperado — o Framer às vezes não executa scripts externos no canvas. No preview publicado funciona.

Os UTMs da URL chegam no formulário dentro do Framer?

Sim. O script do GorilaForms lê window.location.search no momento do carregamento. Se a URL da sua landing page no Framer tem UTMs, eles são capturados.

Incorporando no Webflow

Como adicionar o embed no Webflow?

No canvas do Webflow, clique em Add (ícone de mais)
Busque e adicione o componente Embed
Posicione o bloco Embed onde o formulário deve aparecer
Clique em Open Code Editor dentro do bloco
Cole o embed code do GorilaForms
Clique em Save & Close

O formulário aparece em preview dentro do editor do Webflow (diferente do Framer, o Webflow executa scripts externos no canvas).

📄

Material gratuito

Landing Pages que Convertem: Templates e Estrutura para Gestores

Estrutura, copy e posicionamento de formulário para maximizar conversão.

Como posicionar o formulário acima da dobra no Webflow?

Adicione o bloco Embed na seção de hero ou na primeira seção da página, antes da quebra de scroll. No Webflow, use a seção e o grid da mesma forma que qualquer outro componente. O formulário ocupa o espaço do div container.

O formulário precisa de CSS próprio?

O GorilaForms injeta os estilos do formulário dentro do shadow DOM, então não conflita com o CSS do Webflow. Você pode adicionar CSS customizado para o container via classe no Webflow, mas os estilos internos do formulário vêm do GorilaForms.

Incorporando em HTML puro

Qual a estrutura mínima para funcionar?

Em HTML puro, a incorporação mais simples é:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Sua Landing Page</title>
</head>
<body>

  <!-- Seu conteúdo aqui -->

  <div data-gorila-form="SEU_FORM_ID"></div>
  <script src="https://cdn.gorilaforms.app/embed.js" async></script>
</body>
</html>

Substitua SEU_FORM_ID pelo ID gerado na tela de publicação do GorilaForms.

Como colocar mais de um formulário na mesma página?

Se precisar de múltiplos formulários (por exemplo, um no topo e um no final), adicione um div com "data-gorila-form" para cada formulário. Podem ter o mesmo ID (mesmo formulário em posições diferentes) ou IDs diferentes.

O script identifica todos os divs e renderiza cada formulário no seu lugar.

Testando em qualquer plataforma

📬

Newsletter semanal

Receba guias como esse toda semana

Tráfego pago, rastreamento e conversão. Sem spam.

Como verificar se o UTM chegou?

Acesse sua landing page com UTMs na URL: https://suapage.com/?utm_source=meta&utm_medium=cpc&utm_campaign=teste
Preencha e envie o formulário
No dashboard do GorilaForms, vá em Leads
Abra o lead recém-criado e veja os campos de UTM preenchidos

Se os UTMs aparecem, a integração está funcionando.

O que fazer se o formulário não aparece?

Verifique se:

O embed code foi colado corretamente com o ID correto
O script está sendo carregado (abra o console do navegador e veja se há erro de rede)
O formulário está publicado no GorilaForms (rascunho não aparece no embed)

Se o script carregou mas o formulário não renderizou, veja se há um bloqueador de anúncios ativo. Em produção, os visitantes raramente têm bloqueadores que impedem CDNs de formulário.