Como Incorporar Formulários em Qualquer Site

Você construiu um formulário. Ele está ótimo no editor. Agora precisa colocá-lo no seu site onde visitantes reais possam preenchê-lo. Este guia cobre as três formas de incorporar o Instaform em qualquer site, com instruções específicas para plataformas populares.

As Três Opções de Incorporação

O Instaform oferece três métodos de incorporação. Cada um tem diferentes vantagens dependendo do seu caso de uso.

Opção 1: Incorporação por Iframe

Um iframe incorpora seu formulário dentro de um quadro retangular na sua página. O formulário carrega em seu próprio contêiner, isolado dos estilos da sua página.

Melhor para:

• Páginas onde você quer que o formulário apareça como uma seção dedicada
• Situações onde precisa que o formulário seja visualmente separado do conteúdo ao redor
• Plataformas que suportam HTML mas restringem JavaScript

Como usar:

1. Abra seu formulário no Instaform e vá para Compartilhar ou Configurações de Embed
2. Copie o código de embed do iframe
3. Cole no HTML do seu site onde quer que o formulário apareça

O código do iframe parece algo assim:

<iframe src="https://app.instaform.co/forms/seu-id-do-formulario"
  width="100%" height="600" frameborder="0">
</iframe>

Dica: Defina width="100%" para que o formulário preencha seu contêiner em todos os tamanhos de tela. Para altura, comece com 600px e ajuste baseado no tamanho do seu formulário. Se seu formulário tem muitos campos, aumente a altura para evitar rolagem interna.

Opção 2: Incorporação por Script Tag

Um script tag incorpora seu formulário diretamente no DOM da página. O formulário renderiza inline, como se fosse uma parte nativa da sua página.

Melhor para:

• A integração visual mais limpa com seu site
• Melhor performance que iframes (sem sobrecarga de documento adicional)
• Páginas onde você quer que o formulário combine perfeitamente com o layout

Como usar:

1. Abra seu formulário no Instaform e vá para Configurações de Embed
2. Copie o código de embed do script tag
3. Cole no HTML da sua página onde quer que o formulário apareça

O embed por script tipicamente inclui um div contêiner e uma tag de script:

<div id="instaform-container"></div>
<script src="https://app.instaform.co/embed/seu-id-do-formulario.js"></script>

Dica: Embeds por script geralmente carregam mais rápido e parecem mais nativos que iframes. Se sua plataforma suporta JavaScript, essa é geralmente a melhor opção.

Opção 3: Incorporação por Popup

Um formulário popup aparece como um overlay quando disparado por clique de botão, timer ou evento de scroll. O formulário flutua sobre o conteúdo da sua página com fundo escurecido.

Melhor para:

• Formulários de captura de leads que não devem interromper o layout da página
• Botões de chamada para ação que abrem um formulário ao clicar
• Páginas onde o espaço é limitado e você não pode dedicar uma seção inteira ao formulário

Como usar:

1. Abra seu formulário no Instaform e vá para Configurações de Embed
2. Escolha a opção popup e copie o código
3. Adicione o script à sua página e conecte a um botão ou gatilho

Embeds popup criam uma experiência focada. Quando o overlay aparece, o fundo escurece e a atenção do visitante é direcionada inteiramente ao formulário. Isso pode melhorar taxas de conversão porque elimina distrações.

Instruções por Plataforma

WordPress

Usando o editor de blocos (Gutenberg):

1. Adicione um bloco "HTML Personalizado" onde quer o formulário
2. Cole seu código de embed iframe ou script
3. Visualize a página para verificar que o formulário aparece corretamente

Usando um page builder (Elementor, Beaver Builder, etc.):

1. Adicione um widget HTML ou Código ao seu layout
2. Cole o código de embed no widget
3. Salve e visualize

Usando o editor clássico:

1. Mude para a aba "Texto" (não "Visual")
2. Cole o código de embed na posição desejada
3. Volte para "Visual" para verificar o posicionamento

Dica para WordPress: Se você usa um plugin de cache (WP Super Cache, W3 Total Cache, etc.), limpe o cache depois de adicionar o código de embed. Páginas em cache podem não mostrar o formulário até o cache ser atualizado.

Shopify

1. Vá ao admin do Shopify e navegue até Loja Online > Páginas (ou edite uma página de produto)
2. No editor de texto, clique no ícone de código para mudar para visualização HTML
3. Cole seu código de embed
4. Salve a página

Para a homepage ou seções customizadas, edite os arquivos de template Liquid do seu tema. Adicione o código de embed dentro do template de seção apropriado.

Dica para Shopify: Se incorporar em uma página de produto, coloque o formulário abaixo da descrição do produto. Um caso de uso comum é um formulário "Solicitar Orçamento Personalizado" em produtos com preço variável.

Wix

1. No Editor Wix, adicione um elemento "Código de Incorporação" (encontrado em "Adicionar" > "Código de Incorporação" > "Incorporar HTML")
2. Cole seu código de embed iframe no elemento
3. Redimensione o elemento para caber no seu formulário

Dica para Wix: O Wix funciona melhor com embeds por iframe. Embeds por script tag podem ser restritos dependendo do seu plano Wix.

Squarespace

1. Adicione um "Bloco de Código" à sua página
2. Cole seu código de embed no bloco
3. Desative "Exibir Código" se solicitado
4. Salve e visualize

Dica para Squarespace: Use embeds por iframe no Squarespace. Blocos de código suportam bem HTML e iframes, mas alguns embeds JavaScript podem se comportar de forma inconsistente dependendo do seu template.

Sites HTML Estáticos

Se você gerencia seus próprios arquivos HTML, incorporar é direto:

1. Abra o arquivo HTML onde quer o formulário
2. Cole o código de embed na localização desejada no <body>
3. Salve e faça deploy

Para geradores de sites estáticos (Hugo, Jekyll, Gatsby, Astro), adicione o código de embed ao template da página ou arquivo de conteúdo. A maioria dos geradores estáticos suporta HTML cru em arquivos de conteúdo.

Aplicações React / Next.js / SPA

Para single-page applications, o método iframe é o mais simples:

function ContactForm() {
  return (
    <iframe
      src="https://app.instaform.co/forms/seu-id-do-formulario"
      width="100%"
      height="600"
      frameBorder="0"
      title="Formulário de Contato"
    />
  );
}

Para embeds por script tag em React, você precisará carregar o script dinamicamente usando um hook useEffect.

Estilizando Seu Formulário Incorporado

Independente do método de embed que escolher, a aparência do seu formulário é controlada pelas configurações de tema no Instaform. Antes de incorporar, personalize:

• Cores: Combine as cores dos botões e destaques do formulário com a paleta da marca do seu site
• Fontes: Escolha uma fonte que complemente a tipografia do seu site
• Fundo: Defina como transparente se quer que o formulário se misture com a página, ou escolha uma cor que crie uma seção distinta

Com embeds por script tag, o formulário herda algum contexto da página, facilitando alcançar um visual integrado. Embeds por iframe são mais isolados, então as configurações de tema se tornam sua principal ferramenta de estilização.

Considerações Responsivas

Todos os três métodos de embed produzem formulários responsivos por padrão. No entanto, há algumas coisas para observar:

Altura do iframe: No mobile, seu formulário pode precisar de mais espaço vertical porque os campos empilham em uma única coluna. Considere definir uma altura maior para o iframe ou usar um embed por script que se ajusta automaticamente.

Largura do contêiner: Garanta que o contêiner onde você coloca o código de embed não está restrito a uma largura estreita. Um formulário espremido em uma barra lateral de 300px não será confortável de preencher.

Teste em dispositivos reais. Depois de incorporar, carregue a página no seu celular e tablet. Verifique que os campos são tocáveis, o texto é legível e o botão de envio é alcançável sem rolagem estranha.

Escolhendo o Método Certo

Aqui está um guia rápido de decisão:

| Caso de uso | Método recomendado | |---|---| | Máxima compatibilidade (funciona em todo lugar) | Iframe | | Melhor integração visual | Script tag | | Captura de leads sem mudança de layout | Popup | | Plataforma restringe JavaScript | Iframe | | Performance é crítica | Script tag | | Formulário disparado por ação do usuário | Popup |

Se você não tem certeza, comece com o embed por iframe. Funciona em virtualmente toda plataforma, não requer JavaScript e fornece isolamento confiável dos estilos existentes da sua página.

Depois de Incorporar

Uma vez que seu formulário está no ar no seu site, configure notificações por email para ser alertado quando envios chegarem. Depois monitore a performance do formulário pelo painel de analytics do Instaform.

Observe sua taxa de conversão — a porcentagem de visitantes da página que enviam o formulário. Se está abaixo do esperado, revise seu design de formulário e considere as dicas de otimização de conversão para melhorar.

Seu formulário só é valioso quando as pessoas podem encontrá-lo e preenchê-lo. Incorporá-lo no seu site o coloca na frente da sua audiência onde ela já está.