Passo-a-Passo Wordpress >> WordPress – Criando formulários de contato pelo Contact Form 7

WordPress – Criando formulários de contato pelo Contact Form 7



Veja como criar um formulário de contato para o seu site WordPress utilizando o plugin Contact Form 7. Versão em texto do vídeo:

Formulários de contato são um meio muito fácil e prático, para que seu público ou seus consumidores entrem em contato com você através de seu site. Vamos aprender a como fazer um formulário de contato no nosso site em WordPress, utilizando um plugin muito importante chamado Contact Form 7 e se você não tiver um site, entre em contato com a Hostnet, pois agora existe uma promoção especial que te dá um ano de domínio grátis, para isso acesse: "http://www.hostnet.com.br/" e clique em “Promoções” ou clique aqui e acesse diretamente a página.

Vamos exemplificar a criação de um formulário de contato, utilizando o site "http://www.guanabara.info". Para isso, acesse seu painel de controle, que é o endereço do site seguidamente de "/wp-admin". No canto esquerdo, procure a seção de “Plugins”.

Na seção de “Plugins” antes de ativar o Contact Form 7, vamos utilizar o "WP-Mail-SMTP", este plugin já vem instalado no Super WordPress para quem é assinante Hostnet, mas você pode utilizá-lo em qualquer instalação do WordPress, vamos ativá-lo.

Uma vez ativado, esse plugin vai substituir as funções de envio de e-mail do PHP para funções de envio e-mail dentro do próprio WordPress. No canto esquerdo, na seção “Configurações” você encontra o item “E-mail”, clique sobre ele.

Nesse formulário você vai configurar, um e-mail de contato, pois é para ele que as mensagens serão enviadas. Preencha o primeiro campo, com seu endereço de e-mail, o segundo campo com seu nome completo. Abaixo de seu nome, você vai selecionar o item “Send all WordPress emails via SMTP” em seguida coloque o endereço de seu host, que é "smtp.nomedoseudominio.com.br". Em “SMTP Port” coloque 587. Selecione o item “No encryption”. Em “Autenticação” selecione a opção “Yes: Use SMTP Authentication”. Em “Username” você vai colocar o seu endereço de e-mail, só que no lugar do "@" o sinal de "=". Isso é a configuração de seu servidor SMTP, se você é cliente Hostnet essa é a configuração, se você tem sites em outros hosts, utilize a sua configuração própria, em seguida, a sua senha. Cuidado, pois ela aparecerá nesse formulário. Para salvar clique em “Update Options”.

Depois de configurado, você pode enviar um e-mail de teste para um endereço qualquer, basta digitar o endereço na caixa “To” de “Send a Test Email” e clicar em “Send Test”.

Depois de ativar e configurar o plugin de SMTP, vamos ativar o Contact Form, para isso, no canto esquerdo vá na seção de “Plugins” e procure a opção “Contact Form 7″. Esse plugin também é colocado automaticamente quando você instala o Super WordPress na Hostnet. Clique no botão “Ativar”. A partir de agora, no canto esquerdo inferior você tem uma seção do WordPress, chamada “Contato”. Vamos clicar em “Editar”.

Em seguida, você verá a área do Contact Form 7, vamos clicar em “Adicionar Novo”, automaticamente será detectada a linguagem do seu WordPress, se não for detectada, basta selecionar logo abaixo, que é o Português Brasileiro, depois clique em “Add New” e já é preenchido um formulário com algumas informações básicas. Se o seu formulário de contato for somente isso, basta salvar.

Vamos fazer uma alteração, solicitando o sexo do usuário. Logo após o nosso e-mail, vamos adicionar uma nova tag, no caso, para sexo, o usuário vai poder marcar uma das opções, sendo assim o melhor ícone é um botão rádio (radio-689), colocamos o nome como “Sexo” e o identificador (id) também e na caixa de opções, vamos colocar uma opção por linha: “Masculino” e “Feminino”. Ao apertar a tecla “Tab” você vai receber uma opção dizendo “Copie este código e cole-o no formulário à esquerda” clique uma vez sobre ele, pressione “CTRL+C” e no lugar em que você vai querer que ele pergunte o sexo, coloque:

"<p>" (Para criar um parágrafo) e digite:

"Seu sexo" e depois digite "<br>" (Para quebra de linha)

E na linha de baixo, pressione “CTRL+V”. Em nosso caso foi gerado o seguinte código: "[radio sexo id: sexo "Masculino" "Feminino"]"

Assim serão criados botões de rádio, com as opções “Masculino” e “Feminino”. No final, utilize a tag "</p>" para fechar o parágrafo. Feito isso, vamos configurar como você vai receber o e-mail.

Automaticamente será colocado o e-mail para qual todas as mensagens serão enviadas a você. Poderá configurar qualquer nome, utilizando esses nomes-chaves: “your-name”, “your-email”, “sexo”, “your-subject”, “your-message”. Você pode alterar isso, colocar por exemplo, “sua-mensagem”. Se fizer qualquer alteração, vá até o canto inferior direito da tela e no lugar de “your-message” coloque “sua-mensagem”.

Como esse e-mail vai ser recebido por você, não há tanta preocupação em relação a formatação dessa área debaixo.

Apesar de não recomendar isso, você pode marcar a opção “Usar tipo de conteúdo HTML”. Recomendamos que você deixe essa opção desmarcada. Na parte debaixo, clique em “Salvar”.

A partir de agora você recebe uma informação para copiar esse código e colocá-lo no post que receberá o formulário de contato, pressione “CTRL+C”. Vamos agora, criar uma página de contato, no canto esquerdo do WordPress, procure a seção “Páginas” e clique em “Adicionar Nova”.

No formulário de nova página, digite: Contato. Na aréa do texto coloque:

Preencha o formulário de contato. Assim que possível, responderemos sua dúvida.

Na linha debaixo, pressione “CTRL+V” para colar a chave que foi gerada pelo próprio plugin, em seguida, clique em “Publicar”.

Depois de publicar a página, vamos atualizar a visualização do nosso site. A partir de agora, temos um link “Contato”. Clicando sobre ele, teremos a página que criamos com o formulário de contato, inclusive, solicitando o sexo do visitante. Todos os dados preenchidos nesse formulário serão enviados a você, por e-mail.


Tags:, , ,





Compartilhe:

Qual é a sua opinião sobre isso?

Faça um comentário, crítica ou sugestão e ajude-nos a melhorar ainda mais os nossos serviços.

Seja o primeiro a comentar!

Opine sobre este assunto