Esse tutorial tem como objetivo principal descrever o funcionamento básico de um sistema de envio de e-mails utilizando AJAX com PHP e autenticação via protocolo SMTP.

No passado muitos servidores aceitavam o envio de e-mails sem autenticação. Esse excesso de privilégios possibitava utilizar esses servidores para a prática de SPAM. Atualmente as boas práticas de segurança sugerem que toda comunicação através de e-mail deve utilizar autenticação SMTP, mesmo que para simplesmente enviar formulários HTML.

Para trabalhar com SMTP via PHP vamos utilizar uma classe chamada PHPMailer.
As funções javascript serão escritas utilizando jQuery.

Caminho lógico da mensagem:

1) Uma função javascript coleta os dados de um formulário HTML e alimenta um cliente ajax.

2) O ajax envia ao servidor PHP as informações coletadas no passo anterior e aguarda o retorno.

3) Enquanto isso o servidor PHP coleta as informações e faz login no servidor SMTP, solicitando um disparo de e-mail.

4) Se tudo estiver ‘ok’ o servidor SMTP dispara o e-mail e envia uma mensagem de retorno para o servidor PHP.

5) O servidor PHP devolve o retorno para o cliente ajax.

6) O cliente ajax imprime o resultado da requisição no HTML.

Com esse conjunto temos um método completo para disparo de e-mails autenticados sem recarregar a página do cliente!

Enviando e-mail com AJAX e PHP via protocolo SMTP

1.0 – HTML

Tudo começa no formulário HTML, resolvi adotar a propriedade “id” para fazer referência no javascript, mas você pode utilizar qualquer outro seletor. Note que há um id para cada componente assim como há para a div. O retorno da requisição ajax irá modificar o conteúdo dessa div, imprimindo o resultado gerado pelo envio do e-mail.

Há também uma imagem que pertence a classe “loading”. Essa imagem será utilizada para fazer a animação tipo “carregando” que é exibida enquanto o ajax aguarda o retorno. Para gerar imagens personalizadas tipo “loading” acesse ajaxload.info.

<div id="retornoHTML">
    <form>
        Nome<br>
        <input id="nome" type="text"><br>
        E-mail<br>
        <input id="email" type="text"><br>
        Mensagem:<br>
        <textarea id="msg"></textarea><br>
        <input type="button" id="btn" value="ENVIAR">
        <img src="loading.gif" class="loading">
    </form>
</div>

1.1 – jQuery, coletando dados.

Vamos utilizar uma função javascript para coletar os dados do formulário desenvolvido no passo anterior.

$('#btn').click( function(){ /* Quando clicar em #btn */
var nome  = $('#nome').val();
var email = $('#email').val();
var msg   = $('#msg').val();
});

1.2 – Montando URL.

Devemos montar uma url com os dados coletados para serem enviados ao PHP via Ajax:

/* construindo url */
var urlData = "&nome=" + nome + "&email=" + email + "&msg=" + msg;

2.0 Ajax – Enviando dados para o PHP via POST.

/* Ajax */
$.ajax({
   type: "POST", /* tipo post */
   url: "sendmail.php", /* endereço do script PHP */
   async: true,
   data: urlData, /* informa Url */
   success: function(data) { /* sucesso */
       /* alert(data) */
       /* pode ser utilizado um alert para ver o retorno */
      $('#retornoHTML').html(data); /* imprime o retorno no HTML */
   },
   beforeSend: function() { /* antes de enviar */
      $('.loading').fadeIn('fast'); /* mostra o loading */
   },
   complete: function(){ /* completo */
      $('.loading').fadeOut('fast'); /* esconde o loading */
   }
});

2.1 – Validando informações

O ideal seria utilizar alguma validação para não enviar valores nulos ou inválidos pois o PHPMailer pode retornar erro. Recomendo utilizar um validador próprio para o campo de e-mail, este script não trata esse tipo de problema. Abaixo um exemplo simples de validação:

/* Validando */
if(nome.length <= 3){
    alert('Informe seu nome');
    return false;
}
if(email.length <= 5){
    alert('Informe seu email');
    return false;
}
if(msg.length <= 5){
    alert('Escreva uma mensagem');
    return false;
}

Javascript Completo:

$(document).ready( function(){ //Quando documento estiver pronto
    $('#btn').click( function(){ /* Quando clicar em #btn */
        /* Coletando dados */
        var nome  = $('#nome').val();
        var email = $('#email').val();
        var msg   = $('#msg').val();

        /* Validando */
        if(nome.length <= 3){
            alert('Informe seu nome');
            return false;
        }
        if(email.length <= 5){
            alert('Informe seu email');
            return false;
        }
        if(msg.length <= 5){
            alert('Escreva uma mensagem');
            return false;
        }

        /* construindo url */
        var urlData = "&nome=" + nome +
        "&email=" + email +
        "&msg=" + msg ;

        /* Ajax */
        $.ajax({
             type: "POST",
             url: "sendmail.php", /* endereço do script PHP */
             async: true,
             data: urlData, /* informa Url */
             success: function(data) { /* sucesso */
                 $('#retornoHTML').html(data);
             },
             beforeSend: function() { /* antes de enviar */
                 $('.loading').fadeIn('fast'); 
             },
             complete: function(){ /* completo */
                 $('.loading').fadeOut('fast'); //wow!
             }
         });
    });
});

3.0 – PHP, coletando dados, configurando mensagem e disparando e-mail

Nos passos anteriores construímos o formulário HTML, copiamos o conteúdo utilizando jQuery e criamos um cliente ajax, que utilizando método POST, aponta um endereço de url (var urlData) para o script “sendmail.php”.

O código a seguir ilustra o conteúdo desse script, coleta as informações e gera o e-mail (html) que será enviado. O conteúdo do e-mail enviado pode ser gerado no próprio script, ou adicionado através de qualquer método que a linguagem comporte.

A primeira linha aponta para a classe PHPMailer. Faça download aqui e caso necessário troque o caminho do arquivo.

require_once('PHPMailer_5.2.1/class.phpmailer.php'); /* classe PHPMailer */

/* Recebe os dados do cliente ajax via POST */
$nome = $_POST['nome'];
$email = $_POST['email'];
$msg = $_POST['msg'];

try {
$mail = new PHPMailer(true); //New instance, with exceptions enabled

/* CORPO DO E-MAIL */
$body .= "<h2>Enviando e-mails com AJAX e PHP via SMTP</h2>";
$body .= "Nome: $nome <br>";
$body .= "E-mail: $email <br>";
$body .= "Mensagem:<br>";
$body .= $msg;
$body .= "<br>";
$body .= "----------------------------";
$body .= "<br>";
$body .= "Enviado em <strong>".date("h:m:i d/m/Y")." por ".$_SERVER['REMOTE_ADDR']."</strong>"; //mostra a data e o IP
$body .= "<br>";
$body .= "----------------------------";

$mail->IsSMTP(); //tell the class to use SMTP
$mail->SMTPAuth = true; // enable SMTP authentication
$mail->Port = 587; //SMTP porta (as mais utilizadas são '25' e '587'
$mail->Host = "smtp.meudominio.com"; // SMTP servidor
$mail->Username = "contato@meudominio.com";  // SMTP  usuário
$mail->Password = "senha123abc";  // SMTP senha

$mail->IsSendmail();  

$mail->AddReplyTo($email, $nome); //Responder para..
$mail->From = $email; //e-mail fornecido pelo cliente
$mail->FromName   = $nome; //nome fornecido pelo cliente

$to = "meuemail@meuservidor.com"; //Enviar para
$mail->AddAddress($to); 
$mail->Subject  = "Assunto do E-mail"; //Assunto
$mail->WordWrap   = 80; // set word wrap

$mail->MsgHTML($body);

$mail->IsHTML(true); // send as HTML

$mail->Send();
echo 'Mensagem enviada com sucesso.'; //retorno devolvido para o ajax caso sucesso
} catch (phpmailerException $e) {
echo $e->errorMessage(); //retorno devolvido para o ajax caso erro
}

O script utilizado neste exemplo é encontrado entre os modelos do pacote PHPMailer.

IMPORTANTE: Você deve conferir junto ao seu provedor de e-mails quais são os endereços SMTP, senha e qual a porta pra envio de e-mails autenticados.

4.0 – CSS!

Lembre-se que a imagem “loading” não deve estar visível quando carregar o site. Adicione a classe no CSS:

.loading { display: none; } 

Download

Você pode fazer o download de todos os arquivos utilizados nesse tutorial, clique aqui.

Demo online

Gostou? Compartilhe!