Crie e projete formulários com o widget Elementor Form

Todo site deve incluir um formulário de contato! Os formulários de contato são úteis para diversos fins, independentemente do tipo de site que você possui. Eles podem gerar leads, construir conexões e relacionamentos, permitir que os usuários relatem problemas com seu site e tudo mais.

Não é necessário ser um especialista técnico para criar formulários de contato no WordPress. O construtor de páginas Elementor torna mais fácil do que nunca a criação de belos sites.

Para demonstrar como criar formulários de contato com Elementor, veremos as diferentes opções e tudo o que há para saber sobre formulários de contato em Elementor.

A Elementor já inclui um widget de formulário há algum tempo, o que significa que você não precisa mais ir a nenhum outro lugar para criar formulários para o seu site WordPress, o que é uma bênção!

No passado, você pode ter encontrado dificuldades ao criar Formulários com alguns dos plugin disponíveis. O processo de criação e configuração de Formulários pode ser demorado e frustrante. Felizmente para todos nós, o widget Elementor Form é fácil de trabalhar.

Antes de começarmos com o construtor de formulários Elementor, vamos dar uma olhada rápida em alguns de seus recursos mais essenciais.

Um dos recursos mais diferenciados, para começar, é que ele está totalmente integrado à interface do Elementor, o que significa que você tem acesso a muitas opções de design/estilo/layout disponíveis no Elementor. Não acredito que você encontrará um plugin de formulário independente com um sistema de design tão robusto quanto este.

A partir daí, você pode criar até 18 tipos diferentes de campos:

  • Texto E-mail Área de texto Área de texto
  • O URL e o número de telefone são os seguintes:
  • Os botões de opção são um tipo de botão de opção.
  • Escolha em uma lista (menu suspenso)
  • As caixas de seleção são usadas em listas de verificação.
  • Existe apenas uma caixa de seleção (aceitação)
  • reCAPTCHA
  • Honeypots são um tipo de recipiente que contém mel (evita spam)

Você também pode dividir seus formulários em várias páginas para criar formulários de várias etapas, benéficos para aplicativos de formato longo.

Elementor Pro tem mais de 12 integrações com serviços populares de email marketing e sistemas de gerenciamento de relacionamento com o cliente para ajudá-lo a aproveitar ao máximo seus formulários. Há também uma integração abrangente do Zapier que permite que você se conecte a qualquer uma das milhares de ferramentas disponíveis na plataforma Zapier, caso sua ferramenta não esteja listada.

Existem algumas outras alternativas intrigantes também. Por amp , quando alguém preencher seu formulário, você poderá receber notificações via Slack ou Discord.

Falando em notificações, você também pode personalizar as notificações por e-mail que recebe e as notificações por e-mail que os remetentes do formulário recebem. Depois que eles enviarem o formulário, você poderá redirecioná-los para uma página de agradecimento personalizada criada por você.

Qual é a melhor maneira de criar um formulário no Elementor?

Começaremos abrindo o editor Elementor e arrastando e soltando o widget Form no local onde queremos construir nosso Form.

Como criar um formulário Elementor

Como tudo no Elementor, o processo de criação de Formulários é realizado visualmente. Não é necessário utilizar plugin adicional, nem é imprescindível atuar como backend do seu site.

Formando Elementos Elementor de Forma Estruturada

Depois que seu formulário estiver pronto, o primeiro passo é organizar as informações nele contidas. Quais campos você precisa e que tipos de campos eles deveriam ser? O que você está procurando?

Ao trabalhar no editor Elementor, os campos do formulário são adicionados e editados na guia Conteúdo. Como você pode ver no amp abaixo, os Formulários incluem alguns campos padrão. Ao selecionar Adicionar item no menu suspenso, você pode criar novos campos.

A duplicação de um Campo também é possível selecionando o ícone que se parece com dois documentos, um na frente do outro, e clicando nele. 

Tipos de campos em um formulário

Muitos tipos de campos de formulário estão disponíveis, desde campos de texto simples até campos de senhas, ReCaptcha e honeypot.

Para alterar o comportamento de um campo de formulário, primeiro selecione o campo e, em seguida, curta o menu suspenso Tipo para ver os vários tipos de campo disponíveis.

Tipos de campos em um formulário Elementor

Largura de uma coluna de formulário

Este recurso permite que você use dois campos de formulário na mesma linha ajustando a configuração de largura da coluna. Altere a largura da janela selecionando-a no seletor suspenso e selecionando 50 por cento. Vale ressaltar que se você fizer isso com dois campos de formulário consecutivos, notará que eles aparecem juntos na mesma linha.

Formulários em Elementor para estilo

Estilize seus formulários no Elementor da mesma forma que estiliza outros widgets, navegando até o painel Estilo localizado na interface de edição do Elementor.

O próprio formulário, os campos, botões, quaisquer etapas, mensagens de erro e mensagens de confirmação podem ser personalizados.

Para aqueles que já estão familiarizados com o Elementor, não há muito mais que precisam aprender sobre como estilizar Formulários Elementor.

Ações em um formulário

Seguindo nossa discussão sobre a criação de um formulário no Elementor, vamos ver como configurar o que acontece após o envio do seu formulário; isso é realizado por meio de ações de formulário, ou como são referidas em Elementor, Actions After Submit.

Quando um formulário é enviado, é comum que o sistema envie um e-mail e redirecione o usuário para uma página diferente. Você pode, é claro, incluir quantas ações quiser em seus Formulários e combiná-las da maneira que desejar. Como seria de esperar, existe um campo seletor específico sem codificação envolvida.

Cada uma das ações adicionadas aparecerá como uma opção de guia separada no menu principal. Atualmente temos uma opção de guia para Email, mas se eu incluísse um redirecionamento no campo Adicionar ação, também veria Redirecionar nas opções da minha guia, conforme mostrado no amp abaixo.

Para finalizar, demonstrarei como configurar o Formulário para aceitar envios via Email, a dúvida mais frequente sobre Formulários.

Ao selecionar Email na guia Conteúdo do editor, será apresentada a tela mostrada abaixo; é aqui que você pode personalizar o e-mail de origem e o e-mail de resposta, e também pode adicionar um CC ou CCO para qualquer pessoa que deva receber uma cópia dos envios do Formulário.

Criando um modelo de mensagem de formulário de contato no Elementor

Muitas pessoas ficam surpresas ao saber que o editor de formulários do Elementor é mais poderoso do que parece à primeira vista, e um dos recursos mais avançados é a capacidade de personalizar as mensagens para cada formulário.

É possível customizar as mensagens do formulário para fornecer um processo de feedback mais personalizado ao usuário final que preencheu seu formulário, ao invés de parecer um robô chato. Mas, especificamente, quais mensagens você pode personalizar para seu formulário de contato Elementor são as seguintes:

Para começar, você deve primeiro habilitar mensagens personalizadas selecionando “Opções adicionais” no menu suspenso e, em seguida, mudando o botão de alternância de “Mensagens personalizadas” para “Sim”.

Personalização do widget do formulário de contato Elementor adicionando mensagens personalizadas

Como você pode ver, existem quatro mensagens diferentes que você pode personalizar, incluindo as listadas abaixo:

Uma mensagem de sucesso é exibida ao usuário final após enviar o formulário e verificar se o formulário foi preenchido corretamente (por exemplo, nenhum campo obrigatório faltante, etc.).

Mensagem de erro — uma mensagem exibida ao usuário final quando ocorre um erro desconhecido durante o envio do formulário.

Mensagem obrigatória — aparece quando um campo obrigatório do formulário não é preenchido, o formulário é enviado e o formulário não é preenchido.

Quando algo no envio do formulário está incorreto e não pode ser enviado, a mensagem Mensagem inválida é exibida ao usuário final.

Ser capaz de editar as mensagens permite que você seja criativo e peculiar, ou mais formal e profissional se você administra um site corporativo. O melhor é que eles são totalmente editáveis, então você pode fazer o que quiser!

Conclusão

Widget de formulário Elementor, é fácil construir um formulário de contato. Ele vem com um construtor de formulário de contato intuitivo de arrastar e soltar e uma infinidade de opções de personalização que o distinguem de outros plugin de formulário de contato disponíveis no mercado. Você pode personalizar facilmente seu estilo e esquema de cores para combinar com a aparência da sua empresa. Também estão incluídos vários outros widgets atraentes, mais de 300 modelos profissionais e um construtor de pop-up em um pacote conveniente. Este construtor de páginas WordPress completo consiste em todos os widgets e recursos necessários, para que você não precise adquirir construtores de páginas adicionais para personalizar ainda mais seu site. Além disso, permite a integração de mais de 30 serviços de marketing, por isso é um dos plugin mais adquiridos no mercado atualmente.

Hanson F.

Postagens recentes

Como usar cabeçalhos e rodapés com Elementor

Os cabeçalhos e rodapés de um site são elementos essenciais. Na maioria dos casos, o cabeçalho fornece navegação…

6 de janeiro de 2022

Comparação de temas WordPress: Astra vs OceanWP

Dois dos temas WordPress mais populares do mercado são Astra e OceanWP. Profissional…

2 de janeiro de 2022

Comparação de temas de notícias WordPress: Jornal vs.

Criar um excelente site de notícias não exige que você se torne um web designer. Nós…

25 de outubro de 2021

Crie um site relacionado a notícias com tema de jornal

O tema Jornal é um dos temas WordPress mais importantes desenvolvido por tagDiv, um…

18 de outubro de 2021

Como construir um comércio eletrônico com o construtor Avada WooCommerce

Quando se trata de abrir uma loja online, WooCommerce é o plugin ideal. Isto…

4 de outubro de 2021

Como usar cabeçalho fixo e efeitos de rolagem com Elementor

Um cabeçalho geralmente é a primeira coisa que uma pessoa vê quando visita seu site,…

21 de setembro de 2021