Crie e posicione formulários deslizantes

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

Um formulário deslizante é um formulário de inscrição compacto que aparece em uma borda ou em uma posição selecionada da janela do navegador.

Ele chama mais atenção do que um formulário inserido na página e ocupa menos espaço do site do que um pop-up centralizado. Formulários deslizantes funcionam bem para lembretes de newsletter, descontos, novidades de produtos e ofertas curtas que devem permanecer visíveis enquanto o visitante lê a página.

Este guia explica as configurações exclusivas dos formulários deslizantes. As funções compartilhadas de layout, conteúdo, campos, tags, tipografia, camadas e fluxo de inscrição são abordadas no guia principal do criador de formulários de inscrição.

Crie um formulário deslizante

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

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

Use um nome como “Formulário deslizante da newsletter do blog”, “Lembrete de novo produto” ou “Formulário deslizante de cupom de verão”. O nome interno ajuda a gerenciar o formulário e não é exibido automaticamente aos visitantes.

Escolha um modelo de formulário deslizante

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

• Clean reminder (lembrete com visual limpo)
• Dark offer (oferta com fundo escuro)
• Warm coupon (cupom com visual acolhedor)
• Minimal note (nota minimalista)

Os modelos foram criados para mensagens compactas, mas todos os elementos continuam editáveis. Depois de escolher um modelo inicial, é possível alterar o conteúdo, os campos, as cores, a tipografia, a borda, o espaçamento e o botão de envio.

Defina o visual do formulário deslizante

Use o criador visual para organizar o formulário deslizante. Ele pode incluir o formulário de inscrição junto com texto, imagem, vídeo, lista, botão, links para redes sociais, contador de assinantes, espaçador ou divisor.

O espaço é mais limitado do que em uma landing page ou em um formulário incorporado largo. Mantenha o foco da oferta e evite adicionar conteúdo que obrigue os visitantes a procurar os campos ou o botão de envio.

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 do formulário deslizante e as configurações padrão da aparência geral.

Um layout de uma coluna costuma ser a opção mais clara. Se usar várias colunas, verifique com atenção como elas se empilham em telas estreitas.

Escolha a posição na tela

Selecione o bloco do formulário de inscrição e abra “Widget Settings”. O seletor de posição oferece uma grade de três por três:

• No topo: à esquerda, ao centro ou à direita
• No meio: à esquerda, ao centro ou à direita
• Na parte inferior: à esquerda, ao centro ou à direita

Escolha uma posição que não cubra controles importantes do site. Verifique avisos de cookies, widgets de chat, navegação, botões do carrinho de compras e outros elementos fixos antes de decidir.

Em telas estreitas de dispositivos móveis, o Maildroppa simplifica o posicionamento para que o formulário deslizante se ajuste à largura disponível. As posições superiores permanecem no topo; as demais são exibidas a partir da borda inferior. Sempre teste o resultado em uma tela pequena, em vez de considerar apenas a posição no computador.

Defina o atraso de exibição

“Display Delay” define quantos segundos o Maildroppa espera antes de exibir o formulário deslizante na página do site em que ele foi incorporado.

Use 0 quando o formulário deslizante precisar aparecer imediatamente. Defina um atraso maior para dar aos visitantes tempo de interagir com a página primeiro. O criador aceita um atraso de até 86.400 segundos.

Um atraso curto pode funcionar bem para um lembrete simples de newsletter. Em um artigo mais longo, a exibição após um intervalo maior pode parecer mais natural e tornar a oferta mais relevante para leitores engajados.

Defina a frequência de exibição

“Display Frequency” controla o intervalo após o qual o formulário deslizante pode ser exibido novamente ao mesmo visitante. Você pode escolher:

• 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 uma frequência adequada à oferta. Uma promoção temporária pode precisar de um intervalo menor, enquanto um lembrete geral de newsletter normalmente não precisa aparecer em todas as visitas.

A frequência é armazenada no navegador do visitante. O uso de outro navegador, de uma janela de navegação privada ou a limpeza do armazenamento do navegador resulta em um histórico de visitas diferente.

Vincule o fluxo de inscrição

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

Você pode selecionar um fluxo existente, editar o atual ou criar um especificamente para este formulário deslizante. Se o fluxo for compartilhado por vários formulários, as alterações afetarão todos eles.

Visualize e salve

Clique em “Preview” para revisar o formulário deslizante antes de adicioná-lo ao site. Verifique a posição selecionada, o comportamento de abertura, a ordem dos campos, o controle de fechamento e a resposta completa à inscrição.

Clique em “Save changes” quando o formulário e as configurações em “Widget Settings” estiverem prontos. Em seguida, volte à visão geral em “Signup Forms”.

Ative e incorpore o formulário deslizante

Ative o formulário deslizante pelo menu de ações de três pontos, caso ele ainda não esteja ativo. Clique em “Show Code Snippet” e copie o código completo da aba “JavaScript”.

Adicione esse script a todas as páginas do site em que o formulário deslizante deve estar disponível. Diferentemente de um formulário incorporado, a posição exata do script dentro da página não determina a posição visível do formulário deslizante. A posição escolhida em “Widget Settings” controla onde ele aparece.

A aba “HTML” fornece a marcação gerada para implementações personalizadas. Se o site usar essa opção, teste com atenção toda a interação e o fluxo de envio.

Para obter instruções gerais sobre onde inserir o código, consulte Como criar e incorporar um formulário.

Teste o formulário deslizante no site

Depois de adicionar o código, teste a página real do site:

1. Verifique se o formulário deslizante aparece após o atraso selecionado.
2. Confirme a posição em uma tela larga.
3. Verifique a posição e a largura adaptadas em uma tela estreita.
4. Confira se ele não cobre a navegação, os controles de cookies, os botões de chat ou outras ações importantes.
5. Teste a abertura e o fechamento do formulário deslizante.
6. Envie o formulário e conclua a confirmação da inscrição por e-mail (double opt-in).
7. Verifique o assinante e as tags ocultas no Maildroppa.

A configuração de frequência pode impedir que o formulário apareça novamente durante testes repetidos. Use uma janela de navegação privada ou limpe os dados relevantes do armazenamento do navegador quando precisar simular um novo visitante.

Atualize ou desative o formulário deslizante

Abra o mesmo formulário deslizante no Maildroppa, faça as alterações, visualize o resultado e clique em “Save changes”. O trecho de código JavaScript continua usando o mesmo ID de formulário e carrega a configuração salva.

Escolha “Deactivate” na visão geral em “Signup Forms” quando precisar tirar o formulário deslizante do ar sem excluí-lo. Remova também o script do site se não pretende mais usá-lo nele.