Formulario de correo y su envío mediante jQuery y PHP en segundo plano.

   Tanto en esta página de excavaciones y movimientos de tierra, como en esta otra de mecánica de coches , existen sendos formularios para el envío de un correo desde la página web. La única diferencia es que en la segunda, el formulario no está visible (por falta de espacio) y hay que abrirlo mediante el enlace (esto está explicado en este otro post). Es bueno tener un formulario para el envío de correo ya que facilita las cosas al posible cliente (que puede no tener un cliente de correo instalado, por ejemplo).

   En este post voy a tratar de explicar cómo hacer un formulario de correo sencillo y, en segundo plano, tratarlo con jQuery y enviarlo con PHP. Lo normal es que, al enviar directamente el contenido del formulario al archivo PHP que lo procesa y envía, se abra una ventana en blanco. Si lo enviamos con el método que voy a explicar a continuación, no se abrirá dicha ventana.

   Lo primero el formulario en HTML:

<form id="myForm" action="enviarcorreo.php" method="post">
<label><p>Su nombre:</p><input name="nombre" id="nombre" size="40" MAXLENGTH="40" TYPE="TEXT" VALUE=""/></label>
<br />
<label><p>Su E-mail:</p><input name="mail" id="mail" size="40" MAXLENGTH="40" TYPE="TEXT" VALUE=""/></label>
<br />
<p>Escriba su mensaje y pulse enviar</p><textarea name="mensaje" id="mensaje" rows=10 cols=80 style="width: 340px; height: 150px;" ></textarea>
<p><input type="submit" id="submit_button" name="Submit" value="Enviar" /></p>
<div id="ajax_loader"><img id="loader_gif" src="loader.gif" style=" display:none;"/> </div>
</form>

   Este sería un formulario típico con sólo tres campos: nombre, email  y el mensaje (es muy importante incluir el atributo 'name', lo explicaré luego). Se procesaría con el archivo 'enviarcorreo.php' directamente al pinchar en 'enviar'. Pero vamos a insertar el siguiente código jQuery entre los 'head' de nuestra página:

<script type="text/javascript">
$(document).ready(function(){
$('#myForm').submit(function(e){ //en el evento submit del fomulario (al pinchar en enviar) se ejecuta todo lo siguiente:
if ($('#nombre').val().length<4 || $('#mensaje').val().length<4){
                    alert('Los campos "nombre" o "mensaje"\nparecen incorrectos');
                    return false//comprobamos la longitud de los campos nombre y mensaje y, si cualquiera de los dos es menor que 4, mostramos el mensaje y no enviamos el formulario.
                }
//en caso contrario se ejecuta lo siguiente:
              e.preventDefault();  //detenemos el comportamiento por defecto al pinchar en enviar, que sería leer los datos del formulario con el archivo 'enviarcorreo.php'
              var url = $(this).attr('action');  //obtenemos en 'url' la acción del formulario (enviarcorreo.php)
              var datos = $(this).serialize(); // obtenemos en 'datos' los datos del formulario
              $.ajax({//y los enviamos via ajax al archivo 'enviarcorreo.php' (variable 'url')
                  type: 'POST',//el tipo de envío
                  url: url,//la url de envío (en este caso 'enviarcorreo.php'
                  data: datos,//todos los datos a enviar (que están 'serializados' en 'datos')
                  beforeSend: mostrarLoader, //función que definimos más abajo
                  success: mostrarRespuesta  //función que definimos más abajo
               });

          });   

})
        function mostrarLoader(){
              $('#loader_gif').fadeIn("slow"); //mostramos el loader de ajax (el div dentro del formulario que describimos en el código HTML anterior.
        };
        function mostrarRespuesta (responseText){
              alert("Mensaje enviado: "+responseText);  //responseText es lo que devuelve la página 'enviarcorreo.php'. Si en 'enviarcorreo.php' hacemos echo "Hola" , la variable responseText = "Hola" . Aqui hacemos un alert con el valor de response text
              $("#loader_gif").fadeOut("slow"); // hacemos desaparecer el loader de ajax
              $('#nombre').val(' ');//con esto establecemos el nuevo valor de los campos
              $('#mail').val(' ');
              $('#mensaje').val(' ');
        }

</script>

   Mediante el anterior código enviamos el mensaje en segundo plano, evitando que se muestre otra ventana y mostramos los mensajes de error o de envío correcto. También un gif tipo carga o espera (en mostrarRespuesta) en el caso de que, por cualquier motivo, se relantice la operación. Interesante la función 'serialize()' (relacionada con lo comenté de la importancia de incluir el atributo 'name' en el formulario) que podéis ver en esta página.

   Y, por último, el código en PHP del envío del mensaje:

<?php
$nombre = $_POST['nombre'];
$mail = $_POST['mail'];

$header = 'From: ' . $mail . " \r\n";
$header .= "X-Mailer: PHP/" . phpversion() . " \r\n";
$header .= "Mime-Version: 1.0 \r\n";
$header .= "Content-Type: text/plain";

$mensaje = "Este mensaje fue enviado por " . $nombre . " \r\n";
$mensaje .= "Su e-mail es: " . $mail . " \r\n";
$mensaje .= "Mensaje: " . $_POST['mensaje'] . " \r\n";
$mensaje .= "Enviado el " . date('d/m/Y', time());

$para = 'nombre@correo.com';
$asunto= 'Mensaje enviado a través del formulario de mi web';
/*con un simple if conseguimos saber si el mensaje fué enviado o no. 
 Dependiendo si fué o no enviado haremos el echo correspondiente, que es la respuesta  que se recogerá en la función mostrarRespuesta en la anterior función de jQuery.*/
if (mail($para, $asunto, utf8_decode($mensaje), $header)) echo ('correctamente');
else echo('ERROR AL ENVIAR EL MENSAJE')
?>