Formulário de Contato com Elementor FREE

Ter uma página de contato é essencial para que os visitantes do seu site possam se comunicar com você de uma forma mais profissional.

Nesse post, eu vou te mostrar como criar uma página com um formulário de contato usando apenas a versão gratuita do Elementor. Pra seguir esse tutorial, você vai precisar já ter o WordPress instalado, assim como o plugin do Elementor. Se você ainda não tem isso, eu vou deixar um outro tutorial ensinando a fazer isso aqui.

Se você deseja acompanhar esse tutorial completo através do YouTube, basta acessá-lo no nosso canal através do link abaixo:

Nesse post você vai aprender a criar uma Página de Contato como essa (abaixo), vamos lá?

YY
Formulário de Contato

Esse tutorial tem basicamente duas partes, na primeira nós vamos criar o formulário
e configurar ele para que as mensagens que forem enviadas através dele cheguem
pra você no seu e-mail. A segunda é a parte de customização do formulário, quando
vamos mudar o design dele para melhor adequar ao seu projeto.

Criação do Formulário

Para a criação do formulário nós vamos usar o plugin do Contact 7 Form. Pra adicionar esse plugin, nós vamos no painel do WordPress > Plugins > Adicionar Novo > Instalar e ativar.

32222
Contact Form 7

Após o Contact Form 7 ficar ativo, você terá a opção de Contato. Nós vamos configurar esse formulário clicando em Contato > editar. O formulário já vem com algumas opções padrão (nome, e-mail, assunto e mensagem). Você pode customizar da maneira que preferir.

3333
4444

Caso você queira incluir novas informações como número de telefone, também poderá ser feito isso, basta selecionar nas tags disponíveis.

Ao clicar em ”tel”, de telefone, uma aba será aberta. Nessa aba, você deve informar no espaço valor padrão como o usuário deverá informar o telefone. Você poderá colocar, por exemplo: (DDD) 9****-****, em seguida clicar em inserir tag.

5555
5555a

Para colocar um rótulo para o Telefone, como nas outras opções, você vai copiar a tag <label> e na frente colocar ”Telefone” e fechar com </label>. (imagem abaixo)

7777

Na segunda aba, Mail, você vai configurar como receberá as mensagens que as pessoas responderem através do formulário. Então, em Para, você vai colocar o e-mail que deseja receber as mensagens e em Assunto, como você deseja que essas mensagens sejam identificadas ao recebê-las no seu e-mail.

8888

Customização do Formulário

Com o formulário devidamente configurado, agora nós vamos mexer na
parte de design. Existem duas formas de fazer isso, primeiro é adicionando alguns
códigos de CSS e a outra forma é usando um plugin gratuito chamado Premium
Addons for Elementor
. Nesse tutorial, eu vou mostrar como mexer no Layout do formulário usando o plugin Premium Addons for Elementor.

9999
Premium Addons for Elementor

Após instalado e ativado, ele aparecerá na aba lateral, você deverá clicar nele e posteriormente na opção Widgets & Add-ons. Em seguida deve procurar pelo Contact Form 7 para habilitá-lo, basta clicar na aba da frente de modo que fique verde.

100

Para começar a customização, você deve ir em Páginas, na aba lateral e abrir a Página de contato. Você deve incluir o formulário no projeto, para isso, você vai procurar pelo Widget do Contact Form 7 e arrastar para dentro do projeto.

11

Na opção Formulário de Contato, você deverá escolher o formulário que você criou anteriormente.

12

O formulário será inserido com as informações que você definiu anteriormente e o design (cores, tamanho da fonte) será definido pelo seu tema. Mas não se preocupe, você poderá customizar o formulário como quiser.

13

Para fazer todas as alterações que deseja, basta clicar no formulário e fazer as alterações nas abas conteúdo, estilo e avançado. Assista o vídeo no YouTube para ver possíveis alterações que foram feitas nesse tutorial.

14
15

Prontinho! Seu Formulário de Contato está pronto.

17

Agora, se além de receber mensagens você estiver querendo capturar e-mails, isso é,
leads para o seu negócio, você vai precisar de uma página de captura, então eu
sugiro que você veja esse vídeo aqui. Nele você encontra um passo a passo de como criar uma página de captura e integrar com uma ferramenta de email marketing, então dá uma conferida!

Se você gostou desse tutorial, você pode encontrar muitos outros no nosso canal no YouTube, se inscreve lá e faça parte da família.

Posts relacionados

Melhore a velocidade de carregamento do seu site WordPress com esses trechos de códigos
Descubra como adicionar códigos CSS no WordPress de forma gratuita apenas com o Elementor na versão gratuita.
Aprenda como criar um cabeçalho fixo no Elementor que desaparece ao rolar para baixo e reaparece ao rolar a página para cima.
Descubra como usar a Inteligência Artificial para criar os layouts dos seus sites e Landing Pages.

Preencha com suas informações