Formulário de Contato com AJAX + PHP + MySQL

Formulário de Contato com PHP - AJAX e MySQLOlá 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.

Post relacionado:  Dicas de Segurança com PHP

 

É 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()”.

Post relacionado:  AJAX com jQuery - Série de vídeos com exemplos

index.php

 

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.

 

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 

 

Resultado Final

Formulário vazio:

formulário de contato vazio

Formulário exibindo mensagem de erro:

formulário de contato exibindo erro

Formulário exibindo mensagem de sucesso após enviar e-mail:

formulário de contato enviado com sucesso

Exibindo os dados gravados na tabela de contato:

Tabela 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 ..

Show Buttons
Hide Buttons