---
title: "Como Incorporar Formulários em Qualquer Site"
slug: embed-forms-any-website
description: "Aprenda como incorporar formulários em qualquer site usando iframe, script tag ou popup. Guia passo a passo para WordPress, Shopify, Wix e sites HTML."
publishedAt: "2026-01-15"
author: "Instaform Team"
tags: ["incorporação", "formulários", "tutorial"]
locale: pt
---

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:

```html
<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:

```html
<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](/blog/boost-form-conversion-rate) 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:

```jsx
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](/blog/email-notifications-form-submissions) 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](/blog/form-design-mistakes) e considere as [dicas de otimização de conversão](/blog/boost-form-conversion-rate) 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á.