Enviar mail usando PHP y AJAX

En esta oportunidad veremos como enviar e-mails haciendo uso de PHP + AJAX de manera sencilla y práctica.

Empezemos entonces diseñando nuestro formulario de envio de mails. Este formulario tendrá el nombre enviar_mail, y en el evento onsubmit colocaremos el nombre de la función enviarMail() de la cual hablaremos mas adelante. Además definiremos 3 campos: el destinatario, el remitente y el mensaje. Al final colocaremos una capa para mostrar el mensaje de enviado. A continuación el código:

index.php

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Enviar E-mail AJAX+PHP</title>
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
</head>
<body>
<form onsubmit="enviarMail(); return false" name="enviar_email" action="">
<p>E-mail de tu amigo</p>
<p>
<input size="30" type="text" name="email_destino" />
</p>
<p>Tu nombre </p>
<p>
<input size="30" type="text" name="emisor" />
</p>
<p>Mensaje a enviar</p>
<p>
<textarea name="mensaje" cols="45%" rows="2" ></textarea>
</p>
<p>
<input type="submit" value="Enviar" />
</p>
</form>
<div id="resultado_mensaje" style="width:300px; height:30px; border:1px solid gray;">Resultado aqui.</div>
</body>
</html>

Bien, ahora definamos las funciones en javascript que realizarán la petición al servidor. Definamos: la función nuevoAjax(), la cual se encargará de crear el objeto XMLHttpRequest dependiendo del navegador web (es algo que hemos visto en artículos anteriores); ahora la funcion enviarMail(), de la cual hablamos antes, está se encargará de enviar las variables del formulario al script PHP envia_mail.php que realizará el proceso de enviar el mail; y finalmente escribiremos la función borrarCampos(), la cual borra los 3 campos cuando el mail ha sido enviado. El código queda así:

ajax.js

function nuevoAjax(){
	var xmlhttp=false;
	try{
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	}catch(e){
		try {
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}catch(E){
			xmlhttp = false;
		}
	}	
	if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}
function enviarMail(){
       c = document.getElementById('resultado_mensaje');
   
       //variable=documenet.nombre_del_form.nombre_del_control.value
       emis=document.enviar_email.emisor.value;
       dest=document.enviar_email.email_destino.value;
       men=document.enviar_email.mensaje.value;
   
       ajax=nuevoAjax();
       c.innerHTML = '<p style="text-align:center;"><img src="esperando.gif"/></p>'; 
       ajax.open("POST", "envia_mail.php",true);
       ajax.onreadystatechange=function() {
       if (ajax.readyState==4) {
       c.innerHTML = ajax.responseText
       }
       borrarCampos()
       }
       ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
       ajax.send("destinatario="+dest+"&emisor="+emis+"&mensaje="+men)
}
function borrarCampos(){
       document.enviar_email.emisor.value="";
       document.enviar_email.email_destino.value="";
       document.enviar_email.mensaje.value="";
       document.enviar_email.email_destino.focus();
}

Finalmente, codificamos el script PHP que realizara el envio del mail. Para ello recibimos todas las variables que la función javascript enviarMail() nos envió, y hacemos uso de la instrucción mail de PHP, cuyos parametros son: destinatario, tema, texto del mensaje e información adicional de cabecera. El código queda así:

envia_mail.php

<?php
	$emisor=$_POST['emisor'];
	$destinatario=$_POST['destinatario'];
	$mensaje=$_POST['mensaje'];
	//Estoy recibiendo el formulario, compongo el cuerpo
	$cuerpo = "<h1>Un mensaje para ti</h1>";
	$cuerpo .= "<p>Tu amigo " . $emisor . ", te envia este mensaje.</p>";
	$cuerpo .= "<p>Tu email: " . $destinatario . "</p>";
	$cuerpo = $cuerpo.$mensaje;
	//mando el correo...
	mail($destinatario,"Mensaje de un amigo",$cuerpo,"MIME-Version: 1.0nContent-type: text/html; charset=UTF-8nFrom: ".$emisor." < http://www.miweb.com >");
	//doy las gracias por el envio
	echo "<div style="background-color:green;color:white;padding:4px;text-align:center;">Gracias por rellenar el formulario. Se ha enviado correctamente. Enviale a otros contactos</div>";
?>

Como verán, el desarrollo es relativamente sencillo y no requiere mucho código. Sin embargo se le puede agregar algunas características como: trabajar con cookies para evitar correos continuos, validar los correos antes de enviarlos, etc. Descargar el código.

Comentarios Comentarios formato RSS

  1. avatar yop 2010-07-15 14:40:57 26 no entiendo :(
  2. avatar Felipe 2009-12-16 15:38:09 25 No se si alguien sepa de que se trata ese error y la manera de corregirlo les dejo el codigo para que por favor me coolaboren gracias

    Parse error: syntax error, unexpected T_STRING, expecting ',' or ';' in C:\AppServ\www\ajax_3_actualizacion\envia_mail.php on line 13

    echo "<div style="background-color:green;color:white;padding:4px;text-align:center;">Gracias por rellenar el formulario. Se ha enviado correctamente. Enviale a otros contactos</div>";
    ?>
  3. avatar Alexander 2009-12-14 18:27:13 24 estoy tratando de enviar el correo pero me sale el siguiente error si alguien sabe de que se trata de ante mano se lo agradezco.

    Warning: mail() [function.mail]: SMTP server response: 550 <//www.miweb.com@gmail.com>, Sender unknown in C:\AppServ\www\ajax_3_actualizacion\envia_mail.php on line 15
  4. avatar Jose Darias 2009-11-19 04:26:42 23 Muy bueno!! De mucha ayuda!
    Gracias!!!!
  5. avatar Victor Hugo 2009-09-03 17:33:31 22 Hola:
    Me gusto mucho tu ejemplo, me funciona muy bien. ¿Tendrás un ejemplo de una hoja de contacto conservando la funcionalidad de que cargue la respuesta de envio en la misma pagina?

    De antemano mil gracias
  6. avatar danny 2009-08-31 20:35:31 21 gracias por el aporte
  7. avatar saray 2009-08-11 04:28:25 20 The requested URL /envia_mail.php was not found on this server.

    Apache/2.0.63 (FreeBSD) DAV/2 mod_fastcgi/2.4.6 PHP/5.2.8 with Suhosin-Patch mod_ssl/2.0.63 OpenSSL/0.9.7e-p1 Server at www.bloomestudio.com Port 80
  8. avatar andres 2009-06-17 16:59:54 19 me aparece este error
    Warning: mail() [function.mail]: Failed to connect to mailserver at "localhost" port 25, verify your "SMTP" and "smtp_port" setting in php.ini or use ini_set() in C:\wamp\www\Proyect\envia_mail.php on line 15
    no se q hacer para esto
  9. avatar jesusvld 2009-06-14 15:06:39 18 @COAR:
    Creo que te haz olvidado de colocar punto y coma ";" para cerrar una linea de código en PHP.

    Salu2
  10. avatar COAR 2009-06-14 11:54:23 17 Hola bueno estoy intentando montar una pagina en un dominio que he comprado y me ha interesado tu codigo, soy principiante y me gustaria entender como funciona y todo pero me sale este error

    Parse error: parse error, unexpected T_STRING, expecting ',' or ';' in c:\appserv\www\enviar\envia_mail.php on line 13

    estoy usando el appserv 2.5 como servidor local de prueba me gustaria que me agregues al msn para poder consultar contigo algunas dudas

    libra_coar@hotmail.com

Dejar un comentario