Enviar mail usando PHP y AJAX

32
37777

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 COMENTARIOS

  1. 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..

  2. @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.

  3. 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

  4. 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

  5. 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. 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

  7. 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

    «;
    ?>

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

Comments are closed.