Enviar mail usando PHP y AJAX

by yuslinan Posted on

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.0\nContent-type: text/html; charset=UTF-8\nFrom: ".$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.

32 thoughts on “Enviar mail usando PHP y AJAX”

  15. Buenas disculpa..tengo una consulta..:( mra.. yo estoy haciendo una pagina pero de forma..local..con el wampserver..:( quise probar si funcionaba..:( lo que facilitastes.. que parecee..muy util pero me sale el siguiente 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:wampwwwenviaremailenvia_mail.php on line 15
    me prodrias..ayudar..porfavor..:( gracias y disculpa..

    Reply

  16. @fiorella:
    La función mail necesita de un servidor de correo, en tu servidor local. Puedes googlear sobre eso, o sino puedes probar en un servidor web, si lo tienes.

    Reply

  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

    Reply

  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:wampwwwProyectenvia_mail.php on line 15
    no se q hacer para esto

    Reply

  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

    Reply

  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 , Sender unknown in C:AppServwwwajax_3_actualizacionenvia_mail.php on line 15

    Reply

  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 “

    Gracias por rellenar el formulario. Se ha enviado correctamente. Enviale a otros contactos

    “;
    ?>

    Reply

  28. Queria preguntarles, como haria para enviar un email a varios correos??. Haber si lo postean, es urgente. Gracias de antemano =D

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Proudly powered by WordPress | Theme: Wanderz Blog by Crimson Themes.