Crie e incorpore formulários de inscrição

Publicado em: 16 de julho de 2026 · Última atualização: 12 de setembro de 2026 · Por Marcus Biel

Um formulário incorporado é inserido diretamente em uma página existente do site. Ele faz parte do conteúdo da página, em vez de aparecer sobre ele.

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

Este guia aborda as etapas específicas dos formulários incorporados. As funções de edição visual comuns a todos os formulários são explicadas no guia principal do criador de formulários de inscrição.

Crie um formulário incorporado

Abra “Signup Forms”, clique em “Create Form” e selecione “Embedded Form”. Digite um nome interno claro e avance 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 que indique sua localização ou finalidade, como “Newsletter da página inicial”, “Rodapé do blog” ou “Atualizações de produtos”.

Escolha um design inicial

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

• Calm note
• Coupon strip
• Dark editorial
• Minimal blue

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

Personalize o design do formulário incorporado

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

Para uma barra lateral ou um rodapé estreito, um design de uma coluna costuma ser mais fácil de ler. Em uma seção mais larga da página, um layout de duas colunas permite 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 assinante, os campos obrigatórios, os rótulos, as tags ocultas, um indicador de progresso e um contador opcional de assinantes. Depois, personalize separadamente a aparência do contêiner do formulário, dos campos e do botão de envio.

Abra “Page settings” para alterar o plano de fundo e as configurações gerais de design da área de edição do formulário incorporado. Leve em conta o restante do site. Um fundo transparente ou simples costuma se integrar de forma mais natural, enquanto um 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 Como usar o criador de formulários de inscrição.

Conecte 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 confirmação de inscrição (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.

Visualize e salve

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

Clique em “Save changes” para salvar a versão atual. Volte à visão geral dos formulários de inscrição quando estiver tudo pronto para incorporar o formulário.

Ative o formulário

O formulário incorporado precisa estar ativo para 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 precisar mais ficar disponível no site. A desativação tira o formulário do ar sem excluir seu design ou os dados dos relatórios anteriores.

Copie o código JavaScript

Clique em “Show Code Snippet” e abra a aba “JavaScript”. O Maildroppa fornece um script curto com 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 a versão atual salva do formulário por meio do ambiente de execução de formulários do Maildroppa. Quando você editar e salvar esse mesmo formulário no Maildroppa, o trecho de código existente continuará apontando para o mesmo ID. Não é necessário criar um novo formulário apenas para alterar seu texto ou design.

Adicione o formulário ao site

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

As etapas exatas dependem do sistema usado no 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 desenvolvido sob medida, adicione o script ao template ou à marcação da página correspondente.

Alguns editores de sites removem tags de script por motivos de segurança. Se o formulário não aparecer após a publicação da página, verifique primeiro se o editor preservou o script completo do Maildroppa. Talvez seja necessário usar a área específica para código personalizado do sistema ou pedir ajuda à pessoa responsável pelo site.

Não cole o mesmo trecho de código do formulário incorporado várias vezes na mesma página, a menos que a intenção seja exibir o mesmo formulário em vários locais e você já tenha testado essa configuração.

Use a aba HTML

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

Se escolher esse método, copie a marcação completa. Como os estilos e a implementação do site podem afetar uma integração HTML personalizada, teste com cuidado os campos, a validação, o envio e o fluxo de confirmação.

Para um formulário gerenciado normalmente pelo Maildroppa, o trecho de código JavaScript é a opção de integração mais curta e carrega a configuração pública atual do formulário pelo ID.

Teste o formulário incorporado

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

1. Confira 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 confirmação de inscrição (double opt-in).
6. Confirme o endereço de e-mail e revise a resposta final.
7. Verifique se o assinante e todas as tags ocultas aparecem corretamente no Maildroppa.

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

Atualize um formulário incorporado

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

Se precisar remover o formulário 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 trecho de código do site para que a página não contenha código sem uso.