Como construir um formulário de contato responsivo com PHP

Os formulários de contato são comumente usados ​​em aplicativos da Web porque permitem que os visitantes do site se comuniquem com o proprietário do site. Para a maioria dos sites, os formulários de contato responsivos podem ser facilmente acessados ​​de vários tipos de dispositivos, como desktops, laptops, tablets e telefones celulares.

Neste tutorial, um formulário de contato responsivo é implementado e os dados enviados são enviados como um email usando PHP. O pacote Phpmailer é usado neste tutorial para enviar a mensagem de contato como um email para o proprietário do site; Três arquivos são usados ​​para enviar o email do host local usando o PHP:

1. Phpmailerautoload.php
2. aula.phpmailer.php
3. aula.smtp.php

Você pode baixar esses arquivos de https: // github.com/phpmailer/phpmailer/.

Criando o formulário de contato responsivo

Use o código abaixo para criar um índice.arquivo html no /var/www/html/php Pasta para projetar um formulário de contato responsivo. O formulário conterá quatro campos: Nome, E-mail, Razão para contato e Mensagem.

índice.html

FORMULÁRIO DE CONTATO

Nome completo*







E-mail*







Razão para contato*







Mensagem*

Execute o seguinte URL de qualquer navegador para exibir o formulário de contato:
http: // localhost/php/contactform/

Crie um arquivo JS para validação e envio de formulário

Use o código abaixo para criar um arquivo JS chamado contato.JS Para validar o formulário de contato. Aqui, todos os campos são obrigatórios e o campo de email deve conter um endereço de e -mail válido. Se o ENVIAR MENSAGEM O botão é pressionado quando houver um campo vazio ou um endereço de e -mail inválido, então uma mensagem de erro será exibida. Se o formulário for validado corretamente, os dados do formulário serão submetidos ao contato.php usando o Ajax () método. Se os dados do formulário de contato forem enviados com sucesso, uma mensagem de sucesso será impressa; de outra forma. Uma mensagem de falha será impressa como um alerta.

contato.JS

$ (function ()
// Verifique os erros do validador
$ ('#cform').validador();
// após o envio do formulário
$ ('#cform').on ('submeter', função (e)
// se o validador não impedir o envio do formulário
se (!e.isDefaultPreventEd ())
var url = "contato.php ";
// Valores de postagem em segundo plano o URL do script
$.Ajax (
Tipo: "Post",
URL: URL,
Dados: $ (isso).serialize (),
Sucesso: função (dados)

var sucessalert = '×' + dados + '';
$ ('#msg').html (sucessalert);

);
retorna falso;

)
);

Crie um arquivo php para ler os dados do formulário e enviar um email

Use o código abaixo para criar um arquivo php chamado contato.php Para ler os dados do formulário e enviar um email com os dados usando o pacote phpmailer. Aqui, o servidor SMTP da conta do Gmail é usado para enviar um email. Você tem que ativar o aplicativo menos seguro opção para enviar um e -mail usando o Gmail. Defina seu endereço do Gmail como o Nome de usuário e sua senha como o Senha no código. Use um endereço de e -mail do receptor válido para substituir 'Endereço de e -mail do receptor'. Se a autenticação for feita corretamente, o email será enviado com sucesso. Uma mensagem que transmite sucesso ou falha será devolvida ao arquivo JS do arquivo php.

contato.php

// Inclua o script necessário
requer 'phpmailerautoload.php ';
// Crie um objeto
$ Mail = new Phpmailer ();
// Ativar smtp
$ Mail-> ISSMTP ();
$ Mail-> smtpauth = true;
// Ative a transferência segura
$ Mail-> smtPsecure = 'tls';
// $ Mail-> smtpautotls = false;
// Defina o nome do host SMTP
$ mail-> host = 'smtp.Gmail.com ';
// Defina a porta SMTP
$ Mail-> porta = 587;
// Configure a seguinte configuração para autenticação SMTP
$ Mail-> smtPoptions = Array (
'SSL' => Array (
'verify_peer' => false,
'verify_peer_name' => false,
'allow_self_signed' => true
)
);
// Defina seu endereço de e -mail do Gmail como nome de usuário SMTP
$ mail-> nome de usuário = 'endereço gmail';
// Defina sua senha de e -mail como senha SMTP
$ mail-> senha = 'gmail p';
// Defina o endereço do remetente
$ Mail-> setFrom ($ _ post ['email'], $ _post ['nome']);
// Defina o endereço de resposta
$ mail-> addreplyto ($ _ post ['email']);
// Defina o endereço do destinatário
$ Mail → Addaddress ('Endereço de email do receptor');
// Defina o assunto do email
$ Mail-> sujeito = $ _Post ['Razão'];
// Defina a mensagem do email
$ Mail-> Body = $ _Post ['Mensagem'];
// Ligue para a função Send () para enviar o email
if ($ Mail-> send ())
A mensagem do eco foi enviada.';
outro
ECHO 'Erro do Mailer:' . $ Mail-> errorInfo;
// eco 'erro ao enviar mensagem';

?>

Execute o URL mencionado acima, preencha o formulário com dados adequados e clique no ENVIAR MENSAGEM botão para enviar o formulário após a validação.

Se o formulário foi enviado corretamente e o email foi enviado ao receptor, a seguinte mensagem aparecerá na parte superior do formulário para informar o usuário de que a mensagem foi enviada corretamente.

Conclusão

Neste tutorial, projetamos um formulário simples e responsivo e enviamos um email com dados de formulário do host, usando o código PHP. O formulário de contato é uma parte essencial de qualquer site, pois permite que os visitantes entrem em contato com o proprietário do site para se conectar ou fazer perguntas. Os campos do formulário podem variar com base nos requisitos do site.