Envio de E-mail com Jquery e PHP

Esse é um pequeno exemplo de como você pode integrar Ajax e PHP para enviar um e-mail.

Vamos comentar um pouco o código:

Contato.php

<div id="resposta"></div>
<div id="formulario">
<p><label for="nome" id="lbnome"><strong>Nome:</strong></label></p>
<p><input type="text" id="nome" name="nome" /></p>
<p><label for="email" id="lbemail"><strong>E-mail:</strong></label></p>
<p><input type="text" id="email" name="email" /></p>
<p><label for="mensagem" id="lbmensagem"><strong>Mensagem:</strong></label></p>
<p><textarea id="mensagem"></textarea></p>
<p><input type="button" alt="Enviar" id="submit" value="Enviar" /></p>
</div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#resposta").ajaxStart(function(){ jQuery(this).html("Mensagem sendo enviada, por favor aguarde..."); });
jQuery('#submit').click(function() {
var nome     = jQuery('#nome').val();
var email    = jQuery('#email').val();
var mensagem = jQuery('#mensagem').val();
jQuery.post('mail.php',
{ nome: nome, email: email, mensagem: mensagem, contato: true },
function(data, textStatus) {
jQuery('#resposta').html(data);
});
return false;
});
});
</script>


Explicação do código a cima:

Após isso criaremos o formulário para contato. Não é obrigatório colocar a tag <form> pois vamos pegar os valores pelo ID dos campos, por isso é importante sempre colocar os id´s no input 🙂

Para tudo funcionar deve-se primeiramente ter adicionado a biblioteca jquery.
<script type="text/javascript" src="jquery.js"></script>

A <div id=”resposta”> é muito importante. É nela que vai ser mostradas as informações que vão ser processadas do php.

A função:

jQuery('#submit').click(function() {...

Nada mais é do que pegar o botão e executar um POST assincrono.

var nome     = jQuery('#nome').val();
var email    = jQuery('#email').val();
var mensagem = jQuery('#mensagem').val();

Pega os valores dos inputs (por isso tem que ter os ids)…

jQuery.post('mail.php',
{ nome: nome, email: email, mensagem: mensagem, contato: true },
function(data, textStatus) {

Envia o post ao arquivo mail.php

jQuery('#resposta').html(data);

retorna os dados em formato html para a div resposta. Por isso eu disse que ela é importante.

No arquivo mail.php nada mais é do que um script php com um tratamento de erros e uma validação com expressão regular de e-mail com envio.

Baixe o exemplo aqui ou veja uma demonstração.