Como fazer um formulário de contato gratuito do Elementor (o jeito fácil)

Publicados: 2020-09-16

Quer criar um formulário de contato gratuito para o Elementor? Um formulário de contato permitirá que seus visitantes entrem em contato, mesmo que não saibam seu endereço de e-mail.

Neste tutorial, mostraremos a melhor maneira de adicionar um formulário de contato à sua página Elementor. Esta opção funciona muito bem com todas as versões do Elementor, e é completamente 'sem código'!

Crie seu formulário de contato Elementor agora

Como faço para configurar um formulário de contato Elementor?

A maneira mais fácil de configurar um formulário de contato do Elementor é com o plugin WPForms.

WPForms é o melhor criador de formulários para WordPress. É perfeito para sites Elementor porque se integra perfeitamente com o construtor de páginas Elementor.

Isso significa que você pode criar uma página de 'contato' do Elementor com apenas alguns cliques.

WPForms é o melhor plugin do WordPress Form Builder. Obtenha gratuitamente!

elementor adicionar um formulário de contato wpforms

Para adicionar um formulário de contato com o Elementor, você pode usar o plugin WPForms grátis ou atualizar para a versão paga para obter mais recursos!

A versão Pro do plug-in WPForms form builder permite que você:

  • Instale complementos de pagamento para Stripe e PayPal
  • Use a lógica condicional para criar formulários que mudam dinamicamente
  • Crie formulários de várias etapas
  • Crie páginas de destino sem distrações
  • Configurar vários e-mails de notificação de formulário
  • Receba notificações por SMS de envios de formulários de contato
  • Crie formulários Mailchimp para obter assinantes de e-mail
  • Envie entradas de formulário para um CRM
  • Impeça o spam de formulário de contato com tokens de formulário secreto, nosso incrível recurso anti-spam
  • E mais!

Se você quiser saber exatamente o que obterá em cada versão, poderá aprender as diferenças entre WPForms Lite e Pro.

Agora, vamos seguir em frente e percorrer o processo de criação de um formulário de contato com WPForms e Elementor.

Como fazer um formulário de contato gratuito do Elementor

Este tutorial mostrará como criar um formulário Elementor usando WPForms Lite ou Pro. Aqui estão as etapas que iremos trabalhar:

  1. Instale o plug-in WPForms
  2. Faça o seu formulário de contato do Elementor
  3. Configurar notificações de formulário ou elemento
  4. Configurar mensagens de confirmação de formulário de elemento
  5. Crie sua página de contato do Elementor
  6. Publique sua página de contato do Elementor

Vamos configurar o plugin primeiro.

Etapa 1: instalar o plug-in WPForms

A primeira coisa que você vai querer fazer é instalar o plugin WPForms. Se precisar de ajuda com isso, confira este tutorial fácil sobre como instalar um plugin do WordPress.

Agora que o WPForms está instalado, certifique-se de clicar no botão Ativar . Se estiver usando WPForms Lite, você pode clicar em Ativar na página de plug-ins para começar.

Ative seu plugin de formulário de contato Elementor

E se o construtor de páginas Elementor já estiver instalado, você está pronto para fazer seu primeiro formulário de contato (em menos de 5 minutos!).

Etapa 2: Faça seu formulário de contato Elementor

O modelo de Formulário de contato simples possui todos os campos de que você precisa para receber mensagens do seu site. Se desejar, você pode adicionar funcionalidades extras, como menus suspensos e caixas de seleção no criador de formulários amigável.

Primeiro, na tela de configuração do WPForms, digite um nome para o seu formulário na parte superior.

Nomeie seu formulário de contato Elementor

Role um pouco para baixo e você verá os modelos de formulário.

Se você tiver o WPForms Lite, terá alguns modelos para escolher para começar. Atualize para o Pro se quiser adicionar mais de 100 modelos de formulários extras ao seu site!

Por enquanto, vamos usar o modelo Simple Contact Form . Clique nele para abri-lo em seu navegador.

Modelo de formulário de contato Elementor

Agora que você escolheu um modelo, o construtor WPForms será aberto.

A interface de usuário do WPForms foi projetada para ser super fácil de usar por qualquer pessoa. À esquerda, você pode ver todos os campos que estão disponíveis para adicionar ao seu formulário de contato. À direita, você pode ver uma visualização ao vivo do seu formulário.

Construtor de formulário de contato Elementor

Se quiser personalizar o modelo, basta arrastar qualquer campo do formulário do painel esquerdo para o formulário à direita. Você pode adicionar listas suspensas, perguntas de múltipla escolha e muito mais.

Você também pode arrastar os campos para cima e para baixo para movê-los no formulário.

Se você deseja abrir as configurações do campo, clique no campo uma vez no construtor. Ao olhar para o painel esquerdo, você verá as configurações ao lado da visualização do formulário.

Personalize os campos do formulário de contato do Elementor

Vá em frente e clique em cada campo para configurá-lo da maneira que desejar. Quando terminar, clique em Salvar na parte superior.

Etapa 3: configurar notificações de formulário ou elemento

Agora vamos verificar as mensagens que serão enviadas quando o formulário for enviado. No criador de formulários, clique em Configurações e, em seguida, clique no item de menu Notificações à esquerda.

À direita, você pode ver o e-mail de notificação que será enviado a você quando o formulário for enviado. Você pode personalizar o e-mail aqui se desejar.

Notificações de elemento ou formulário de contato

Você percebeu que o e-mail será enviado para {admin_email} ? Esse é um espaço reservado para o endereço de e-mail do Administrador no WordPress.

Você pode excluir {admin_email} e digitar seu endereço de e-mail comercial aqui ou alterar o endereço de e-mail do administrador no WordPress se estiver errado.

Etapa 4: configurar mensagens de confirmação de formulário de elemento ou formulário

Em seguida, clique em Confirmações . Nessa tela, podemos personalizar a mensagem que aparece no front end quando o formulário é enviado.

Isso é opcional, então você pode apenas deixar a mensagem padrão se estiver satisfeito com ela.

Mensagem de confirmação do construtor de formulário de elemento ou

E é isso! É hora de clicar no botão Salvar na parte superior. Você pode fechar o construtor de formulários clicando no X no canto superior direito da janela do construtor de formulários.

Bom trabalho! Seu formulário Elementor está pronto e só precisamos de um lugar para colocá-lo.

Etapa 5: Crie sua página de contato do Elementor

Nesta etapa, vamos construir uma página personalizada Fale Conosco para o seu site Elementor.

No painel do WordPress, clique em Páginas e clique no botão Adicionar novo .

Adicione a página Fale Conosco para o formulário de contato do Elementor

Vá em frente e digite seu título no topo.

adicione o título da página de contato em elementor wpforms

Agora vamos mudar para Elementor. Clique no botão azul Editar com Elementor na parte superior da tela.

editar página de contato de wpforms com elementor

Aguarde alguns segundos para que o Elementor carregue no seu navegador.

À esquerda, você verá diferentes elementos que podem ser adicionados à sua página. Na seção Básico , você verá um ícone denominado WPForms .

Vá em frente e arraste-o para sua página e clique no menu suspenso para selecionar o formulário que você acabou de criar.

adicionar wpforms em elementor form

Bom trabalho! E terminamos de usar o construtor de formulários. Tudo o que precisamos fazer agora é publicar a página de contato.

Etapa 6: Publique sua página de contato do Elementor

Você está se perguntando como adicionar uma página de formulário de contato com Elementor?

É simples: você pode publicar sua página de contato exatamente da mesma maneira que publica páginas normais no Elementor.

Tudo o que você precisa fazer é clicar no botão verde Publicar na parte inferior.

Publique seu formulário de contato Elementor

Por fim, clique em Dê uma olhada para ver o formulário de contato no seu site.

Ver página do formulário de contato Elementor

E é isso! Sua página de contato do Elementor está ativa e pronta para receber respostas.

Formulário de contato Elementor publicado

Personalize seus formulários de contato do Elementou

Então, agora que você sabe tudo sobre o incrível widget Elementor que o WPForms tem, pode verificar algumas das outras coisas que o plugin pode fazer para ajudar os formulários do seu site.

Se você deseja personalizar seu formulário, o WPForms permite alterar facilmente a cor do texto, a tipografia e a cor de fundo usando CSS.

Se desejar mais informações, confira estes artigos sobre design e estilo de formulários de contato:

  • Como criar layouts personalizados do WordPress no Elementor
  • Como fazer uma página de contato excelente
  • Como personalizar o botão Enviar em WPForms

E é isso! Agora você sabe como fazer os formulários de contato do Elementor da maneira mais fácil.

Em seguida, explore os recursos do WPForms Pro para aprender como fazer formulários avançados como:

  • Formas de pagamento com integração Stripe
  • Formulários de upload de arquivo
  • Contratos online com campos de assinatura digital.

Crie seu formulário de contato Elementor agora

Corrigir e-mails de notificação do formulário de contato do Elementor

Você está tendo problemas para receber envios de formulários de contato da Elementor por e-mail? É fácil corrigir esse problema para que você sempre receba notificações por e-mail.

Confira este guia para corrigir formulários de contato do Elementor que não enviam e-mail.

Não se esqueça! Agora que você criou um formulário Elementor, também deseja criar um formulário que se conecte ao seu serviço de marketing por e-mail favorito. Você pode fazer isso facilmente no WPForms Pro, que vem com complementos para:

  • Pingar
  • Mailchimp
  • Contato constante
  • AWeber
  • E mais.

Pronto para construir seu formulário? Comece hoje mesmo com o plug-in de formulário de contato do WordPress mais fácil. O WPForms Pro inclui toneladas de addons premium e oferece uma garantia de devolução do dinheiro de 14 dias.

Se este artigo ajudou você, siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.