Formulário de Contato com AJAX + PHP + MySQL
Olá pessoal, hoje vou demonstrar como construir um formulário de contato enviando as informações via AJAX para o PHP, as informações recebidas serão gravadas em uma tabela no banco de dados e também vamos enviar e-mail com os dados coletados no formulário.
Diariamente recebo e-mails e também acompanho nos fóruns pessoas com dúvida sobre como construir um formulário de contato, enviar e-mail e gravar os dados enviados em um banco de dados.
É muito simples pessoal, basta seguir o fluxo do processo!
Layout do Formulário de Contato
Nosso formulário será bem simples somente com os campos básicos, para validação vou usar o atributo “required” implementado no HTML 5, será utilizado bootstrap para estilizar o formulário e a biblioteca jQuery para enviar a requisição AJAX.
No final do script temos as instruções jQuery, conforme o retorno da requisição AJAX (sucesso ou erro) vou exibir um “alert” do bootstrap, o tipo da mensagem e o texto serão retornados pelo script PHP sempre via JSON, como já existe uma <div> “mensagem” no layout é necessário apenas trocar as classes e inserir o texto de retorno.
Nesse exemplo não estou limpando os campos após o envio, para efetuar essa limpeza seria necessário apenas uma instrução caso o retorno seja de sucesso “$(‘#formulario’).reset()”.
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<html> <head> <meta charset="utf-8"> <title>Formulário de Contato</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> </head> <body> <div class="container"> <br> <div class='row'> <div class="col-sm-offset-2 col-md-8"> <h1 class="text-center">Formulário de Contato</h1> <form class="form-horizontal" method="post" action="" id="formulario"> <div id="mensagem" class=""></div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Nome *</label> <div class="col-sm-10"> <input type="text" class="form-control" id="nome" name="nome" placeholder="Informe seu Nome" required> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Assunto *</label> <div class="col-sm-10"> <input type="text" class="form-control" id="assunto" name="assunto" placeholder="Informe o Assunto" required> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">E-mail *</label> <div class="col-sm-10"> <input type="email" class="form-control" id="email" name="email" placeholder="Informe seu E-mail" required> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Mensagem *</label> <div class="col-sm-10"> <textarea class="form-control" id='mensagem' name="mensagem" placeholder="Digite sua mensagem" required></textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <input type="submit" class="btn btn-primary" name="enviar" value="Enviar E-mail"> </div> </div> </form> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script> $(document).ready(function () { $('#formulario').submit(function() { var dados = $('#formulario').serialize(); $.ajax({ type : 'POST', url : 'envia_email.php', data : dados, dataType: 'json', success : function(response){ $('#mensagem').css('display', 'block') .removeClass() .addClass(response.tipo) .html('') .html('<p>' + response.mensagem + '</p>'); } }); return false; }); }); </script> </body> </html> |
Modelagem da Tabela
Vou criar um banco de dados “db_blog” contendo apenas uma tabela “contato”, essa tabela vai conter todos os campos do formulário e mais um campo “data_cadastro” com default TIMESTAMP, a ideia com esse campo é gravar a data e a hora que foi enviado o contato.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
CREATE DATABASE IF NOT EXISTS db_blog; USE db_blog; CREATE TABLE contato( id int auto_increment primary key, nome varchar(100), email varchar(100), assunto varchar(100), mensagem varchar(250), data_cadastro timestamp default current_timestamp ); |
Script PHP
Abaixo temos o script PHP que recebe a requisição AJAX com os dados do formulário, logo no início tenho 3 constantes onde defino algumas informações:
- SERVIDOR: Como esse formulário utiliza a conta de e-mail da hospedagem para enviar os e-mails, então informo qual conta “contato@devwilliam.com.br” estou utilizando, esse endereço vai como remetente.
- DESTINO: Geralmente centralizo todos meus e-mails na minha conta do IG, então estou setando para enviar esses e-mails para “wllfl@ig.com.br”.
- SITE: Essa informação é complementar, somente identifica de qual site foi enviado o contato.
Após essa definições recebo todos os campos via POST e válido para ter certeza que todos foram preenchidos, se algum campo estiver vazio retorno uma mensagem em JSON com o tipo da classe bootstrap para “alerts” e um texto informativo.
Se passar da validação então configuro uma conexão com banco de dados usando PDO e gravo os dados enviados na tabela “contato”, sempre trabalhando parametrizado para evitar problemas com SQL Injection.
Para o leitor que não está familiarizado com a biblioteca PDO indico esses vídeos Curso sobre PHP com PDO.
E para finalizar monto uma string concatenando todas as informações enviadas, utilizando a função nativa do PHP “mail()” envio o e-mail conforme os dados setados nas constantes.
Observação: A função “mail()” funciona bem quando estamos trabalhando com servidores de hospedagens e temos pelo menos uma conta de e-mail configurada na hospedagem, para os leitores que não trabalham com esse tipo de servidor indico a leitura desse post Enviar e-mails localhost com PHP e PHPMailer.
envia_email.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<?php header('Content-type: text/html; charset=utf-8'); // Conta de Email no servidor de hospedagem define('SERVIDOR', 'contato@devwilliam.com.br'); // Para onde será enviado o contato define('DESTINO', 'wllfl@ig.com.br'); // Identifica o site que foi enviada a mensagem define('SITE', 'DevWilliam'); if (isset($_POST)): $nome = (isset($_POST['nome']))? $_POST['nome']: ''; $email = (isset($_POST['email']))? $_POST['email']: ''; $assunto = (isset($_POST['assunto']))? $_POST['assunto']: ''; $msg = (isset($_POST['mensagem']))? $_POST['mensagem']: ''; // Valida se foram preenchidos todos os campos if (empty($nome) || empty($email) || empty($assunto) || empty($msg)): $array = array('tipo' => 'alert alert-danger', 'mensagem' => 'Preencher todo os campos obrigatórios(*)!'); echo json_encode($array); else: // Grava no banco de dados as informações do contato $opcoes = array(\PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES UTF8'); $pdo = new PDO('mysql:host=localhost;dbname=db_blog', 'usuario', 'senha', $opcoes); $sql = "INSERT INTO contato (nome, email, assunto, mensagem)VALUES(?, ?, ?, ?)"; $stm = $pdo->prepare($sql); $stm->bindValue(1, $nome); $stm->bindValue(2, $email); $stm->bindValue(3, $assunto); $stm->bindValue(4, $msg); $stm->execute(); if (empty($assunto)): $assunto = "Contato enviado pelo site " . SITE; endif; // Monta a mensagem do email $mensagem = "Contato enviado pelo site ".SITE."\n"; $mensagem .= "**********************************************************\n"; $mensagem .= "Nome do Contato: ".$nome."\n"; $mensagem .= "E-mail do Contato: ".$email."\n"; $mensagem .= "**********************************************************\n"; $mensagem .= "Mensagem: \n".$msg."\n"; // Envia o e-mail e captura o retorno $retorno = EnviaEmail(DESTINO, $assunto, $mensagem); // Conforme o retorno da função exibe a mensagem para o usuário if ($retorno): $array = array('tipo' => 'alert alert-success', 'mensagem' => 'Sua mensagem foi enviada com sucesso!'); echo json_encode($array); else: $array = array('tipo' => 'alert alert-danger', 'mensagem' => 'Infelizmente houve um erro ao enviar sua mensagem!'); echo json_encode($array); endif; endif; endif; // Função para envio de e-mail usando a função nativa do PHP mail() function EnviaEmail($para, $assunto, $mensagem){ $headers = "From: ".SERVIDOR."\n"; $headers .= "Reply-To: $para\n"; $headers .= "Subject: $assunto\n"; $headers .= "Return-Path: ".SERVIDOR."\n"; $headers .= "MIME-Version: 1.0\n"; $headers .= "X-Priority: 3\n"; $headers .= "Content-Type: text/html; charset=UTF-8\n"; $retorno = mail($para, $assunto, nl2br($mensagem), $headers); return $retorno; } |
Resultado Final
Formulário vazio:
Formulário exibindo mensagem de erro:
Formulário exibindo mensagem de sucesso após enviar e-mail:
Exibindo os dados gravados na tabela de contato:
Demo Formulário de Contato (preencha o formulário com seu e-mail e receba a mensagem enviada).
Bom pessoal com isso chegamos ao final de mais um post, como sempre cito no blog o que demonstrei nesse post é apenas uma direção a seguir, toda essa estrutura, layout, validações e etc., não só pode como devem ser melhoradas pelos leitores, não é uma verdade absoluta.
Vale a pena ressaltar novamente que esse formulário trabalha com contas de e-mail de hospedagens, se o usuário for testar esse código localhost com certeza não irá funcionar.
Até a próxima ..
