Crie e exiba formulários pop-up

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

Um pop-up é exibido sobre o conteúdo do seu site. Ele coloca a oferta de inscrição diretamente no campo de visão do visitante, mantendo a página ao fundo.

Os pop-ups são úteis para oferecer newsletters, descontos, inscrições em eventos, iscas digitais e outras chamadas para ação específicas. Como interrompem a navegação normal na página, o momento e a frequência de exibição são tão importantes quanto o design.

Este guia explica as configurações específicas dos pop-ups. Layouts, blocos de conteúdo, campos de assinante, tags, tipografia, camadas e fluxos de inscrição são abordados no guia principal do criador de formulários de inscrição.

Crie um pop-up

Abra “Signup Forms”, clique em “Create Form” e selecione “Popup”. Digite um nome interno claro e avance para o criador.

Para editar um pop-up existente, clique no nome dele na visão geral dos formulários de inscrição.

Use um nome que identifique a oferta ou o local de exibição, como “Pop-up de desconto da página inicial”, “Pop-up de inscrição no webinar” ou “Pop-up para baixar o guia”. O nome interno não é exibido automaticamente aos visitantes.

Escolha um modelo de pop-up

Para pop-ups, há um formulário em branco, um formulário padrão e quatro modelos prontos:

• Clean discount
• Warm guide
• Dark webinar
• Soft community

Escolha um modelo com tamanho e estrutura de conteúdo adequados à oferta. Depois, é possível alterar todos os textos, campos, cores, imagens, espaçamentos e layouts.

Personalize o design do pop-up

Use o criador visual para organizar o pop-up. É possível combinar o formulário de inscrição com textos, imagens, vídeos, listas, botões, links de redes sociais, um contador de assinantes, espaçadores e divisores.

Mantenha a mensagem principal curta o suficiente para ser entendida de imediato. Um título claro, uma explicação breve e um botão de envio específico costumam ser mais eficazes do que várias mensagens disputando a atenção.

Selecione o bloco do formulário de inscrição para configurar campos, informações obrigatórias, tags ocultas, indicador de progresso, contador de assinantes, campos de entrada e botão de envio. Abra “Page settings” para alterar o fundo geral do pop-up e as configurações padrão de aparência.

O pop-up aparece sobre o site com um controle para fechá-lo. Deixe espaço visual suficiente ao redor dos textos e campos importantes para que o formulário continue fácil de usar em uma tela pequena.

Configure o comportamento do pop-up

Selecione o bloco do formulário de inscrição e abra “Widget Settings”. Essa seção controla quando o pop-up é exibido e com que frequência um visitante pode vê-lo.

Atraso de exibição

“Display Delay” define quantos segundos o Maildroppa aguarda antes de exibir o pop-up na página do site em que ele foi incorporado.

Digite 0 para exibi-lo sem atraso adicional. Use um valor maior para dar aos visitantes tempo de ler a página antes que a oferta apareça. O criador aceita um atraso de até 86.400 segundos.

Escolha o atraso de acordo com a página. Um atraso curto pode ser adequado em uma página dedicada a uma campanha, enquanto um atraso maior pode causar menos interrupção em um artigo.

Frequência de exibição

“Display Frequency” controla o intervalo após o qual o pop-up pode ser exibido novamente ao mesmo visitante. As opções disponíveis são:

• Always — sempre
• Once per hour — uma vez por hora
• Once per day — uma vez por dia
• Once per week — uma vez por semana
• Once per month — uma vez por mês

Use “Always” com cuidado. Um pop-up que interrompe repetidamente o mesmo visitante pode causar frustração. Uma frequência diária ou semanal costuma ser um ponto de partida melhor para uma oferta geral do site.

A frequência é salva no navegador do visitante. Por isso, testar em outro navegador, em uma janela de navegação anônima ou após limpar o armazenamento do navegador pode produzir um resultado diferente.

Use a intenção de saída

Ative “Exit Intent Popup” para abrir o pop-up depois que o visitante mover o ponteiro para fora da área da página, indicando que talvez esteja prestes a sair.

Quando a intenção de saída está ativada, o pop-up aguarda esse comportamento em vez de seguir a exibição normal com atraso. A frequência de exibição selecionada continua impedindo que ele seja exibido novamente antes do intervalo definido.

A intenção de saída se baseia no movimento do ponteiro e, por isso, é relevante principalmente em navegadores de computadores de mesa e notebooks. Dispositivos com tela sensível ao toque não fornecem o mesmo sinal de saída. Garanta sempre que os visitantes em dispositivos móveis também possam encontrar a oferta de inscrição na própria página ou em outro formulário adequado.

Abra um pop-up manualmente a partir de um elemento da página

Um pop-up pode abrir quando um visitante clica em um botão, imagem ou link específico do site. Esse é o acionador manual por clique. Ele é diferente de “Exit Intent Popup”, que reage quando o visitante move o ponteiro para fora da página.

Para configurar e instalar o acionador manual por clique:

1. Abra o pop-up no criador de formulários de inscrição.
2. Clique no bloco do formulário de inscrição na área de edição e abra “Settings” à direita.
3. Expanda “Widget Settings” e ative “Open popup when a customer clicks a page element”.
4. Clique em “Save changes”.
5. Volte à visão geral dos formulários de inscrição e ative o pop-up, caso esteja inativo.
6. Clique em “Show Code Snippet” na linha desse pop-up.

A caixa de diálogo contém os dois valores necessários no site:

1. Copie o código completo da aba “JavaScript” e adicione-o à página do site em que o pop-up deve estar disponível.
2. Abaixo do código, copie o ID exibido em “Add this ID to element from which you want to manually trigger Popup”.
3. Adicione esse valor exato ao atributo id do botão, imagem ou link que deve abrir o pop-up.

O ID segue este formato:

maildroppa-popup-btn-[form-id]

Por exemplo:

<button id="maildroppa-popup-btn-[form-id]">Obter o guia</button>

O JavaScript carrega o pop-up. O ID conecta o pop-up ao elemento da página selecionado. Ambos precisam estar presentes na mesma página publicada. Quando um visitante clica no elemento com esse ID exato, o script do Maildroppa abre o pop-up.

Se o botão do site já tiver um ID de outro sistema de pop-ups, substitua-o pelo ID do acionador do Maildroppa quando o Maildroppa for responsável por processar o clique. Não coloque o pop-up do Maildroppa dentro de outro pop-up fornecido pelo criador do site.

Use cada ID HTML apenas uma vez por página. Se vários elementos precisarem abrir o mesmo pop-up, peça à pessoa responsável pela implementação do site para conectar esses elementos sem duplicar o mesmo ID.

Conecte o fluxo de inscrição

Revise o fluxo de inscrição vinculado no cabeçalho do criador. Ele controla a resposta imediata ao envio, o e-mail de double opt-in (confirmação da inscrição por e-mail) e o resultado após a confirmação.

É possível selecionar um fluxo existente, editá-lo ou criar um fluxo separado para esse pop-up. Um fluxo dedicado é útil quando a oferta precisa de uma mensagem de confirmação própria ou da entrega de uma isca digital.

Pré-visualize e salve

Clique em “Preview” para conferir o design e o comportamento do pop-up sem alterar a versão usada no site. Revise o layout, o controle de fechamento, a ordem dos campos, o espaço para mensagens de validação e a resposta ao envio.

Clique em “Save changes” quando o pop-up estiver pronto. Em seguida, volte à visão geral dos formulários de inscrição.

Ative e incorpore o pop-up para exibição automática

Ative o pop-up pelo menu de ações de três pontos, caso ainda não esteja ativo. Em seguida, clique em “Show Code Snippet” e copie o código completo da aba “JavaScript”.

Adicione o script a todas as páginas do site em que o pop-up deve estar disponível. O código contém o ID exclusivo do formulário do pop-up e carrega a configuração atual salva.

A aba “HTML” fornece a marcação gerada para implementações personalizadas. Se usar essa opção, teste cuidadosamente todos os comportamentos e as etapas de envio, pois o código e os estilos do site podem afetar o resultado.

Esta seção se aplica quando o pop-up deve abrir automaticamente com base no atraso de exibição ou na intenção de saída. Para um botão, imagem ou link que abre o pop-up ao clicar, siga as instruções de

.

Para instruções gerais de incorporação, consulte Crie e incorpore um formulário integrado à página.

Teste o pop-up no site

Teste o pop-up na página real do site depois de adicionar o código:

1. Verifique o atraso configurado.
2. Teste o botão de fechar e o clique fora do formulário.
3. Se a intenção de saída estiver ativada, mova o ponteiro para fora da página para testá-la.
4. Se o acionador manual estiver ativado, clique no elemento da página configurado para testá-lo.
5. Verifique o layout em uma tela estreita.
6. Envie o formulário e conclua o processo de double opt-in.
7. Confira o assinante e as tags ocultas no Maildroppa.

A configuração de frequência pode impedir que o pop-up apareça novamente durante testes repetidos. Use uma janela de navegação anônima ou limpe os dados relevantes do armazenamento do navegador quando precisar testar como se fosse uma nova visita.

Atualize ou desative o pop-up

Para atualizar o pop-up, abra-o no Maildroppa, edite o design ou o comportamento, confira a prévia e clique em “Save changes”. O trecho de código JavaScript continua usando o mesmo ID de formulário.

Para interromper a exibição temporariamente, escolha “Deactivate” no menu de ações. A desativação preserva o pop-up e os dados dos relatórios anteriores. Remova também o script ou o elemento acionador do site caso não sejam mais necessários.