Formulário de contato - Contact Form 7

De Task Wiki
Ir para: navegação, pesquisa

Instalando o plugin Contact Form 7

Para instalar o plugin Contact Form 7, siga o passo a passo abaixo:

Elipse 1.png Acesse a área administrativa do Wordpress, normalmente: http://seudominio.com.br/wp-admin

Elipse 2.png Faça login com seu usuário.

Elipse 3.png Clique em "Plugins", no painel vertical do lado esquerdo.

Elipse 4.png Em seguida clique em "Adicionar Novo".

Elipse 5.png No campo "Pesquisar", digite "Contact Form 7", e então clique em "Pesquisar plugins".

Elipse 6.png Instale a versão encontrada do "Contact Form 7".

Ao seguir os passos acima corretamente, o plugin será instalado:

Contactform71.png

Lembre-se de ativar o plugin, conforme ressaltado acima

Configuração do Contact Form7

Para configurar o Contact Form 7, siga o passo a passo abaixo:

Elipse 1.png No lado esquerdo do painel administrativo, clique na opção "Contato", que foi ativada durante a instalação e ativação do "Contact Form 7".

Elipse 2.png Nesta página clique em "Contact Form 1".

Elipse 3.png Na seção "Mail", configure os campos de acordo com a imagem abaixo:

Contactform72.png

 Salve a configuração efetuada. 
Lembramos que não deve ser utilizado o e-mail do cliente no campo "De:", pois isso fará com que o envio de mensagens não funcione 
adequadamente. Por exemplo: não é adequado utilizar contas de e-mail como @yahoo.com.br, @hotmail.com, @gmail.com e etc no campo "De:",
pois o envio da mensagem será efetuado pelos servidores da Task, e não dos domínios informados. É necessário utilizar uma conta de e-mail
válida de seu domínio na Task.
No exemplo, utilizamos por padrão o envio para a conta "contato@seudominio.com.br" para ela mesma, mas não haverá problema em configurar o 
envio de "contato@seudominio.com.br" para "site@seudominio.com.br", ou outra conta válida do seu domínio.

Criação da página de Formulário de Contato

Elipse 1.png Na área administrativa do Wordpress, no painel localizado a esquerda, clique na opção "Contato".

Elipse 2.png Nessa opção, copie o código "Shotcode", que por padrão deverá estar da seguinte forma:
[contact-form-7 id="4" title="Contact form 1"]

Elipse 3.png Em seguida no menu vertical, clique na opção "Páginas".

Elipse 4.png Após clique em "Adicionar Nova".

Elipse 5.png Informe o título da Página, como por exemplo:
"Contato", "Formulário de Contato", ou algum outro de sua preferência.

Elipse 6.png Cole (CTRL+V) no corpo da nova página o código que copiou.

Elipse 7.png Abaixo um exemplo de como o formulário deve ser apresentado:

Contactform73.png

Realizando testes

Para testar, siga o passo a passo abaixo:

Elipse 1.png Acesse a página de contato.

Elipse 2.png Preencha os campos do formulário.

Elipse 3.png Clique em "enviar".

Elipse 4.png Se a mensagem abaixo for exibida, acesse o e-mail da conta utilizada para verificar o recebimento do formulário.

Contactform74.png