Pode ser frustrante quando as pessoas visitam seu site WordPress, mas nunca entram em contato. Talvez elas naveguem pelas suas páginas, até passem alguns minutos lendo, mas seu formulário de contato não recebe nenhuma submissão.
Muitas vezes, não é que os visitantes não queiram se conectar. Eles simplesmente não veem uma maneira fácil ou convidativa de fazer isso.
É aí que um formulário de contato deslizante pode fazer uma grande diferença. Ele aparece suavemente pela lateral, oferecendo ajuda exatamente quando os visitantes precisam, sem interromper a experiência deles.
Neste guia, mostraremos como adicionar um formulário de contato deslizante ao seu site WordPress passo a passo, usando um método confiável e testado. 🧑💻
Por que Adicionar um Formulário de Contato Deslizante no WordPress? 💭
Um formulário de contato deslizante facilita o contato dos visitantes sem sair da página em que estão. Ele desliza suavemente pela lateral, chama a atenção e permite que os usuários enviem uma mensagem rápida exatamente quando precisam de ajuda.
Muitos proprietários de pequenas empresas adicionam uma página de contato, esperando que os visitantes a usem e que isso ajude a crescer seus negócios.
Mas, na realidade, a maioria das pessoas vai embora sem nunca entrar em contato. É por isso que você verá sites populares usando popups de contato, sliders ou botões flutuantes para facilitar a comunicação.
Essas opções animadas e interativas chamam a atenção para o formulário de contato, fazendo com que seu site pareça mais interativo e acessível. Assim, você pode transformar visitantes casuais em leads ou clientes reais com mais facilidade.
Dito isso, compartilharemos como criar um formulário de contato deslizante no WordPress. Aqui está um breve resumo de tudo o que abordaremos neste guia:
- Adicionando um Formulário de Contato Deslizante no WordPress
- Etapa 1: Criando um Formulário de Contato no WordPress
- Passo 2: Criando uma Campanha Deslizante no OptinMonster
- Etapa 3: Exibindo o Formulário de Contato Deslizante no WordPress
- FAQ: Adicionar um Formulário de Contato Deslizante no WordPress
- Recursos Bônus para Usar Formulários do WordPress
Vamos começar.
Adicionando um Formulário de Contato Deslizante no WordPress
Para este tutorial, você precisará do WPForms. É o melhor plugin de formulário de contato do WordPress do mercado porque é fácil e poderoso.
ℹ️ Observação: O WPForms gerencia todos os nossos formulários no WPBeginner, incluindo nosso formulário de contato. É fácil de usar, altamente personalizável, e as novas ferramentas de IA tornam a criação de formulários mais rápida do que nunca.
Curioso para saber como funciona? Confira nossa análise completa do WPForms para explorar tudo o que ele pode fazer.
Para seguir este tutorial, você pode usar a versão gratuita do plugin de formulário de contato WPForms se não precisar de nenhum de seus recursos premium (lógica condicional, integrações avançadas e mais).
Em seguida, você conectará seu formulário com o OptinMonster. É o software de otimização de conversão mais poderoso e ajuda a converter visitantes abandonados do site em clientes.
Etapa 1: Criando um Formulário de Contato no WordPress
Primeiro, você precisa instalar e ativar o plugin WPForms. Na sua área de administração do WordPress, vá para Plugins » Adicionar Novo Plugin para começar.
Na próxima tela, você pode usar a barra de pesquisa para encontrar rapidamente o plugin WPForms.
No resultado da pesquisa, simplesmente clique em 'Instalar Agora' e depois em 'Ativar' para concluir o processo.
Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress
Após a ativação, você precisa visitar a página WPForms » Adicionar Novo para criar um novo formulário de contato. Isso iniciará a interface do construtor do WPForms.
Digite um nome para o seu formulário de contato na parte superior da página.
Depois disso, você precisa passar o mouse sobre o modelo 'Formulário de Contato Simples' e clicar no botão 'Usar Modelo'.
🧑💻 Dica de Insider: Você pode usar IA para gerar seus formulários instantaneamente com facilidade! Basta fornecer um prompt e o WPForms AI criará o formulário perfeito para você em pouco tempo.
O WPForms criará um novo formulário com base no modelo de Formulário de Contato Simples.
Você verá a prévia do formulário no painel direito do construtor de formulários. Você pode clicar em qualquer campo para editá-lo ou adicionar novos campos de formulário da coluna esquerda.
Para instruções passo a passo, consulte nosso guia sobre como criar um formulário de contato no WordPress.
Assim que terminar de editar o formulário, basta clicar no botão 'Salvar' para armazenar suas alterações.
Em seguida, você precisa clicar no botão 'Incorporar' na parte superior para obter o código de incorporação do seu formulário.
Isso abrirá um pop-up mostrando várias maneiras de incorporar seu formulário. Simplesmente clique no link 'usar um shortcode' e depois copie o shortcode. Você precisará dele na próxima etapa.
Passo 2: Criando uma Campanha Deslizante no OptinMonster
Agora, criaremos uma campanha de slide-out que exibirá o formulário de contato que você criou na primeira etapa.
Você precisa instalar e ativar o plugin gratuito OptinMonster. Este plugin atua como um conector entre seu site e sua conta OptinMonster.
ℹ️ Observação: Usamos o OptinMonster no WPBeginner para promover ofertas exclusivas por meio de pop-ups, slide-ins e banners. É uma ferramenta versátil que impulsiona o engajamento e aumenta nossa lista de e-mails sem esforço.
Quer saber mais? Confira nossa análise completa do OptinMonster para explorar seus recursos.
Para começar, vamos configurar sua conta OptinMonster. No site deles, clique no botão ‘Get OptinMonster Now’, selecione um plano e complete o processo de registro.
Com isso feito, você será redirecionado para o seu painel do OptinMonster.
Agora, vá para Plugins » Adicionar Novo Plugin no seu painel do WordPress para instalar o plugin OptinMonster.
Em seguida, basta usar o recurso de pesquisa para encontrar rapidamente o plugin OptinMonster.
Assim que o encontrar, clique no botão ‘Instalar Agora’ e depois em ‘Ativar’.
Para detalhes, você pode consultar nosso guia sobre como instalar um plugin do WordPress.
Ao ser ativado, o assistente de configuração do OptinMonster será iniciado automaticamente. Isso permitirá que você crie uma nova conta ou conecte uma conta existente.
Após criar ou conectar sua conta OptinMonster, você pode criar uma nova campanha de optin.
Simplesmente navegue até a página OptinMonster » Campanhas e clique no botão ‘Adicionar Novo’. Se você ainda não tem nenhuma campanha, então você também pode clicar no botão ‘Criar Sua Primeira Campanha’.
O OptinMonster oferece diferentes tipos de campanhas dinâmicas.
Para este tutorial, usaremos a campanha ‘Slide-in’.
Prossiga e clique para selecionar ‘Slide-in’ como seu tipo de campanha.
Em seguida, você precisa selecionar o modelo. O OptinMonster oferece vários modelos prontos.
Para este tutorial, você precisa escolher ‘Canvas’.
Você pode encontrar isso facilmente usando o recurso de pesquisa e, em seguida, clicar no botão ‘Usar Modelo’ que aparece quando você passa o mouse sobre ele.
Assim que você selecionar o modelo, será solicitado que você forneça um nome para sua campanha. Isso ajudará você a localizar facilmente a campanha em seu painel do OptinMonster.
Em seguida, clique no botão ‘Iniciar Construção’.
Agora, o OptinMonster carregará sua interface de construtor de campanhas.
Você verá uma prévia ao vivo de sua campanha à direita e os diferentes blocos no menu à sua esquerda.
Simplesmente encontre o bloco WPForms e, em seguida, arraste e solte-o na área de prévia.
Agora, o bloco WPForms aparecerá no modelo e você verá suas configurações à esquerda.
Você precisará clicar no menu suspenso ‘Seleção de Formulário’ nas configurações do bloco no menu esquerdo e selecionar a opção ‘Adicionar Shortcode Manualmente’.
Isso permitirá que você cole o shortcode do seu formulário de contato WPForms no bloco. Você o copiou anteriormente no tutorial.
Agora, você pode excluir ou personalizar os outros blocos do formulário.
Por exemplo, você pode alterar a imagem clicando nela e usando as configurações à esquerda.
Ou você pode excluí-lo simplesmente passando o mouse sobre o bloco e clicando no ícone de ‘Lixeira’.
Para este tutorial, excluiremos os outros blocos da optin, deixando apenas o bloco WPForms.
Se desejar, você também pode clicar no fundo e escolher uma cor, gradiente ou imagem para a opção no painel de configurações à esquerda.
Em seguida, você precisa clicar na aba ‘Regras de Exibição’ na parte superior da página para configurar quando e como a optin será exibida.
Você deve estar vendo a aba ‘Condições’ na parte inferior da tela. Aqui, as configurações padrão exibirão a optin em qualquer página após 5 segundos. Isso deve funcionar para a maioria dos sites.
Em seguida, você deve clicar na aba ‘Ações’ na parte inferior da página.
Por padrão, não há animação ou som quando a optin é exibida. Se desejar, você pode selecionar uma opção no menu suspenso ‘Animar com MonsterEffects’, como ‘Slide In (Left)’.
Quando terminar de configurar as Regras de Exibição, você precisa clicar no botão ‘Salvar’ na parte superior para armazenar suas configurações e, em seguida, clicar no botão ‘Publicar’.
Na próxima tela, você precisa alterar o Status de Publicação para ‘Publicar’. Isso tornará a optin disponível em seu blog WordPress ou site.
Etapa 3: Exibindo o Formulário de Contato Deslizante no WordPress
Agora que você criou o formulário de contato e a campanha de slide-out, está pronto para exibi-los em seu site.
Você pode fechar a página de Status de Publicação clicando no ícone ‘X’ no canto superior direito. Agora você deve ver uma página que permite configurar as ‘Configurações de Saída do WordPress’ e a ‘Visibilidade e Status’ da optin.
Ao rolar para baixo na seção ‘Visibilidade e Status’, você normalmente desejará que ‘Todos os Visitantes e Usuários Conectados’ vejam a campanha. No entanto, existem opções para ‘Somente Visitantes’ e ‘Somente Usuários Conectados‘.
Depois de fazer isso, você deve clicar no botão ‘Salvar Alterações’ para armazenar suas configurações.
Agora você pode visitar seu site para ver o formulário de contato de slide-out em ação:
FAQ: Adicionar um Formulário de Contato Deslizante no WordPress
Agora que você sabe como adicionar um formulário de contato de slide-out no WordPress, vamos abordar algumas perguntas comuns que os usuários costumam fazer.
Qual é o tamanho ideal para uma caixa de slide-out?
Cerca de 400–600 px de largura e 300–400 px de altura geralmente funciona bem. Ela deve se destacar sem cobrir muito da página.
Qual é a diferença entre um slide-out, um popup e um overlay?
Um slide-out desliza da lateral, um popup aparece no centro e um overlay cobre a tela inteira. Os slide-outs são geralmente menos intrusivos, mas cada opção pode ajudar você a aumentar o engajamento – basta escolher o que melhor se adapta ao estilo do seu site.
Quais são algumas das melhores alternativas aos formulários de popup?
Você pode usar formulários inline, barras flutuantes ou formulários de slide-out para uma experiência de usuário mais suave e menos disruptiva.
Recursos Bônus para Usar Formulários do WordPress
Esperamos que este artigo tenha ajudado você a aprender como adicionar um formulário de contato de slide-out no WordPress.
Você também pode querer ver alguns de nossos outros guias sobre formulários do WordPress:
- Como Mostrar um Formulário de Contato Flutuante no WordPress
- Como Adicionar um Popup de Formulário de Contato no WordPress
- Melhores Práticas para Design de Página de Formulário de Contato (com Exemplos)
- Como Usar Formulários de Contato para Aumentar sua Lista de E-mails no WordPress
- Como Bloquear Spam de Formulários de Contato no WordPress
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Jiří Vaněk
Eu tenho um formulário de contato deslizante no meu site principal. Eu o criei usando WP Forms e Elementor. Ele basicamente funciona em um princípio semelhante ao Optin Monster, mas a janela pop-up é criada no Elementor com os efeitos de fade-in e fade-out. Então, se alguém tiver o Elementor, isso também pode ser feito convenientemente lá – apenas uma dica para os outros.
Soumik Sadman Anwar
O Optinmonster também tem uma versão lite gratuita? Seria ótimo se houvesse!!!
WPBeginner Support
Oi Soumik,
O OptinMonster não tem uma versão lite gratuita nem um teste gratuito.
Admin