Como Adicionar um Popup de Formulário de Contato no WordPress

Já observou visitantes navegando em seu site, apenas para irem embora sem entrar em contato? É frustrante, especialmente quando você sabe que eles estão interessados, mas parece que não consegue se conectar.

Um popup simples e oportuno pode fazer toda a diferença. 💡

Quando colocado de forma atenciosa, ele coloca seu formulário de contato exatamente onde os visitantes precisam. Isso pode levar a mais consultas, feedback e conversões.

Na WPBeginner, somos grandes fãs do WPForms porque ele é fácil para iniciantes, poderoso e perfeito para criar todos os tipos de formulários. Melhor ainda, você pode combiná-lo com o OptinMonster para criar um popup de formulário de contato que pareça útil, não invasivo.

Neste guia, mostraremos como adicionar um popup de formulário de contato no WordPress. Um que transforma visitantes em leads, sem incomodá-los.

Por que usar um Popup de Formulário de Contato?

Um popup de formulário de contato facilita o contato dos visitantes com você sem interromper a navegação ou a busca pela sua página de contato.

Isso é importante porque todo site WordPress precisa de uma maneira simples para os usuários enviarem perguntas, feedback ou solicitações de suporte. Mas quando seu formulário de contato fica apenas em uma página, muitos visitantes podem nunca encontrá-lo. E isso geralmente leva à perda de leads.

Um popup de formulário de contato resolve isso permitindo que os visitantes abram o formulário com um único clique, de qualquer página do seu site. Eles podem entrar em contato imediatamente sem sair da página que estão visualizando no momento.

Também ajuda a manter as pessoas em seu site em vez de enviá-las para outro lugar. E como bônus, você pode usar esses popups para coletar endereços de e-mail e crescer sua lista de e-mail.

Neste guia, mostraremos como criar um formulário de contato e adicioná-lo a um popup no WordPress.

Também compartilharemos nossas dicas de especialistas sobre como criar um popup que chame a atenção sem ser intrusivo. Essa abordagem garante que seu site WordPress permaneça amigável, ao mesmo tempo em que maximiza as oportunidades de interação.

E aqui está um breve resumo de todas as etapas que você seguirá:

Pronto? Vamos começar.

Etapa 1: Crie um Formulário de Contato WordPress

Primeiro, você precisará selecionar um plugin de formulário de contato WordPress.

Existem muitas opções gratuitas e pagas, mas recomendamos o uso do WPForms, pois é o melhor construtor de formulários do WordPress do mercado. Ele também é o mais amigável para iniciantes, graças às ferramentas de IA, ao construtor de arrastar e soltar e aos modelos de formulário pré-construídos.

Na WPBeginner, nós o usamos em nosso site para exibir formulários de contato, pesquisas anuais de usuários e formulários de migração de site.

Para detalhes sobre nossa experiência com o plugin, confira nossa análise completa do WPForms.

Para começar, acesse o site do WPForms e clique no botão ‘Get WPForms Now’. Em seguida, basta seguir os passos para criar sua conta e concluir a compra.

Após o checkout, você será direcionado para o painel da sua conta WPForms, onde poderá encontrar a chave de licença do plugin.

A partir daqui, navegue até WPForms » Adicionar Novo no seu painel do WordPress.

Na próxima tela, use a barra de pesquisa para encontrar rapidamente o plugin WPForms.

Quando ele aparecer nos resultados da pesquisa, clique em ‘Instalar Agora’ e depois em ‘Ativar’.

Se precisar de ajuda, você pode ver nosso guia passo a passo sobre como instalar um plugin do WordPress.

Se você comprar o WPForms Pro, precisará ativar sua chave de licença. Vá para WPForms » Configurações, insira sua chave no campo respectivo e clique em ‘Verificar Chave’.

A partir daqui, você está pronto para criar seu formulário de contato.

Vá em frente e navegue até WPForms » Adicionar Novo no seu painel do WordPress.

Na próxima tela, você pode inserir um nome para o formulário.

Em seguida, você selecionará como construirá seu formulário – usando WPForms AI, um modelo pré-fabricado ou uma tela em branco.

Se você quiser usar o construtor de formulários com IA, basta inserir um prompt. Em segundos, seu formulário será gerado.

Dito isso, usaremos o modelo 'Formulário de Contato Simples' para este tutorial, pois ele tem tudo o que precisamos.

Em seguida, você pode adicionar campos ao formulário usando o construtor de arrastar e soltar.

Simplesmente arraste os campos que você deseja adicionar ao formulário das opções fornecidas no menu à sua esquerda. Você também pode reordenar os campos no formulário.

O WPForms também permite que você personalize cada campo no formulário de contato.

Por exemplo, se você clicar no campo ‘Nome’, verá opções para alterar seu rótulo e formato. Você pode até adicionar uma descrição ou marcar qualquer campo como obrigatório.

Para instruções passo a passo, consulte nosso guia sobre como criar um formulário de contato.

Ao terminar, clique na opção ‘Configurações’ para configurar a notificação e a confirmação do formulário.

Na seção ‘Geral’, você pode renomear o formulário, adicionar uma descrição, alterar o texto do botão de envio, habilitar proteção anti-spam e mais.

Em seguida, você pode ir para a opção de configurações ‘Notificações’. Por padrão, as notificações são enviadas para o e-mail do administrador configurado no seu site WordPress.

No entanto, você pode enviar a notificação do seu formulário de contato para qualquer endereço de e-mail que desejar. Se desejar receber notificações de envio de formulário para vários e-mails, separe cada e-mail com uma vírgula.

Para a linha de assunto do e-mail, o WPForms usa o nome do formulário que você inseriu anteriormente. No entanto, você pode editar o texto da linha de assunto para o que desejar.

Agora, vamos para a opção ‘Confirmações’.

O WPForms usa ‘Mensagem’ como o tipo de confirmação padrão. Isso exibe uma mensagem de agradecimento imediatamente após o envio do formulário. Além disso, você verá as opções ‘Mostrar Página’ e ‘Ir para URL (Redirecionar)’.

Para pop-ups, no entanto, recomendamos manter esta configuração de ‘Mensagem’. Redirecionar usuários para uma página diferente pode parecer abrupto quando eles estão interagindo com um pop-up.

Assim que terminar de criar um formulário de contato, certifique-se de clicar no botão ‘Salvar’ no canto superior direito para salvar suas alterações.

Em seguida, você pode clicar na opção ‘Incorporar’ no canto superior ao lado do botão ‘Salvar’ para obter o shortcode do formulário. Você precisará dessas informações para exibir seu formulário em um popup.

Quando um novo pop-up aparecer, você pode selecionar a opção ‘Usar um shortcode’.

O WPForms então exibirá o shortcode do seu formulário de contato assim que você clicar no link. Sugerimos que você mantenha esta aba ou janela aberta, pois precisará do shortcode na próxima etapa, onde mostraremos como adicionar seu formulário de contato em um pop-up.

Etapa 2: Adicione um Popup de Formulário de Contato ao Seu Site WordPress

Para criar um popup de formulário de contato, você precisará de um plugin de popup para WordPress.

Recomendamos o uso do OptinMonster, pois é o melhor plugin de geração de leads e otimização de conversão para WordPress. É também um dos mais populares, com mais de 1,2 milhão de sites usando esta poderosa ferramenta.

No WPBeginner, usamos o OptinMonster para várias tarefas, incluindo a promoção de ofertas especiais em popups, slide-ins e banners de cabeçalho. Se você quiser mais informações, sinta-se à vontade para ler nossa análise completa do OptinMonster.

Para este tutorial, usaremos a versão Pro do OptinMonster, que inclui um template limpo e regras de exibição avançadas para mostrar o pop-up.

Então, vamos nos inscrever para uma conta indo ao site do OptinMonster. Simplesmente visite o site e clique no botão ‘Obter OptinMonster Agora’.

Após se inscrever, você acessará o painel da sua conta OptinMonster. Mantenha esta aba aberta, pois conectaremos sua conta ao WordPress em um momento.

Em seguida, você precisa instalar e ativar o plugin gratuito OptinMonster em seu site. Este plugin atua como um conector entre seu site e sua conta OptinMonster.

No seu painel do WordPress, vá para Plugins » Adicionar Novo.

Na próxima tela, use a barra de pesquisa para encontrar ‘OptinMonster’.

Em seguida, clique em ‘Instalar agora’ e ‘Ativar’ para habilitá-lo corretamente.

Para mais detalhes, você pode seguir nosso guia sobre como instalar um plugin do WordPress.

Após o plugin estar ativo, você verá o assistente de configuração.

Prossiga e clique no botão ‘Conectar sua conta existente’.

Uma janela pop-up aparecerá agora, e o OptinMonster pedirá para conectar-se à sua conta.

Simplesmente clique no botão ‘Conectar Ao WordPress’.

Agora que sua conta está conectada, a próxima coisa a fazer é criar uma nova campanha para o popup do seu formulário de contato.

Você pode começar indo em OptinMonster » Campanhas e depois clicando no botão ‘Criar Sua Primeira Campanha’.

Na próxima tela, você terá que selecionar um tipo de campanha.

Como criaremos um popup de formulário de contato, selecione ‘Popup’ como seu tipo de campanha.

Depois disso, você vai querer rolar a página para baixo para escolher um modelo.

O OptinMonster oferece mais de 75 designs atraentes e de alta conversão para seus pop-ups. Você pode selecionar qualquer modelo que desejar.

Depois de decidir sobre o modelo, basta inserir um nome para sua campanha e clicar no botão ‘Iniciar Criação’.

Agora, usando o construtor de arrastar e soltar no OptinMonster, você pode editar seu modelo de pop-up.

Você verá diferentes blocos aparecerem no menu à sua esquerda. Localize o bloco ‘WPForms’, em seguida, arraste e solte-o em seu modelo.

Depois disso, clique no menu suspenso ‘Seleção de Formulário’ nas configurações do bloco à esquerda.

Simplesmente escolha o formulário de contato que você criou anteriormente na lista. Se você não vir seu formulário listado, pode selecionar ‘Adicionar Shortcode Manualmente’ e colar o shortcode que você copiou na Etapa 1.

Vá em frente e insira o shortcode do seu formulário de contato WPForms no bloco. Se você perdeu seu shortcode, pode voltar à sua página de configurações de incorporação do WPForms e copiar o shortcode.

É importante notar que você não verá uma prévia do formulário de contato no modelo ao adicionar o shortcode. Isso é normal, pois seu formulário de contato aparecerá quando a campanha for publicada.

Em seguida, você pode ir para a aba ‘Regras de Exibição’ na parte superior para escolher quando o pop-up deve aparecer em seu site.

Por padrão, o OptinMonster definirá para quando o tempo na página for de 5 segundos, e o pop-up aparecerá em qualquer página. No entanto, você pode alterar as configurações de regra de exibição e selecionar diferentes gatilhos e opções de segmentação.

Recomendamos o uso do direcionamento MonsterLink (Ao Clicar). Isso aciona o pop-up apenas quando um usuário clica em um link ou botão específico. Isso coloca o visitante no controle e é muito menos intrusivo do que um pop-up que abre automaticamente.

Em seguida, você pode clicar no botão ‘Copiar Código MonsterLink’ e adicioná-lo a qualquer texto, imagem ou botão em seu site.

Para mais detalhes, você pode seguir nosso guia para iniciantes sobre como adicionar um link no WordPress.

Seu código MonsterLink ficará assim em HTML:

<a href="https://app.monstercampaigns.com/c/ep6f5qtakxauowbj8097/" target="_blank" rel="noopener noreferrer">Subscribe Now!</a>

Você não precisa do código HTML completo – você só precisa do URL. Portanto, você pode copiar o texto do link que começa com https://.

Veja como a URL deve parecer:

https://app.monstercampaigns.com/c/ep6f5qtakxauowbj8097/

Por exemplo, digamos que você queira adicionar um botão Fale Conosco em seu site.

Neste caso, você pode começar editando qualquer página ou post e acessando seu editor do WordPress. Em seguida, clique no sinal de (+) no topo e adicione um bloco de ‘Botões’.

Depois disso, você pode inserir o texto para o seu botão e clicar no ícone de link. Por exemplo, usamos 'Entre em Contato' como o texto do botão.

Agora, vamos adicionar o URL do MonsterLink. Clique no bloco do botão para selecioná-lo, em seguida, clique no ícone de Link na barra de ferramentas. Simplesmente cole o URL que você copiou anteriormente e pressione 'Enter'.

Depois de fazer isso, prossiga e publique seu post ou página do WordPress. O MonsterLink será agora adicionado ao seu botão ‘Fale Conosco’.

Agora, vamos voltar à sua campanha OptinMonster para concluir a configuração.

Após selecionar MonsterLink como seu destino e exibi-lo em qualquer página, você pode clicar no botão ‘Próximo’ na parte inferior.

Na próxima tela, você verá opções para alterar o tipo de visualização da campanha, adicionar uma animação MonsterEffect e reproduzir um som quando o popup aparecer.

Sinta-se à vontade para experimentar diferentes configurações de animação e som. Quando terminar, clique no botão 'Próxima Etapa'.

O OptinMonster exibirá então um resumo das suas configurações de ‘Regra de Exibição’.

Isso ajuda a garantir que você configurou corretamente quando suas campanhas aparecerão em seu site.

Agora, você está pronto para colocar sua campanha no ar e publicar seu pop-up de formulário de contato.

Para fazer isso, você vai querer ir para a aba ‘Publicar’ no topo. Em seguida, clique no botão ‘Visualizar’ para ver como seu popup fica antes de ir ao ar.

Quando estiver satisfeito com a aparência da sua campanha, altere o 'Status de Publicação' de 'Rascunho' para 'Publicar'.

Feito isso, você pode sair do construtor de campanhas do OptinMonster e verificar o status da sua campanha no seu painel do WordPress.

Navegue até OptinMonster » Campanhas e clique no menu suspenso ‘Status’. Em seguida, você pode alterá-lo de ‘Pendente’ para ‘Publicar’.

O OptinMonster atualizará automaticamente as alterações.

Em seguida, você precisará ir para onde exibe o botão 'Fale Conosco' com a integração MonsterLink e ver o formulário de contato pop-up em ação.

Aí está!

Você criou com sucesso um popup de formulário de contato no WordPress. Melhor ainda, você o fez de uma forma que mantém seu formulário de contato fácil de acessar sem ser intrusivo.

Dicas Bônus para Aumentar Suas Inscrições em Popups

Agora que você sabe como criar um formulário de contato pop-up, o próximo passo é garantir que ele melhore a experiência do usuário em vez de fazer com que os visitantes saiam do seu site.

Para maximizar as inscrições, você deve se concentrar em criar popups úteis e relevantes em vez de intrusivos:

Ao combinar essas estratégias, você pode criar pop-ups que chamam a atenção, se conectam com seu público e incentivam a ação sem parecer invasivo.

Para mais detalhes e exemplos, você pode conferir nosso guia sobre como usar a psicologia de pop-ups para aumentar inscrições em 250%.

Perguntas Frequentes: Como Adicionar um Popup de Formulário de Contato no WordPress

Tem dúvidas sobre popups de formulário de contato? Aqui estão respostas rápidas para ajudar você a configurá-los da maneira certa.

Como garantir que meu popup de formulário de contato não seja irritante?

Tudo se resume a tempo e contexto. Para evitar frustrar os visitantes, exiba pop-ups com base no comportamento, como após alguns segundos na página ou quando alguém rola para baixo. Ferramentas como OptinMonster permitem que você ajuste essas configurações para que seu pop-up pareça útil, não intrusivo.

Posso usar um pop-up de formulário de contato para visitantes de celular?

Sim, mas tenha cuidado com o espaço da tela. WPForms e OptinMonster são responsivos para dispositivos móveis, o que significa que seus pop-ups se adaptarão a telas menores. Apenas certifique-se de que o design seja limpo e fácil de fechar em dispositivos móveis.

Como posso rastrear o desempenho dos meus pop-ups de formulário de contato?

Você pode usar o MonsterInsights para rastrear métricas importantes do formulário como visualizações, cliques e conversões, tudo a partir do seu painel do WordPress. Isso ajuda você a entender o que está funcionando e onde você pode melhorar.

Um pop-up de formulário de contato deixará meu site lento?

Não se for construído e configurado corretamente. Ferramentas leves como WPForms e OptinMonster são otimizadas para desempenho, portanto, não deixarão seu site visivelmente lento quando usados corretamente.

Tutorial em Vídeo

Antes de ir, preparamos um tutorial em vídeo sobre como adicionar um pop-up de formulário de contato ao seu site WordPress. Certifique-se de conferir!

Explore Nossos Guias de Formulários WordPress

Esperamos que este artigo tenha ajudado você a aprender como adicionar um pop-up de formulário de contato no WordPress.

Em seguida, você também pode querer conferir nossos guias sobre:

• Como Usar Formulários de Contato para Aumentar sua Lista de E-mails no WordPress
• Como Enviar E-mails de Confirmação Após Submissões de Formulário no WordPress
• Como Rastrear e Reduzir o Abandono de Formulários
• Formulário WordPress Não Funciona: Dicas de Solução de Problemas
• O Guia Definitivo para Usar Formulários 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.