El primer bloque Jquery valida las entradas del form.
El segundo envía a
mailprocesar.php por post de AJAX estos valores. Luego este script
envía el mail y devuelve el control a la página, la cual esconde el gif esperando y cambia el texto a
mensaje enviado.
Finalmente debemos incluir a
PHPMailerAutoload.php y junto a este archivo tener a
class.phpmailer.php y class.smtp.php
(para bajarlos click aquí).
En el código queda explicado cada parámetro del envío.
1) Script JAVASCRIPT para validar y AJAX
<script>
$(document).ready(function(){
$(".err").hide();
$("#enviar").click(function(){ //cuando clico enviar
// -----------------------------validacion
$(".err").css("visibility","visible"); //esto evita parpadeo al cargar
$(".err").hide(); //escondo el mensaje de error
var nombre=$("input#txtNombre").val(); //recupero el nombre
if (nombre==""){
$("#msgnombre").show();
$("input#txtNombre").focus();
return false;
}
var email=$("input#txtEmail").val();
re = /^[+\w-.&]+\@[\w-.&]+\.\w+/;
if (!re.test(email)) {
$("#msgemail").show();
$("input#txtEmail").focus();
return false;
}
var te=$("input#txtTel").val();
if (te==""){
$("#msgtel").show();
$("input#txtTel").focus();
return false;
}
var comentario=$("#TxtCom").val();
if (comentario==""){
$("#msgcomentario").show();
$("textarea#txtCom").focus();
return false;
}
// fin validacion
var envio = 'txtNombre=' + escape(nombre) + '&txtTel=' + escape(te) + '&txtEmail=' + escape(email) + '&txtCom=' + escape(comentario) ;
// funcion enviadora
$("#esperando").css("visibility","visible");
$('#msg').html("Enviando consulta...");
$.ajax({
type: "POST",
url: "tec-php-enviamailajax-procesar.php",
data: envio,
success: function(datos) {
if(datos.indexOf('Exito') == 0){
$("#msg").html('Su mail ha sido enviado con éxito'); //borra los mensajes anteriores
$("#frmconsulta")[0].reset(); //reseteamos el form
}else{
$("#msg").html(datos); //envío el mensaje de error
}
$("#esperando").css("visibility", "hidden"); //desaparece esperando....
},
error: function(request,error) {
$("#esperando").css("visibility","hidden");
$('#msg').html("<span style='color:#ff0000;'> " + error + "</span>");
}
}); //fin AJAX
return false;
}); // FIN click
}); //fin document
</script>
2) FORM en HTML
<div style="margin: 0 auto; margin-left:40px; background-color:#FFF;">
<form method="post" action="" name="frmconsulta" id="frmconsulta" style="margin-top:10px; margin-left:5px; border-bottom: #ccc solid 1px;">
<ul class="contacto">
<li>
<span>Nombre:</span>
<span class="err" id="msgnombre">¡Obligatorio!</span><br/>
<span>
<input class="consulta" name="txtNombre" type="text" id="txtNombre" />
</span>
</li>
<li>
<span>Email:</span>
<span class="err" id="msgemail">¡Email Inválido!</span><br>
<span>
<input class="consulta" name="txtEmail" type="text" id="txtEmail" />
</span>
</li>
<li>
<span>Tel:</span>
<span class="err" id="msgtel">¡Obligatorio!</span><br>
<span>
<input class="consulta" name="txtTel" type="text" id="txtTel" />
</span>
</li>
<li style="margin-top:5px;" >
<span>Mensaje:</span>
<span><span class="err" id="msgcomentario">¡No envía!</span><br>
<span>
<textarea class="mensaje" name="txtCom" ols="35" rows="4" id="TxtCom"></textarea>
</span>
</li>
</ul>
<div style="margin-top:10px; margin-left:5px;">
<input type="Button" id="enviar" value="ENVIAR" style="margin-left:10px;" />
<img id="esperando" src="esperando.gif" width="16" height="16" style="visibility:hidden;" />
<span id="msg" style="margin-left:10px;"> </span>
</div>
</form>
</div>
3) Script PHP para enviar el mail
<?
$cuerpo = "Formulario de consulta enviado desde xxx.com.ar<br><br>";
$cuerpo .= "Nombre: " . $_POST["txtNombre"] . "<br>";
$cuerpo .= "Teléfono: " . $_POST["txtTel"] . "<br>";
$cuerpo .= "Email: " . $_POST["txtEmail"] . "<br>";
$cuerpo .= "Consulta: " . $_POST["txtCom"] . "<br>";
require 'PHPMailerAutoload.php';
$mail = new PHPMailer(); // inicializo Mailer
$mail->IsSMTP(); //setea para smtp
$mail->SMTPAuth = true; // activa la autenticacion smtp
$mail->Host = "mail.xxx.com.ar"; // setea el servidor smtp
$mail->Port = 25; // setea el puerto 25
$mail->Username = "envios@xxx.com.ar";
$mail->Password = "tupassword";
// parametrizo mi mail
$mail->SetFrom('envios@xxx.com.ar', 'XXX'); // primero mail luego alias
$mail->AddAddress('webmaster@xxx.com.ar', 'CARLOS');
//$mail->addAddress('joe@example.net', 'Joe User'); // Agregar destinatarios
//$mail->addAddress('ellen@example.com'); // El nombre es opcional
//$mail->addReplyTo('info@example.com', 'Information');
//$mail->addCC('cc@example.com'); //agrega copia
//$mail->addBCC('soporte@iqsystems.com.ar', 'SOPORTE'); //agrega copia oculta
//$mail->addAttachment('/var/tmp/file.tar.gz'); // Agrega adjuntos
//$mail->addAttachment('/tmp/image.jpg', 'new.jpg'); // el nombre es opcional
//$mail->AltBody = 'opcional cuerpo en texto llano sin HTML';
$mail->isHTML(true); // setea HTML
$mail->Subject ="Aca pongo el asunto";
$mail->Body = $cuerpo;
try {
//$mail->send();
echo "Exito";
} catch (Exception $e) {
echo "Mailer Error: " . $mail->ErrorInfo;
}
?>