En un post anterior expliqué como enviar formularios sin recargar, ahora voy a explicar como hacer un formulario de envio de correos con jquery, incluyendo un loader y que nos muestre un mensaje de error si no se pudo enviar el mensaje.
El formulario mailer
El formulario practicamente no tiene nada de especial, sólo debemos asegurarnos que tenga como id «myform», además necesitamos dos divs en uno mostraremos el resultado y el otro nos servirá como loader.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <form method="post" action="envio.php" id="myform" name="myform" > <fieldset id="form"> <legend>Send Email</legend> <ol> <li><label>Name:</label><input type="text" size="30" name="fname" /></li> <li><label>E-mail:</label><input type="text" size="30" name="femail" /></li> <li><label>Phone:</label><input type="text" size="30" name="fphone" /></li> <li><label>Comments:</label><textarea name="fcomment" rows="5" cols="25"></textarea></li> </ol> <p align="center"> <input type="submit" name="mysubmit" value="Enviar" /> </p> </fieldset> </div> </form> <div id="loading"></div> <div id="result"></div> |
Ajax para el envio del formulario
En este caso vamos a usar jquery para que envie los datos del formulario a envio.php, el cual a su vez enviará un correo electrónico
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <script language="javascript" src="jquery-1.3.min.js"></script> <script language="javascript"> $(document).ready(function() { // Mostramos el loader $().ajaxStart(function() { $('#loading').show(); $('#result').hide(); }).ajaxStop(function() { $('#loading').hide(); $('#result').fadeIn('slow'); }); // Enviamos el formulario $('#myform').submit(function() { // Definimos el metodo ajax, los datos $.ajax({ type: 'POST', url: $(this).attr('action'), data: $(this).serialize(), success: function(data) { // Imprimimos la respuesta en el div result $('#result').html(data); } }) return false; }); }) </script> |
envio.php
Ahora vamos a hacer el envio de un correo electrónico con los datos del formulario
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <? // definimos el mensaje $mensaje=""; $mensaje.="Contact from:". "\n\n"; $mensaje.="Name: ".$_POST['fname']."\n"; $mensaje.="E-mail: ".$_POST['femail']."\n"; $mensaje.="Phone: ".$_POST['fphone']."\n"; $mensaje.="Comments: ".$_POST['fcomment']."\n"; // definimos a quien se lo enviamos $email_destiny="mio@mail.com"; $subject="Message from us"; // verificamos si se envió if (mail($email_destiny,$subject,$mensaje,"From: Contact<".$_POST['femail'].">")) { echo '<p align="center"><b>Thanks for your comments</b></p>'; } else { echo '<p align="center">Error '.$_POST['fname'].'</p>'; } ?> |
Hola soy nuevo en esto…. me baje el ejemplo y probe cambiarle la direccion de email y me largo un error. Sabes el porque de este comportamiento??? Muchas Gracias.
Si me indicas que error aparece podria decirte cual puede ser la causa. Normalmente no debería fallar a menos que tu servidor no soporte SMTP para el envio de correos
Amigo, muchisimas gracias! Con este ejemplo pude hacer exactamente lo que queria en mi página. En vez de utilizar \"Envio.php\", usé un servlet y también funcionó bien.
Que tal, probe el archivo tal cual tienes en el zip y no me funciona… hice algunas modificaciones y lo manda pero no manda datos. Si quito las funciones de ajax funciona bien pero se recarga la pagina.
Alguna idea? :/
Este script no puede ser usado en localhost ya que normalmente no tenemos instalado un servidor SMTP en nuestras computadoras, esa podria ser una causa. Otra posible causa es cambia la primera linea de envio.php
Yo de nuevo, lo estoy probando directamente del servidor… pero sigue sin caminar :/ me hace el fade in del recuadro donde aparece el mensaje pero no manda nada ni despliega el mensaje.
Para saber cual es exactamente tu error, es necesario usar Firebug, y ver la respuesta AJAX y asi salir de dudas, este tutorial te explica como usarlo
Hola amigo, te felicito!
Me cansé de buscar una forma facil de usar ajax con jquery en un formulario… y sólo aparecían puros ejemplos viejos antes que apareciera «jquery», ejemplos viejos o con plugins de que uno nunca va a usar.
Te felicito por el tuto.. Saludos!
Hola ¡¡
He implementado tu codigo en una nueva versión de la web que estoy preparando y funciona a la perfección, gracias ¡¡
La unica pega es que no me muestra la imagen de \\
Hola
Como verás en la web que te indico ya lo tengo implementado, MUCHAS GRACIAS!. La unico que no consigo es quitar el recuadro/marco/linea que envuelve al formulario, entiendo que es algo de las hojas de estilo, pero por más vueltas que le doy no lo consigo, please help
HOla, aun no pruebo el ejemplo, pero se ve genial, justo lo que buscaba.
Para responder a Luis respecto a las lineas que rodean el form. si no me equivoco eso lo hace la etiqueta para que le pegues una mirada a eso 😉
Hola, sabes.. no me funciona el codigo, al apretar enviar.. no me recarga en la misma pagina, sino que me envia a la pagina php del envio de mail.
el action del formulario no me funciona si solo escribo «envio.php», tengo que escribir la ruta completa «http:// …. /envio.php» .. sera por eso que no funciona??? no entiendo, es como si no estuviera reconociendo la libreria js =/
Hola! Es lo que estaba buscando! Lo probé y me pasa lo mismo que a manuel, el mensaje al mail me llega de manera correcta, pero cuando pulso «Enviar» me lleva a la pagina php «Thanks for your comments» :S me podrias decir que es lo que estoy haciendo mal. Muchas gracias !!!!
Hola que tal !! Me ha sido de gran ayuda este tutorial
Sin embargo quisiera saber como puedo validar los los campos antes de enviar
Pues estoy enviando la información a una Base de Datos.
Gracias !!!
buenas!, probe con el codigo que pasaste y funciona de lujo, ahora capaz que lo que pregunto es una pavada, como hago para que cuando el usuario presione el boton send todos los campos vuelvan a quedar en blanco? muchas gracias!!!
Disculpa. Soy nuevo con AJAX y estoy teniendo problemas.
Cree una funcion de validación con javascript, también un archivo de envío por mail en php y tengo todo el formulario hecho con html+javascript.
Además tomé de tus ejemplos la forma de usar el archivo de envio en action (action=»envio.php»), evitando que la página se recargue. Pero aquí entra mi problema…
No logro hacer que todas las cosas trabajen en conjunto de manera correcta pues no sé como evitar el envío de la información en el formulario si se da el caso de que la validación falle. (La validación hace su trabajo, incluso me alerta de los campos erróneos, pero igualmente hace el envío sin dejarme corregirlos).
Hasta hace un momento, evitaba que se ejecutara la función en ‘action’ retornando «false» a la funcion que invocaba mediante onSubmit (onSubmit=»return validar(this);» ), cosa que, según entendía, cancelaba las operaciones siguientes (como submit) en la etiqueta. Pero no está resultando así.
Alguien podría orientarme en como invocar las cosas para que así, al fallar la validación (retorna un «false» si algo falla y un «true» si todo se completa con éxito) me permita corregirlo?
Gracias de antemano.
Hola, ¿es posible probar este ejemplo desde localhost?, porque, a pesar de que me salga el mensaje de «Thanks for your comments», no recibo ningún correo, gracias de antemano.