Um formulário de contato que existe apenas em uma página independente é uma oportunidade perdida. Os formulários de contato mais eficazes aparecem onde os visitantes já estão — em páginas de produtos, posts de blog, landing pages, barras laterais e rodapés — sem exigir que os visitantes naveguem até uma página de contato separada.
Este guia aborda os dois principais métodos de incorporação (snippet JavaScript e iFrame), quando usar cada um e como implementá-los corretamente nas plataformas de sites mais comuns.
Dois Métodos de Incorporação: Snippet JS vs. iFrame
Snippet JavaScript (Recomendado para a Maioria dos Casos)
Um embed JavaScript é uma única tag <script> que você cola no seu HTML. O script é executado no navegador do visitante e renderiza o formulário inline, correspondendo ou se adaptando ao layout da sua página.
Vantagens:
- Pode corresponder às fontes e ao estilo geral da página ao redor
- Pode enviar sem recarregar a página completa (melhor UX)
- Pode crescer ou diminuir em altura dinamicamente com base no estado do formulário
- Pode se comunicar com a página pai (analytics, rastreamento de conversões)
- Geralmente mais rápido de carregar do que um iFrame porque não cria um contexto de navegação separado
Limitações:
- Requer que o site host permita scripts externos (a maioria permite)
- O JavaScript deve estar habilitado no navegador do visitante
- Requer testes cuidadosos para garantir que o formulário não conflite com os scripts existentes da página
iFrame
Um iFrame incorpora o formulário de contato como uma "janela" separada dentro da sua página. O formulário é executado em um contexto completamente isolado.
Vantagens:
- Zero conflito com o CSS ou JavaScript do site host — está totalmente isolado
- Funciona em plataformas que restringem scripts externos (alguns ambientes de CMS)
- Não requer JavaScript na página host
Limitações:
- A altura deve ser fixa ou gerenciada com JavaScript; iFrames não redimensionam automaticamente com base no conteúdo
- O estilo é isolado — o formulário não herda nenhuma fonte ou cor da página pai, a menos que configurado na ferramenta de formulário
- Alguns rastreamentos de analytics são mais difíceis através dos limites do iFrame
- Pode parecer visualmente desconectado da página ao redor
Quando usar iFrame:
- A plataforma de hospedagem restringe JavaScript externo
- Você está incorporando em uma plataforma onde conflitos de script são frequentes e difíceis de depurar
- O formulário está sendo incorporado em um e-mail ou em um ambiente que não pode executar JavaScript
Incorporação no WordPress
Método 1: Bloco HTML com Snippet JS
No editor de blocos do WordPress (Gutenberg):
- Clique em + para adicionar um novo bloco
- Pesquise e selecione HTML Personalizado
- Cole seu código de embed JavaScript no bloco
Isso funciona de forma confiável para a maioria dos sites WordPress. O script é executado quando a página carrega e renderiza o formulário no lugar do bloco.
Importante: se o seu site WordPress usa um plugin de cache (WP Rocket, W3 Total Cache, etc.), adicione a página do formulário à lista de exclusão de cache. Páginas em cache podem não executar scripts incorporados corretamente após o envio de um formulário.
Método 2: Bloco iFrame
No editor de blocos:
- Adicione um bloco HTML Personalizado
- Cole o código iFrame:
<iframe src="https://seuformulario.url" width="100%" height="600" frameborder="0"></iframe>
Ajuste o atributo height com base na altura real do seu formulário. Se o formulário tiver erros de validação que expandam sua altura visível, o iFrame mostrará uma barra de rolagem dentro da janela incorporada — o que parece quebrado. Teste todos os estados do formulário (vazio, erro, sucesso) e defina a altura para o estado mais alto.
Método 3: Área de Widget ou Rodapé
Para um formulário de contato no rodapé ou na barra lateral, use um widget de Texto:
- Vá para Aparência → Widgets
- Adicione um widget HTML Personalizado à sua barra lateral ou rodapé
- Cole o código de embed
Incorporação no Webflow
O componente de embed nativo do Webflow suporta JavaScript:
- No designer do Webflow, arraste um componente Embed para sua página
- Clique no componente e abra o editor de código de embed
- Cole seu snippet JavaScript
- Clique em Save & Close
- Publique a página
Para embeds de iFrame, o mesmo processo se aplica — cole a tag iFrame no componente Embed.
Nota sobre o Webflow: o modo de pré-visualização do Webflow dentro do designer pode não executar scripts externos. Publique no seu domínio de staging ou produção para testar o formulário.
Incorporação no Squarespace, Wix e Construtores Similares
A maioria dos construtores de sites tem um bloco de "código personalizado" ou "embed HTML":
- Squarespace: Adicione um bloco Código a qualquer página e cole o snippet de embed
- Wix: Insira um elemento HTML iframe (via Adicionar → Embed → HTML iframe) e cole seu código iFrame ou JS
- Showit: Use um widget HTML na tela de design
Nota sobre o Wix: o contêiner de embed do Wix é tecnicamente um iFrame mesmo quando você cola um snippet JavaScript. Scripts externos dentro de um embed HTML do Wix são executados em um contexto de iframe isolado. Isso significa que o formulário funcionará, mas a integração de analytics entre páginas é limitada.
Incorporação em um Site HTML Personalizado
Para sites HTML/CSS simples ou sites criados com um gerador estático (Hugo, Jekyll, Eleventy):
Snippet JavaScript: cole a tag <script> logo antes de </body> em qualquer página onde você queira que o formulário apareça. Adicione um placeholder <div id="contact-form"></div> onde o formulário deve ser renderizado se o script precisar de um elemento-alvo.
iFrame: cole a tag <iframe> diretamente no HTML da página no local onde o formulário deve aparecer.
Considerações de Performance de Carregamento
Um formulário de contato incorporado não deve deixar sua página mais lenta. Fique atento a:
Carregamento assíncrono: a tag de script deve incluir o atributo async para não bloquear o carregamento do conteúdo principal da página.
<script src="https://cdn.example.com/form.js" data-key="sua-chave" async></script>
Carregamento lazy: para formulários abaixo da dobra, alguns sistemas de embed suportam lazy loading — o script do formulário não carrega até que o visitante role próximo ao formulário. Isso melhora o tempo de carregamento inicial da página.
Entrega via CDN: o JavaScript do formulário deve ser servido a partir de uma rede de distribuição de conteúdo (CDN) com pontos de borda globais, para que o tempo de carregamento seja rápido para os visitantes independentemente de sua localização.
Rastreamento de Conversões Após a Incorporação
Se você usa o Google Analytics, Meta Pixel ou outra ferramenta de analytics, configure o rastreamento de envio de formulário para disparar quando o formulário incorporado for enviado com sucesso.
Para embeds JavaScript, o provedor do formulário deve suportar um callback ou evento que dispara no envio bem-sucedido:
// Exemplo — a sintaxe real varia por provedor
onContactFormSubmit(function() {
gtag('event', 'contact_form_submit', { event_category: 'engagement' });
});
Para embeds de iFrame, use window.postMessage para comunicar o evento de envio do iFrame para a página pai, depois dispare o evento de analytics na página pai. Isso é tecnicamente mais complexo — verifique se o seu provedor de formulário suporta isso nativamente.
Testando seu Formulário Incorporado
Antes de publicar, teste:
- Envio vazio — confirme que a validação de campos obrigatórios é acionada corretamente
- E-mail inválido — confirme que o campo de e-mail exibe um erro de validação
- Envio bem-sucedido — confirme que o estado de sucesso aparece e o envio é recebido
- Mobile — abra a página em um celular real e teste os alvos de toque, o comportamento do teclado e a rolagem do formulário
- Com cache habilitado — se seu site usa cache, teste se o formulário funciona em uma página carregada a partir do cache
- Com uma extensão de navegador — alguns bloqueadores de anúncios bloqueiam scripts externos; teste em um perfil de navegador limpo
Como o Nura24 Fornece a Incorporação do Formulário de Contato
O módulo de página de contato do Nura24 gera tanto um snippet de embed JavaScript quanto um código de embed iFrame a partir do dashboard, prontos para colar em qualquer site sem precisar de código. O script do widget carrega de forma assíncrona e é servido a partir de um CDN. As configurações visuais — cor, fonte, border radius, modo escuro/claro — são configuradas no dashboard do Nura24 e aplicadas automaticamente ao formulário incorporado, de modo que atualizar a identidade visual em um lugar a atualiza em todos os lugares onde o formulário está incorporado. Os envios são roteados para o sistema de ticketing do Nura24 e opcionalmente acionam notificações por e-mail para agentes e e-mails de resposta automática para o visitante.