--- title: "Opções de Incorporação de Formulário: iframe, Script e Popup" slug: form-embed-options description: "Incorpore formulários Instaform usando iframe, script inline ou popup modal. Configure posição, texto do botão, cores e escolha o método certo para o seu site." publishedAt: "2025-10-28" author: "Instaform Team" tags: ["incorporação", "formulários", "website", "integração"] locale: pt --- Construir um ótimo formulário é metade do trabalho. A outra metade é colocá-lo onde as pessoas vão realmente preenchê-lo. Um formulário parado no seu painel do Instaform não coleta envios — ele precisa estar no seu site, sua landing page, seu app, ou onde quer que seu público passe tempo. O Instaform oferece três métodos de incorporação, cada um projetado para um contexto diferente: iframe para incorporação padrão, tag de script para incorporação inline e popup para sobreposições modais. Veja como cada um funciona, quando usar e como configurar. ## Incorporação via iframe A incorporação via iframe é o método mais direto. Você copia um trecho de HTML, cola no código do seu site e o formulário aparece em um frame independente. ### Como Funciona Um iframe cria uma janela dentro da sua página que carrega o formulário dos servidores do Instaform. O formulário renderiza dentro dessa janela com seus próprios estilos, scripts e comportamento, completamente isolado do código da sua página. O CSS do seu site não afeta o formulário, e o CSS do formulário não afeta seu site. O código de incorporação parece uma tag iframe HTML padrão com a URL única do seu formulário como fonte. Você o cola em qualquer página HTML, bloco de conteúdo de CMS ou construtor de sites que aceite HTML personalizado. ### Quando Usar iframe **Plataformas CMS.** WordPress, Squarespace, Wix, Webflow e a maioria dos construtores de sites aceitam incorporação via iframe. Se você usa um CMS, iframe geralmente é o caminho de menor resistência. **Quando o isolamento de estilo importa.** Como iframes são isolados, o CSS do seu site não pode acidentalmente quebrar o layout do formulário, e o formulário não pode interferir na sua página. Esse isolamento é valioso quando seu site tem CSS complexo ou agressivo que pode conflitar com conteúdo incorporado. **Quando você quer zero JavaScript.** iframes são HTML puro. Nenhum JavaScript roda na sua página. Se você tem políticas de segurança de conteúdo rigorosas ou quer minimizar scripts, incorporação via iframe é a opção mais limpa. ### Configuração O principal a configurar são as dimensões do iframe. Defina a largura para corresponder à sua área de conteúdo — tipicamente 100% para preencher o espaço disponível. Defina a altura para acomodar o comprimento do formulário. Se a altura for muito curta, o formulário terá sua própria barra de rolagem dentro do iframe. Se for muito alta, você terá espaço vazio abaixo do formulário. Para sites responsivos, defina a largura como 100% e use uma altura razoável. A maioria dos formulários funciona bem com 600-800px de altura, mas formulários com muitos campos ou [lógica condicional](/blog/conditional-logic-guide) que revela seções adicionais podem precisar de mais. ### Limitações iframes têm altura fixa, então se o comprimento do formulário muda dinamicamente — devido à lógica condicional mostrando/ocultando campos — o iframe pode mostrar barras de rolagem ou ter espaço vazio extra. A incorporação via tag de script lida melhor com isso. iframes também podem parecer levemente diferentes entre navegadores e dispositivos. A borda, o estilo da barra de rolagem e a renderização podem variar. Definir `border: none` no iframe e testar em diferentes navegadores captura a maioria das inconsistências visuais. ## Incorporação via Tag de Script (Inline) A incorporação via tag de script injeta o formulário diretamente no DOM da sua página. Em vez de carregar em um frame isolado, o formulário se torna parte da sua página — sentado ao lado dos seus cabeçalhos, parágrafos e imagens como se você o tivesse construído ali. ### Como Funciona Você cola um pequeno trecho de JavaScript na sua página. Quando a página carrega, o script cria os elementos do formulário diretamente no HTML da sua página no local onde você colocou o trecho. Os estilos do formulário são escoped para evitar conflitos com sua página, mas o formulário faz genuinamente parte da estrutura do documento da sua página. ### Quando Usar Tag de Script **Quando você precisa de altura dinâmica.** Como o formulário faz parte do DOM da sua página, sua altura se ajusta naturalmente conforme o conteúdo muda. Se lógica condicional revela cinco novos campos, a página cresce. Se uma seção colapsa, a página encolhe. Sem barras de rolagem, sem espaço vazio, sem cálculos de altura. **Quando você quer integração visual perfeita.** Um formulário inline parece mais nativo que um iframe. Não há limite sutil de frame, nenhum potencial para barras de rolagem duplas, nenhuma lacuna visual entre o formulário e o conteúdo ao redor. O formulário flui com a página. **Quando você precisa de interação com a página.** Como o formulário está no DOM da página, ele pode interagir com o JavaScript da página se necessário. Parâmetros de URL podem pré-preencher campos do formulário. Analytics em nível de página podem rastrear interações do formulário. Scripts personalizados podem responder a eventos do formulário. ### Configuração Coloque o trecho do script onde você quer que o formulário apareça. Em uma página WordPress, use um bloco de HTML Personalizado. Em um construtor de landing page, use uma seção HTML. Em HTML puro, cole dentro de um div container. O formulário automaticamente assume a largura do seu container pai, então controle a largura controlando o container. Um formulário dentro de um div centralizado com `max-width: 600px` terá 600px de largura. Um formulário dentro de uma seção de largura total vai se esticar de ponta a ponta. ### Considerações Incorporações via script rodam JavaScript na sua página, o que significa que estão sujeitas às políticas de segurança de conteúdo da sua página. Se seu site bloqueia scripts inline ou fontes de script externas, você precisará liberar o domínio do Instaform. Incorporações via script também podem, em casos raros, ter conflitos de estilo com resets CSS muito agressivos ou frameworks na sua página. Se seu site usa um framework CSS que define estilos globais em todos os inputs, botões ou formulários, esses estilos podem vazar para o formulário incorporado. Testar na sua página real (não apenas em uma página de teste em branco) captura esses problemas. ## Incorporação via Popup (Modal) A incorporação via popup exibe seu formulário como uma sobreposição modal acionada por um clique de botão. O formulário não é visível na página inicialmente — um botão flutuante aparece, e clicar nele abre o formulário em um modal centralizado ou posicionado no canto. ### Como Funciona Você cola um trecho que cria um botão gatilho na sua página. O botão flutua em uma posição fixa — tipicamente um canto da viewport. Quando um visitante clica no botão, o formulário desliza ou aparece como uma sobreposição modal, escurecendo o fundo. O visitante preenche o formulário, envia, e o modal fecha, retornando-o à página. ### Quando Usar Popup **Quando o formulário não é o conteúdo principal da página.** Se a página é um post de blog, uma página de produto ou uma landing page onde o conteúdo principal não é o formulário, um popup mantém o formulário disponível sem dominar o layout. Visitantes que querem o formulário podem acessá-lo. Visitantes que não querem podem ignorá-lo. **Para feedback e suporte.** Um botão persistente "Feedback" ou "Ajuda" no canto de cada página permite que visitantes acessem um formulário de feedback ou ticket de suporte de qualquer lugar do seu site. Está sempre disponível sem estar sempre visível. **Para captura de leads em páginas de conteúdo.** Um post de blog sobre seu setor pode converter visitantes em leads, mas incorporar um formulário completo no meio do artigo interrompe a experiência de leitura. Um popup acionado por um botão no canto oferece conversão sem interrupção. **Para formulários multi-página em sites de página única.** Se seu site é de página única (comum para portfólios, eventos e pequenos negócios), um formulário popup evita rolagem desconfortável até uma seção de contato. O botão está sempre visível, independente de onde o visitante está na página. ### Opções de Posição O botão do popup pode ser posicionado em quatro locais: **Inferior-direita** é a posição mais comum e esperada. É onde widgets de chat ao vivo tipicamente ficam, então visitantes estão condicionados a olhar ali para opções de ajuda e contato. Esta é a opção padrão e recomendada para a maioria dos casos de uso. **Inferior-esquerda** é a alternativa quando inferior-direita está ocupada — talvez você já tenha um widget de chat ali. Inferior-esquerda é visível e acessível sem conflitar com outros elementos flutuantes. **Superior-direita** é incomum mas útil para anúncios ou pesquisas onde você quer maior visibilidade. Um botão posicionado no topo tem mais chance de ser notado imediatamente, o que pode ser bom para pesquisas com tempo limitado ou solicitações urgentes de feedback. **Superior-esquerda** é a posição menos comum. Pode funcionar para idiomas com leitura da esquerda para direita onde o olho naturalmente começa no superior-esquerdo, mas a maioria dos usuários não está condicionada a encontrar elementos interativos ali. ### Personalizando o Botão O botão gatilho do popup é personalizável de duas formas. **Texto do botão** controla o que o botão diz. "Fale Conosco" para formulários de leads. "Feedback" para formulários de pesquisa. "Precisa de Ajuda?" para formulários de suporte. "Inscreva-se" para inscrições em eventos. Mantenha curto — duas a três palavras no máximo. O botão precisa ser legível em tamanhos pequenos em dispositivos móveis. **Cor do botão** controla a cor de fundo do botão. Combine com a cor primária da sua marca para consistência, ou use uma cor contrastante para destacá-lo contra o design da sua página. Um botão brilhante em uma página sóbria chama atenção. Um botão sóbrio em uma página brilhante se mistura até o visitante estar pronto para procurá-lo. O modal em si herda o [tema personalizado](/blog/custom-themes-branding) do seu formulário, então as cores, fontes e estilos que você configurou para o formulário se aplicam quando ele abre. O botão os traz; o tema os recebe. ## Escolhendo o Método Certo A árvore de decisão é direta. **O formulário é o propósito principal da página?** Use incorporação via tag de script (inline). O formulário é o centro das atenções, com tamanho dinâmico e visualmente integrado. **O formulário é um elemento entre muitos na página?** Use incorporação via iframe. É simples de implementar, isolado dos estilos da página e funciona em todas as plataformas. **O formulário deve estar disponível mas não imediatamente visível?** Use incorporação via popup. O botão gatilho fornece acesso sem consumir espaço de layout. ### Combinando Métodos Você não está limitado a um método. Um site pode usar incorporação via tag de script para a página de Contato (onde o formulário é o propósito da página), incorporação via iframe para um widget na barra lateral do blog (onde o formulário é complementar), e incorporação via popup em páginas de produto (onde o formulário deve estar disponível mas não dominante). Cada página tem prioridades diferentes, e cada método de incorporação atende prioridades diferentes. Combine o método ao contexto. ## Considerações Técnicas ### Performance Incorporações via iframe são as mais leves na sua página — carregam o formulário em um contexto separado que não compete com a renderização da sua página. Incorporações via script adicionam execução de JavaScript ao carregamento da página, embora o impacto seja mínimo. Incorporações via popup carregam o formulário no gatilho em vez de no carregamento da página, significando que têm zero impacto de performance até o botão ser clicado. ### Responsividade Mobile Todos os três métodos de incorporação são responsivos. iframes escalam com a largura do container. Incorporações via script se adaptam ao elemento pai. Popups se exibem como modais tela cheia em dispositivos móveis, proporcionando uma experiência de formulário focada e sem distrações em telas pequenas. ### SEO Incorporações via tag de script (inline) colocam o conteúdo do formulário no DOM da sua página, o que significa que mecanismos de busca podem ver os campos do formulário — potencialmente benéfico para páginas onde o formulário é o principal call to action. iframes e popups mantêm o conteúdo do formulário fora do DOM da página, o que é neutro para SEO. ### Múltiplos Formulários Você pode incorporar múltiplos formulários na mesma página usando qualquer combinação de métodos. Dois formulários inline em seções diferentes. Um iframe na barra lateral e um popup no canto. Um formulário inline de leads na seção hero e um formulário popup de feedback no footer. Cada formulário opera independentemente. ## Começando Construir seu formulário no [construtor drag-and-drop](/blog/drag-and-drop-form-builder), aplicar seu [tema de marca](/blog/custom-themes-branding) e incorporá-lo no seu site é um fluxo de trabalho que leva minutos do início ao fim. As opções de incorporação estão disponíveis no painel de configurações do formulário assim que seu formulário estiver pronto para publicar. Escolha o método que combina com sua página. Cole o código. Seu formulário está no ar.