Criar e incorporar formulários de inscrição

Published: 16 de julho de 2026 · Last updated: 21 de julho de 2026 · By Marcus Biel

Um formulário incorporado é colocado diretamente dentro de uma página existente no seu site. Ele permanece como parte do conteúdo ao redor, em vez de aparecer acima dele.

Os formulários incorporados funcionam bem em artigos de blog, páginas de destino no seu próprio site, seções de newsletter, barras laterais e rodapés. O local onde você adiciona o código do formulário determina onde ele será exibido.

Este guia aborda as etapas específicas dos formulários incorporados. As funções comuns de edição visual são explicadas no guia principal do Criador de Formulários de Inscrição.

Criar um formulário incorporado

Abra “Signup Forms”, clique em “Create Form” e selecione “Embedded Form”. Insira um nome interno claro e continue para o criador.

Você também pode editar um formulário existente clicando no nome dele na Visão geral dos formulários de inscrição.

O nome interno não é exibido automaticamente aos visitantes. Dê ao formulário um nome baseado na sua localização ou finalidade, por exemplo, “Newsletter da página inicial”, “Rodapé do blog” ou “Atualizações de produtos”.

Escolher um design inicial

Os formulários incorporados oferecem um formulário em branco, um formulário padrão e quatro modelos com design:

• Nota tranquila
• Faixa de cupom
• Editorial escuro
• Azul minimalista

Escolha o design que melhor combine com o espaço e o tom do site onde o formulário será exibido. Todos os designs iniciais podem ser completamente alterados após a seleção.

Criar o design do formulário incorporado

Use “Layout” e “Content” para organizar o formulário. Um formulário incorporado pode conter o formulário de inscrição junto com textos de apoio, imagens, listas, botões, links sociais, um contador de inscritos, espaçadores ou divisores.

Para uma barra lateral ou um rodapé estreito, um design de uma coluna geralmente é mais fácil de ler. Em uma seção mais ampla da página, um layout de duas colunas pode colocar uma explicação curta ou uma imagem ao lado dos campos.

Selecione o bloco do formulário de inscrição para escolher os campos do inscrito, os campos obrigatórios, os rótulos, as tags ocultas, um indicador de progresso e um contador de inscritos opcional. Em seguida, você pode estilizar separadamente o contêiner do formulário, os campos e o botão de envio.

Abra “Page settings” para alterar o plano de fundo e os padrões gerais de design da tela do formulário incorporado. Leve em consideração o site ao redor. Um plano de fundo transparente ou simples geralmente se integra de forma mais natural, enquanto um plano de fundo contrastante ajuda a destacar a oferta de inscrição.

As instruções completas sobre layouts, conteúdo, camadas, campos, tags, tipografia e aparência estão em Usar o Criador de Formulários de Inscrição.

Conectar o fluxo de inscrição

Use o controle de fluxo de inscrição no cabeçalho do criador para revisar o que acontece após o envio, qual e-mail de Double Opt-in é enviado e o que o visitante vê após a confirmação.

Você pode selecionar um fluxo existente, editar o fluxo atribuído ou criar um novo. Se o fluxo selecionado for compartilhado com outros formulários, lembre-se de que editá-lo também pode afetar esses formulários.

Visualizar e salvar

Clique em “Preview” para revisar o formulário completo antes de colocá-lo no seu site. Verifique a ordem dos campos, os rótulos, o espaço para erros, o texto do botão e a quantidade de conteúdo de apoio.

Clique em “Save changes” para armazenar a versão atual. Volte à Visão geral dos formulários de inscrição quando estiver pronto para incorporá-lo.

Ativar o formulário

O formulário incorporado precisa estar ativo antes que seu código público possa ser usado.

Se o formulário estiver inativo, abra o menu de ações de três pontos na Visão geral dos formulários de inscrição e escolha “Activate”. Um formulário ativo exibe a ação “Show Code Snippet”.

Desative o formulário quando ele não estiver mais disponível no seu site. A desativação coloca o formulário offline sem excluir seu design ou os dados de relatórios anteriores.

Copiar o código JavaScript

Clique em “Show Code Snippet” e abra a aba “JavaScript”. O Maildroppa fornece um script curto contendo o ID exclusivo do formulário.

O código segue esta estrutura:

<script async src="https://form.maildroppa.com/md-form-loader.js" data-md-form="[form-id]"></script>

Copie o código completo sem alterar o endereço do script ou o ID do formulário.

A opção JavaScript carrega o formulário salvo atual por meio do runtime de formulários do Maildroppa. Quando você editar e salvar posteriormente o mesmo formulário no Maildroppa, o snippet existente continuará apontando para esse ID de formulário. Você não precisa criar um novo formulário apenas para alterar seu texto ou design.

Adicionar o formulário ao seu site

Cole o script no local da página onde o formulário incorporado deve aparecer.

As etapas exatas dependem do sistema do seu site. Em um criador de páginas ou sistema de gerenciamento de conteúdo, use um bloco que aceite HTML personalizado ou código de script. Em um site personalizado, adicione o script ao modelo ou à marcação da página relevante.

Alguns editores de sites removem tags de script por motivos de segurança. Se o formulário não aparecer depois que a página for publicada, verifique primeiro se o editor preservou o script completo do Maildroppa. Talvez seja necessário usar a área dedicada a códigos personalizados do sistema ou pedir ajuda à pessoa que gerencia o site.

Não cole o mesmo snippet de formulário incorporado várias vezes na mesma página, a menos que você queira intencionalmente exibir o mesmo formulário em vários locais e tenha testado essa configuração.

Usar a aba HTML

A aba “HTML” fornece a marcação gerada do formulário. Essa opção é destinada a implementações personalizadas nas quais você deseja trabalhar diretamente com o HTML renderizado.

Copie a marcação completa se escolher esse método. Como uma integração HTML personalizada pode ser afetada pelos estilos e pela implementação do seu site, teste cuidadosamente os campos, a validação, o envio e o fluxo de confirmação.

Para o formulário normal gerenciado pelo Maildroppa, o snippet JavaScript é a integração mais curta e carrega a configuração pública atual do formulário pelo seu ID.

Testar o formulário incorporado

Publique ou visualize a página do site que contém o código. Em seguida, teste o formulário como um visitante faria:

1. Verifique se o formulário aparece na posição correta.
2. Visualize a página em uma tela larga e em uma tela estreita.
3. Preencha todos os campos obrigatórios.
4. Envie o formulário e revise a resposta.
5. Abra o e-mail de Double Opt-in.
6. Confirme o endereço e revise a resposta final.
7. Verifique se o inscrito e todas as tags ocultas aparecem corretamente no Maildroppa.

Se o formulário for mais largo que o contêiner do site, ajuste a largura do formulário, o layout das colunas, o preenchimento ou as configurações de empilhamento para dispositivos móveis no criador. Evite corrigir problemas de layout alterando o código gerado pelo Maildroppa.

Atualizar um formulário incorporado

Abra o mesmo formulário no Maildroppa, faça as alterações, visualize-as e clique em “Save changes”. O snippet JavaScript no seu site continuará usando o mesmo ID de formulário e carregará a configuração pública salva.

Se o formulário precisar ser removido temporariamente, desative-o na Visão geral dos formulários de inscrição. Se ele não for mais necessário, remova também o snippet do site para que a página não contenha código sem uso.