Como criar um pop-up de formulário de contato no WordPress – passo a passo

como criar um pop-up de formulário de contato no wordpress


Deseja exibir seu formulário de contato quando um usuário clica no botão ou no link do contato?

A vantagem é que sempre que um usuário clica no botão ou no link do contato, em vez de ir para uma nova página, o formulário de contato é aberto na forma de um pop-up, o que aumentaria o envio de formulários. Neste artigo, mostraremos como criar um pop-up de formulário de contato no seu site WordPress sem afetar a experiência do usuário passo a passo.

Criando um pop-up de formulário de contato facilmente no WordPress

Com o WordPress, é fácil criar um pop-up de formulário de contato. Para começar, você só precisa ter duas coisas:

  1. um poderoso plugin pop-up
  2. um robusto plug-in do construtor de formulários

Para alcançar os melhores resultados, recomendamos o uso de WPForms para criar seu formulário de contato. É um poderoso plug-in do construtor de formulários que permite criar praticamente qualquer tipo de formulário em menos de 5 minutos. Leia mais sobre o WPForms aqui.

WPForms, registro do usuário, plug-in, plug-in de login do usuário

Quando se trata de plug-ins pop-up, achamos que não há outra opção melhor do que OptionMonster. É um dos plug-ins de geração de leads mais populares e poderosos que permite capturar a atenção do visitante e incentivá-lo a agir no seu site com o uso de opções impressionantes. Através deste plug-in, você pode aumentar o envolvimento do usuário e aumentar suas conversões e vendas.

optinmonster-popups

Para saber mais sobre o OptinMonster, leia nossa revisão detalhada do OptinMonster.

Etapa 1: instalar os plugins WPForms e OptinMonster

add-wordpress-plugins

Comece baixando o WPForms plugar. Em seguida, instale e ative-o. Não sabe como? Sem problemas. Você pode acessar o nosso guia sobre como instalar um plugin do WordPress para resolver tudo isso. Bem espere.

Tudo pronto? Perfeito.

Siga o mesmo processo para ativar o plug-in OptinMonster. Mas não é suficiente instalar apenas o plug-in. Você terá que Crie a sua conta aqui com o aplicativo OptinMonster também. O plug-in funciona apenas como um meio para conectar seu site WordPress ao aplicativo OptinMonster. Portanto, para que funcione corretamente, é necessário instalar o plug-in e criar uma conta com o aplicativo.

Etapa 2: Criar um formulário de contato usando WPForms para o pop-up

Primeiro, usaremos o plug-in WPForms para criar um formulário de contato. Mas se você estiver usando o WPForms e já tiver criado um formulário de contato com ele, poderá pular esta etapa.

Se você não possui um formulário de contato, acesse seu painel e clique em WPForms »Adicionar novo.

wpforms-dashboard

Isso o levará a outra página onde você pode selecionar um modelo de formulário e adicionar um nome ao seu formulário. Selecione os Formulário de contato simples modelo e dê um nome ao seu formulário.

Modelos WPForms Lite

Após a conclusão do processo, o criador de formulários será iniciado, facilitando o design dos formulários. Você pode adicionar ou remover arquivos facilmente usando o construtor drag and drop.

Você pode adicionar todos os campos que julgar necessários para o seu formulário. Quando tudo estiver pronto, clique no botão Salvar para salvar suas alterações. Seu formulário de contato está pronto para ser lançado.

Agora bata no Embutir guia ao lado do botão Salvar e copie o código abreviado.

Etapa 3: Criando um pop-up do WordPress usando o OptinMonster

O próximo passo é criar um pop-up no seu site. Criaremos um pop-up modal usando OptinMonster. Então, vá para o painel do WordPress e clique em OptinMonster »Criar nova campanha.

Isso abrirá uma nova tela onde você pode selecionar o tipo de campanha seguido pelo modelo de sua opção. Para o tipo de campanha, selecionaremos a opção pop-up.

Para o modelo, vamos para Tela de pintura. Esta é uma tela em branco que suporta todas as formas de códigos de acesso. Assim, você pode inserir códigos HTML, CSS, JavaScript e até mesmo WordPress aqui.

Depois de selecionar o modelo, você será direcionado para uma nova tela onde poderá nomear sua campanha.

Em seguida, clique no Comece a construir aba. Agora você será direcionado para o construtor de arrastar e soltar. Você notará que a tela está em branco em termos de design. Você pode criar qualquer pop-up usando essa tela e projetá-los do zero. Você pode fazer isso usando as opções sob o Projeto aba.

Depois de concluído, clique no Adicionar blocos guia na guia Design. Role para baixo para encontrar o Blocos de elemento opções Abaixo disso, você verá um bloco HTML. Arraste e solte-o na área de desenho.

Aqui, você pode inserir um código de acesso do formulário de contato junto com qualquer outro HTML personalizado que desejar adicionar. Então, vamos adicionar nosso código de acesso, que é o seguinte:

Você tem alguma pergunta?

Deseja perguntar mais sobre o nosso serviço? Basta preencher o formulário e entraremos em contato o mais breve possível.

Aqui está uma prévia de como você pode fazer isso.

Observe que o código abreviado do formulário que criamos anteriormente também foi incorporado no código. Você pode substituir esse código curto pelo seu. Agora salve suas alterações. Depois disso, vá para o Regras de exibição guia e defina o tempo como zero, conforme mostrado na captura de tela.

Role mais para baixo nesta tela e você encontrará mais opções. Você pode usá-los se desejar exibir este formulário em uma página ou postagem específica. Acerte o Salve  botão quando terminar.

Etapa 4: Publicando seu formulário pop-up

Depois de concluir as alterações, clique no ícone Sim não opção na parte superior e clique no ativar aba.

Por fim, vá para o Publicar guia e alterne o status para viver.

optinmonster, portão de boas-vindas, portão de boas-vindas do wp, construção de lista

Quando terminar, retorne ao seu painel do WordPress e vá para OptinMonster »Campanhas. Aqui, você verá sua campanha. Abaixo desse clique no Editar configurações de saída ligação. Ele será expandido para exibir algumas opções. Marque a caixa ao lado de Ativar a campanha no site opção.

Por fim, clique no Salvar configurações opção no final da página.

Etapa 5: Adicionando um link para acionar o pop-up do formulário de contato

Primeiro copie a lesma da campanha OptinMonster. Você pode encontrá-lo ao lado do nome da sua campanha.

Agora crie uma nova página no WordPress ou edite uma postagem ou página na qual deseja adicionar o link ou botão pop-up do formulário de contato. Vamos criar um novo aqui. Vá para o seu editor de texto e adicione o seguinte código. Não se esqueça de substituir a lesma por sua própria lesma.

Contate-Nos

Uma vez feito, pressione o Publicar botão à sua direita. Seu formulário está agora em ação. Visite seu site pelo front-end e você o verá.

Esperamos que você tenha achado este artigo útil. Se você quiser saber mais sobre como criar um formulário de contato com o WPForms, aqui está um guia detalhado.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map