Agora aprenderemos a criar a tela de contato típica com um formulário básico.

O WordPress de fábrica não vem com nenhuma opção para gerar um formulário de contato, portanto precisaremos de um plugin que nos permita criá-lo.

🔧 Instalar e ativar o plugin “Contact Form 7”

Lembre-se que aqui temos uma 🔌 lista de plugins imprescindíveis para WordPress.

Você também se lembra 🔧 como instalar um plugin no WordPress?

Pois bem, neste exemplo instalaremos “Contact Form 7“, que é um plugin para criar formulários de contato, leve, bastante simples e além disso gratuito.

⚙️ Configuração inicial do formulário de contato

Uma vez instalado e ativado o “Contact Form 7”, vamos em “Contato → Formulários de contato“, opção que anteriormente não aparecia 👀:

Teremos como exemplo um formulário já criado chamado “Formulário de contato 1“. Podemos usar este para começar a trabalhar, portanto vamos editá-lo.

🧪 Personalizar nossos campos do formulário

Uma vez dentro, aparecerá uma tela como esta na qual aparece:

📣 Título do formulário: “Formulário de contato 1”.

🧩 Código Shortcode: que copiaremos e colaremos onde quisermos nosso formulário [na imagem é o que aparece em azul entre colchetes].

⚙️ Abas com mais opções: Formulário, E-mail, Mensagens, Configurações adicionais.

🎙️ Campos de formulário disponíveis: São os botões que aparecem de “texto, e-mail, url, telefone, número, etc”.

🥁 Código HTML do formulário: Este código “desenhará” nosso formulário. Podemos alterar a ordem dos campos, o texto de cada campo, se serão obrigatórios ou não, alterar o texto do botão “Enviar”, etc.

🧬 Introduzir um novo campo no formulário

Para este exemplo, vamos introduzir um novo campo chamado “Telefone” para que o usuário possa inseri-lo.

No código, clicamos entre os [shortcodes] “Seu e-mail” e “Assunto” e damos “enter” no teclado para dar espaço ao novo campo que vamos inserir.

Clicamos no botão chamado “telefone” e aparecerá este popup:

Em “Nome do campo” vamos alterá-lo para ☎️ “tel-telefone” para que seja mais fácil para nós identificá-lo e clicamos no botão “Inserir“.

Aparecerá o novo shortcode do campo telefone:

Se você reparar, coloquei um asterisco * no final do tipo de campo: [tel* tel-telefone]

O asterisco indica que o campo será obrigatório. Também pode ser colocado pelo popup anterior.

Também escrevi um texto “Telefone” para que o usuário o veja.

Envolvi tudo entre tags <label></label>. O que isso faz? Isso envolve o texto “Telefone” e o campo de tal forma que se o usuário clicar no texto, apontará diretamente para a caixa para que o usuário possa escrever dentro dela. Se não colocar as tags “label”, se o usuário clicar no texto “Telefone”, simplesmente selecionará o texto, mas não a caixa. Teste para ver a diferença entre colocar as tags <label> e sem <label>.

📨 Configurar o e-mail que receberemos do usuário

Vamos para a aba “E-mail”:

Na parte sinalizada em verde, você verá nosso [shortcode] de telefone que criamos e que aparece em negrito.

Isso quer dizer que o campo está criado no formulário, mas não o estamos usando no e-mail que nos enviarão.
Portanto, vamos copiar e colar o [shortcode] no corpo da mensagem do e-mail, junto com o texto “Telefone”:

Quando recebermos este e-mail, os [shortcodes] serão substituídos pelo conteúdo que o usuário inseriu.

🧓🏾 Na seção “Para”: Você deve colocar o e-mail para onde deseja que o e-mail chegue.
Se deixar o [shortcode] padrão que aparece, ele chegará ao e-mail do administrador que você tiver configurado no seu WordPress.

🧑🏽‍🦱 Na seção “De”: Você deve colocar o e-mail do remetente.

👉 IMPORTANTE: Este e-mail deve ter o mesmo domínio do site para não ser considerado SPAM. Ou seja, se seu site é “mentazen.com”, o e-mail do remetente deverá ser, por exemplo, “xxxxxx@mentazen.com” e não “xxxxxx@algodiferente.com”

Salve o formulário, agora você verá que o [shortcode] não aparecerá mais em negrito, isso porque agora o estamos usando no e-mail.

📖 Alterar os textos de informação, erro, etc, do formulário

Vamos para a aba “Mensagens”:

Se desejar ou precisar, aqui você pode alterar a mensagem que aparece ao usuário ao enviar uma mensagem com sucesso “Agradecemos sua mensagem. Ela foi enviada” e outros tipos de mensagens como as de aviso ou erro.

❇️ Dica: Alterar esses textos também é útil quando queremos traduzir um site para diferentes idiomas, criando um formulário diferente para cada idioma e traduzindo os textos.

Finalmente, Salve o formulário.

📬 Inserir o formulário em nossa página de Contato

Veremos o [shortcode] do nosso formulário, que será parecido com este que marco em verde, COPIE!

Você também pode encontrá-lo na tela inicial onde aparecem todos os formulários “Contato → Formulários de contato”

Cada formulário, em seu [shortcode], terá um id=”xxxx” diferente, que será o que identifica de forma única cada formulário. Portanto, pode ser que seu formulário tenha um id diferente.

Pois bem, com o [shortcode] copiado, cole-o em sua página de “Contato” na área que desejar do conteúdo junto com o texto que quiser adicionar como “Este é o nosso formulário”, salve e visualize sua tela.

Deveria ficar algo assim:

Claro que o aspecto pode ser totalmente diferente, pois depende do nosso Tema instalado. O importante é que nossos campos apareçam.

❇️ Dica: Quando um campo é obrigatório, é recomendável colocar alguma identificação como um asterisco *Telefone, e colocar alguma frase tipo “*Campos obrigatórios”, para que o usuário interprete que será um campo obrigatório.

Pronto! 🎉 Já temos nosso formulário. Agora, se você testar enviá-lo, pode funcionar ou não. Por quê? Porque provavelmente teremos que configurar o servidor SMTP, que é a configuração que serve para enviar e-mails a partir do site.