Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como adicionar um pop-up de formulário de contato no WordPress

Os formulários de contato são essenciais para a comunicação com os visitantes do seu site. Ao colocá-los em um pop-up, você facilita o contato dos clientes em potencial com você sobre seus produtos e serviços.

Quando o formulário de contato está prontamente disponível e é fácil de usar, é mais provável que os visitantes entrem em contato. Isso pode resultar em mais consultas, feedback e possíveis conversões.

No entanto, os pop-ups podem ser intrusivos se não forem usados com sabedoria. O uso excessivo ou a exibição nos momentos errados pode frustrar os usuários. Por isso, é importante encontrar o equilíbrio certo para que o formulário de contato pop-up seja útil e não atrapalhe.

Neste artigo, vamos orientá-lo nas etapas sobre como adicionar um pop-up de formulário de contato no WordPress.

Também compartilharemos nossas dicas de especialistas sobre como criar um pop-up que chame a atenção sem ser intrusivo. Essa abordagem garante que seu site WordPress permaneça fácil de usar e, ao mesmo tempo, maximize as oportunidades de interação.

How to add a contact form popup in WordPress

Por que usar um pop-up de formulário de contato?

Todo site ou blog do WordPress precisa de um formulário de contato para que os usuários enviem perguntas, comentários ou problemas.

No entanto, se o formulário de contato estiver em apenas uma página, será difícil para as pessoas encontrá-lo. Como resultado, seus usuários podem acabar saindo do site antes de entrar em contato com você, e você pode perder leads e conversões em potencial.

Um pop-up de formulário de contato ajuda a resolver esse problema, permitindo que os visitantes visualizem rapidamente o formulário clicando em um botão. Dessa forma, eles podem entrar em contato com você em qualquer página em que estejam.

Esse tipo de formulário de contato também ajuda a manter as pessoas no seu site, pois elas não precisam sair da página que estão visualizando. Além disso, você pode aumentar sua lista de e-mails usando um pop-up de formulário de contato.

Dito isso, primeiro você precisará criar um formulário de contato e exibi-lo em um pop-up nas suas páginas da Web. Mas não se preocupe. Nas seções a seguir, vamos orientá-lo na criação de um formulário de contato e na adição dele a um pop-up no WordPress:

Pronto? Vamos começar.

Tutorial em vídeo

Subscribe to WPBeginner

Se você preferir instruções por escrito, continue lendo.

Como criar um formulário de contato no WordPress

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

Há muitas opções gratuitas e pagas que você pode escolher, mas recomendamos o uso do WPForms, pois é a melhor opção.

O WPForms é um plug-in de formulário amigável para iniciantes que oferece um construtor de arrastar e soltar para criar formulários de contato no WordPress com apenas alguns cliques. Ele também oferece modelos de formulários pré-criados e muitas opções de personalização.

Para este tutorial, usaremos a versão WPForms Lite, que é gratuita e oferece um modelo de formulário de contato.

No entanto, você também pode usar sua versão premium para desbloquear mais recursos. Por exemplo, o WPForms Pro oferece mais de 1.800 modelos de formulários, mais opções de personalização, complementos avançados e a capacidade de coletar pagamentos on-line sem taxas de transação adicionais.

Para começar, primeiro você precisa instalar e ativar o plug-in WPForms Lite. Se precisar de ajuda, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Quando o plugin estiver ativo, você estará pronto para criar o formulário de contato. Tudo o que você precisa fazer é acessar WPForms ” Add New no painel do WordPress.

Add a new form

Depois disso, o WPForms solicitará que você dê um nome ao formulário e selecione um modelo.

Depois de inserir um nome de formulário, vá em frente e selecione o modelo “Simple Contact Form” (Formulário de contato simples).

The WPForms Simple Contact template

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

Basta arrastar os campos que deseja adicionar ao formulário a partir das opções fornecidas no menu à esquerda. Você também pode reordenar as posições de cada campo no formulário.

A contact form template

O WPForms também permite personalizar cada campo do formulário de contato.

Por exemplo, se você clicar no campo “Nome”, terá diferentes opções, como alterar o rótulo e o formato. Você pode até mesmo adicionar uma descrição ou marcar qualquer campo como obrigatório.

Edit each field in the contact form

Quando terminar, clique na opção “Settings” (Configurações) para configurar a notificação e a confirmação do formulário.

Na seção “General” (Geral), é possível renomear o formulário, alterar o texto do botão Enviar, ativar a proteção antispam e muito mais.

Editing the WPForms settings

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 que está configurado em seu site do WordPress.

No entanto, você pode enviar a notificação do formulário de contato para qualquer endereço de e-mail que desejar. Se desejar receber notificações de formulário de envio 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.

Edit notification settings

Agora, vamos para a opção “Confirmations” (Confirmações).

O WPForms usará “Message” como o tipo de confirmação padrão. Isso mostrará aos seus visitantes uma mensagem de agradecimento ao enviar um formulário.

Edit form confirmation settings

No entanto, você pode alterar o tipo de mensagem e redirecionar os usuários para uma página específica do seu site quando eles preencherem um formulário.

Quando terminar de criar um formulário de contato, não se esqueça de clicar no botão “Salvar” no canto superior direito para salvar as alterações.

Embed your form

Em seguida, você pode clicar na opção “Incorporar” no canto superior próximo ao botão “Salvar” para obter o shortcode do formulário. Você precisará dessas informações para exibir o formulário em um pop-up.

Quando uma nova janela for exibida, você poderá selecionar a opção “usar um shortcode”.

Click the use a shortcode link

O WPForms exibirá o shortcode do seu formulário de contato assim que você clicar no link. Sugerimos que mantenha essa guia/janela aberta, pois precisará dela na próxima etapa, na qual mostraremos como adicionar o formulário de contato em um pop-up.

Adicionar um pop-up de formulário de contato ao seu site WordPress

Para criar um pop-up de formulário de contato, você precisará de um plug-in de pop-up do WordPress.

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

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

Primeiro, vamos registrar uma conta no site da OptinMonster. Basta acessar o site e clicar no botão “Get OptinMonster Now” (Obter o OptinMonster agora).

OptinMonster

Em seguida, você precisará instalar e ativar o plug-in gratuito do OptinMonster em seu site. Para obter mais detalhes, você pode seguir nosso guia sobre como instalar um plug-in do WordPress.

Depois que o plug-in estiver ativo, você verá o assistente de configuração. Vá em frente e clique no botão “Connect Your Existing Account” (Conectar sua conta existente).

Connect your existing account

Uma janela pop-up será exibida e o OptinMonster solicitará a conexão com sua conta.

Basta clicar no botão “Connect To WordPress”.

Connect OptinMonster to WordPress

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

Você pode começar acessando OptinMonster ” Campaigns e clicando no botão “Create Your First Campaign” (Criar sua primeira campanha).

Create first OptinMonster campaign

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

Como criaremos um popup de formulário de contato, selecione “Popup” como tipo de campanha.

Choose a campaign type and template

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

A 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 escolher o modelo, basta digitar um nome para a campanha e clicar no botão “Start Building”.

Enter a name for your campaign

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

Você verá diferentes “Blocos” aparecerem no menu à sua esquerda. Vamos localizar o bloco “WPForms” e, em seguida, arrastá-lo e soltá-lo em seu modelo.

Add the WPForms block in popup

Depois disso, você precisará clicar no menu suspenso “Form Selection” (Seleção de formulário) nas configurações do bloco no menu esquerdo. Em seguida, selecione a opção “Add Shortcode Manually” (Adicionar código curto manualmente).

A partir daqui, você pode inserir o shortcode do formulário de contato do WPForms no bloco. Para encontrar o código, volte às configurações de incorporação do WPForms e copie o shortcode.

Enter contact form shortcode

É importante observar que você não verá uma visualização do formulário de contato no modelo quando adicionar o shortcode.

Isso é normal, pois o formulário de contato aparecerá quando a campanha for publicada.

See contact form shortcode

Em seguida, você pode ir para a guia “Display Rules” (Regras de exibição) na parte superior para escolher quando o pop-up deve aparecer em seu site.

Por padrão, o OptinMonster o 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 da regra de exibição e selecionar diferentes acionadores e opções de segmentação.

Sugerimos usar a segmentação MonsterLink (On Click). Dessa forma, seu pop-up aparecerá quando um visitante clicar em um link ou botão.

Select MonsterLink display rule

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 obter mais detalhes, você pode seguir nosso guia para iniciantes sobre como adicionar um link no WordPress.

Copy the MonsterLink code

Seu código MonsterLink terá a seguinte aparência em HTML:

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

No entanto, para incorporar o link em seu post ou página do blog do WordPress, você só precisa do URL do código.

Esta é a aparência que o URL deve ter:

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

Por exemplo, digamos que você queira adicionar um botão de contato no seu site.

Nesse caso, você pode começar editando qualquer página ou post e ir para o editor do WordPress. Em seguida, clique no sinal de mais (+) na parte superior e adicione um bloco “Buttons”.

Add a button block

Depois disso, você pode inserir um texto para o botão e clicar no ícone do link. Por exemplo, usamos “Entre em contato conosco” como texto do botão.

Agora, é hora de adicionar o URL do MonsterLink ao seu botão. Você clica no botão e, em seguida, no botão de inserção de link e cola o URL.

Enter the MonsterLink in the button

Depois de fazer isso, vá em frente e publique seu post ou página do WordPress. O MonsterLink agora será adicionado ao seu botão “Fale conosco”.

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

Depois de selecionar o MonsterLink como seu alvo e exibi-lo em qualquer página, você pode clicar no botão “Next” (Avançar) na parte inferior.

Complete display rules setup

Na próxima tela, você verá opções para alterar o tipo de exibição da campanha, adicionar uma animação MonsterEffect e reproduzir um som quando o pop-up for exibido.

Você pode ser criativo e fazer experiências com diferentes configurações. Quando estiver satisfeito com a configuração, vá em frente e clique no botão “Next” (Avançar).

Setup additional display rule settings

O OptinMonster mostrará um resumo de suas configurações de “Regra de exibição”.

Isso ajuda a garantir que você tenha configurado corretamente quando suas campanhas serão exibidas em seu site.

View display rules summary

Agora, você está pronto para colocar sua campanha no ar e publicar o pop-up do formulário de contato. Para isso, vá até a guia “Publish” (Publicar) na parte superior.

Em seguida, você pode clicar no botão “Preview” (Visualizar) antes de publicar sua campanha. Isso mostrará uma visualização ao vivo de como o pop-up ficará no seu site.

Quando estiver satisfeito com a aparência de sua campanha, altere o “Status de publicação” de “Rascunho” para “Publicar”.

Change the publish status

Depois de concluído, você pode sair do criador de campanhas do OptinMonster e verificar o status da sua campanha no painel do WordPress.

Para fazer isso, navegue até OptinMonster Campaigns. A partir daí, basta clicar no menu suspenso “Status” e alterá-lo de “Pendente” para “Publicado”.

Change the campaign status

O OptinMonster atualizará automaticamente as alterações.

Em seguida, vá para o local onde você exibe o botão “Fale conosco” com a integração do MonsterLink e veja o pop-up do formulário de contato em ação.

Contact form popup preview

Aí está!

Você criou com sucesso um plug-in de formulário de contato no WordPress. Além disso, você fez isso garantindo que o formulário não seja intrusivo.

Esperamos que este artigo o tenha ajudado a aprender como adicionar um pop-up de formulário de contato no WordPress. Em seguida, talvez você também queira conferir nosso guia sobre como enviar e-mails de confirmação após o envio de formulários do WordPress e como rastrear e reduzir o abandono de formulários.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

28 ComentáriosDeixe uma resposta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Ankit

    A well written article. Must read for non-tech beginners like me.

    • WPBeginner Support

      Glad you found our content helpful :)

      Administrador

  3. Deepak

    Hi i want to popup form whn i clk button… How i can do this

  4. Isaac

    This is nice, but can you explain/show how to do this without OptinMonster? I don’t want to have to buy a second plugin just to show a form in a popup. This should be do-able with WP Forms and a free lightbox plugin.

    • Editorial Staff

      Hi Isaac, there are likely other plugins that can do this, but we recommend the solution that we’re using ourselves. We have a good tutorial on how to pick the best plugin while you look through the WordPress.org plugin directory.

      Administrador

  5. Kulwant Singh

    can i create differents popup for different post ? it is possible or not

  6. Lela Donelson

    My WP menu does not have a WP forms option. I have a GoDaddy managed WP.

    • WPBeginner Support

      Hi Lela,

      WPForms is a WordPress Plugin. You will first need to install and activate it. For more details, see our step by step guide on how to install a WordPress plugin.

      If you have already installed and activated the plugin, and you still can’t see it in your WordPress admin menu, then please contact WPForms Support or your hosting company.

      Administrador

  7. Michael Wahhab

    Where’s the demo?

  8. Nick Vail

    Are pop up windows only available with the paid “business plan”?

  9. Ruben

    Before buying I want to ask, can I have two call-to-action buttons in a popup? I want two buttons one for downloading my app from App Store and second from Play Store.

  10. shagufta

    how to have tabs in the popup that will link to div’s which will open in the same popup

  11. Jhorene

    Hello,

    Before I buy Optinmonster, can you tell me if it is fully mobile responsive to have a form inside the canvas popup?

    Thank you.

    Regards,
    Jhorene

  12. Ian Perera

    can i pass data to gravity form

    • Dave E

      Hi, I’m looking for the same. Did you ever find a solution? Thanks

  13. Alicia Beale

    How can I use this pop-up contact form to notify different email addresses?

  14. Mike Whaling

    Is there a way to do this in the new version of Optin Monster? This worked great when I was using the local WP plugin, but it doesn’t seem to recognize the Gravity shortcode now that I’ve switched over to the new OM.

    Any tips or suggestions?

  15. Silvan

    could this work as well in a Wordpress navigation? I’m having some trouble adding the data-optin-slug bit via the WP menu system.

  16. sharul

    Can you please show us some demo.
    Thank you

  17. Alvin Ng

    heya man, need some help here. No matter what i do, i can’t get optinmonster to pop up. do i need to replace the # with a link?

  18. Don DeMaio

    This would be great if they offered a demo to check it out.

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.