Criar e posicionar formulários deslizantes

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

Um formulário deslizante é um formulário de inscrição compacto que aparece na 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, ocupando menos espaço do site do que um Popup centralizado. Os formulários deslizantes funcionam bem para lembretes de newsletter, descontos, atualizações 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 comuns de layout, conteúdo, campos, tags, tipografia, camadas e fluxo de inscrição são abordadas no guia principal do Signup Form Builder.

Criando um formulário deslizante

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

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

Use um nome como “Slide-in de Newsletter do Blog”, “Lembrete de Novo Produto” ou “Slide-in de Cupom de Verão”. O nome interno ajuda você a gerenciar o formulário e não é exibido automaticamente aos visitantes.

Escolhendo 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:

• Lembrete clean
• Oferta escura
• Cupom acolhedor
• Nota minimalista

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

Criando o design do formulário deslizante

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

O espaço é mais limitado do que em uma Landing Page ou em um Embedded Form largo. Mantenha a oferta objetiva e evite adicionar conteúdo que faça os visitantes procurarem 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 inscritos, 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 de aparência geral.

Um layout de uma coluna geralmente é a opção mais clara. Se usar várias colunas, verifique cuidadosamente como elas são empilhadas em telas estreitas.

Escolhendo 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:

• Superior esquerdo, superior central ou superior direito
• Central esquerdo, central ou central direito
• Inferior esquerdo, inferior central ou inferior direito

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 móveis estreitas, 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 confiar apenas na posição para desktop.

Definindo o atraso de exibição

“Display Delay” define quantos segundos o Maildroppa espera antes de exibir o formulário deslizante em uma página de site incorporada.

Use 0 quando o formulário deslizante deve estar disponível imediatamente. Insira um atraso maior quando os visitantes devem ter tempo para interagir primeiro com a página. O criador aceita um atraso de até 86.400 segundos.

Um atraso curto pode funcionar bem para um lembrete simples de newsletter. Para um artigo mais longo, uma exibição posterior pode parecer mais natural e tornar a oferta mais relevante para leitores engajados.

Definindo a frequência de exibição

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

• Sempre
• Uma vez por hora
• Uma vez por dia
• Uma vez por semana
• Uma vez por mês

Use uma frequência que corresponda à oferta. Uma promoção temporária pode precisar de um intervalo menor, enquanto um lembrete geral de newsletter geralmente não precisa aparecer em todas as visitas.

A frequência é armazenada no navegador do visitante. Outro navegador, uma janela de navegação privada ou o armazenamento do navegador limpo são tratados como um histórico de visitas diferente.

Conectando o fluxo de inscrição

Revise o fluxo de inscrição atribuído no cabeçalho do criador. Ele define a resposta após o envio, o e-mail de Double Opt-in e o que acontece após a confirmação.

Você pode selecionar um fluxo existente, editar o fluxo 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.

Visualizando e salvando

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 da inscrição.

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

Ativando e incorporando o formulário deslizante

Ative o formulário deslizante no 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 este script a todas as páginas do site nas quais o formulário deslizante deve estar disponível. Diferentemente de um Embedded Form, 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. Teste cuidadosamente toda a interação e o fluxo de envio se o site usar esta opção.

Para obter instruções gerais sobre a localização do código, consulte Criando e incorporando um Embedded Form.

Testando 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 ampla.
3. Verifique a posição e a largura adaptadas em uma tela estreita.
4. Certifique-se de que ele não cubra 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 o processo de Double Opt-in.
7. Verifique o inscrito 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 o armazenamento relevante do navegador quando precisar simular um novo visitante.

Atualizando ou desativando o formulário deslizante

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

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