Hace algún largo tiempo ya, les trajimos un tutorial sobre como armar un formulario de contacto para nuestros sitios Web, en el cual vimos todo el proceso de creación, desde el armado  hasta el envío de los datos vía correo electrónico.

Pero como el tiempo pasa, y nos vamos poniendo viejos, y sabemos que las soluciones no son eternas ni apropiadas para estos tiempos, hoy hemos decidido sacar a relucir nuestros talentos musicales y poéticos desarrollísticos (¿desarrolladores?) y traerles una nueva versión de este formulario, ahora con sabor a limón y algunas características que lo convierten en una versión mucho más óptima que la anterior.

El detalle, como siempre, después del salto.

Cómo crear un formulario de contacto – Versión 2.0

Como siempre, lo primero:

Detalles del tutorial

• Tiempo aproximado de implementación: 30 minutos.
• Dificultad: Básico (para implementar tal cual) – Intermedio (para personalizar).
• Conocimientos previos requeridos: Entendimiento de HTML, CSS, jQuery y PHP.

Implementos necesarios:

• Un editor Web (Recomendamos Aptana Studio o Notepad++, ambos gratuitos).

Ahora, la pregunta de rigor. ¿Qué trae de nuevo este formulario 2.0?:

• Validaciones de ingreso de datos en tiempo real mediante jQuery.
• Validación del correo electrónico en tiempo real mediante expresiones regulares.
• Envío de información de forma asincrónica (sin recargar la página) mediante el método .ajax de jQuery.
• Mejoras de estilo y codificación.

Así que con eso claro, vamos, manos a la obra:

Procedimiento:

Separaremos este desarrollo en las siguientes partes:

1. Código HTML – Armado del formulario.
2. Código CSS – Estilización del formulario.
3. Código jQuery/Javascript – Validaciones.
4. Código PHP – Envío de información.

1.- Código HTML

El armado del formulario es bastante estándar:

<div id="container">
  <form name="formulario" id="formulario" method="post" action="envio.php">
    <fieldset><h2>Contacto</h2></fieldset>

 <div>
 <label for="nombre">Nombre: </label>
 <input type="text" name="nombre" id="nombre" size="60">
 <span id="validar-nombre"></span>
</div>

 <div>
  <label for="correo">Correo:</label>
 <input type="text" name="correo" id="correo" size="60"/>
 <span id="validar-correo"></span>
 </div>

<div><label for="sitio">Sitio Web:</label>
 <input type="text" name="sitio" id="sitio" size="60"/>
 <span id="validar-sitio"></span>
</div>

 <div>
 <label for="mensaje">Mensaje: </label>
 <textarea name="mensaje" id="mensaje" rows="10" cols="56"></textarea>
 <span id="validar-mensaje"></span>
 </div> 

 <p id="envio">
 <input type="submit" name="enviar" id="enviar" value="Enviar" />
 </p>    

</form>
 </div>

Con este código tendremos un formulario bastante estándar armado en nuestra página de contacto. Este contará con campos de texto para que el visitante ingrese su nombre, correo electrónico y sitio Web, así como un área de texto para que ingrese su mensaje. Y obviamente al final añadimos un botón para el envío.

Como podrán fijarse, a continuación de cada campo de texto y área de texto, hemos añadido un span sin contenido. Esto lo hemos hecho para insertar mensajes y resultados de las validaciones posteriormente mediante jQuery.

A continuación, haremos la estilización del formulario, mediante CSS.

2.- Código CSS

body {
 height: 100%;
 background: #348075;
 font-family: Arial;
 font-size: 11px;
 color: white;
}

#container {

 width: 1000px;
 margin: 0 auto;
 background: #5b5c5c;
 border: 1px solid white;
 -moz-border-radius: 20px;
 -webkit-border-radius: 20px;

}

#formulario {

 padding: 1em;

}

#formulario fieldset {

 width: 400px;
 padding: 0 0 0 0;
 border: 0;

}

#formulario label {

 display: block;
 padding: 5px 0 5px 0;

}

#formulario input[type=text], textarea {

 padding: 10px 0 10px 0;
 border: 1.5px solid black;
 color: #5b5c5c;
 font-family: inherit;
 font-size: inherit;
 -moz-border-radius: 5px;
 -webkit-border-radius: 3px;

}

#formulario input[type=text]:focus, textarea:focus {

 background: #f5f2c9;

}

#formulario input[type=submit] {

 border: none;
 margin-right: 1em;
 padding: 6px;
 text-decoration: none;
 font-size: 12px;
 font-weight: bold;
 -moz-border-radius: 4px;
 background: #348075;
 color: white;
 width: 100px;

}

#formulario input[type=submit]:hover {
 background: #287368;
 cursor: pointer;
}

#validar-nombre, #validar-correo, #validar-sitio, #validar-mensaje {
 position: absolute;
 width: 100px;
}

#validar-nombre img, #validar-correo img, #validar-mensaje img {
 padding:10px 0 0 5px;
}

Como podrán ver, en algunas partes hemos utilizado la propiedad border-radius (con moz y webkit para apuntar a distintos navegadores). Esta propiedad, tal como hemos indicado anteriormente, es de CSS3, por lo que no está completamente soportada por todos los navegadores, especialmente los más antiguos. El efecto que logra es el de bordes redondeados, así que ojo, si utilizan IE o algún navegador de mayor antiguedad no lo podrán apreciar.

3.- Código jQuery / Javascript

Acá debemos fijarnos en algunas cosas. Primero, debemos asegurarnos de descargar e incluir jQuery en la cabecera de nuestro formulario, y luego, crear un documento js en el que incluiremos el código en jQuery que hará las validaciones y el correspondiente a Javascript que contendrá la expresión regular que evaluará la dirección de correo ingresada para ver si es válida. Partamos con jQuery:

$(function(){

 var valor;
 var i = 0;

 $('#nombre').focus(function(){

     $('#resultado-nombre').remove();
     $('#validar-nombre').append('<p>* Obligatorio</p>');

 });

 $('#nombre').blur(function(){

     $('.advertencia').remove();

     valor = $('#nombre').val();

     if(valor != '') {
         $('<img src="imagenes/accept.png" id="resultado-nombre" />').appendTo('#validar-nombre');
     }
     else {
         $('<img src="imagenes/delete.png" id="resultado-nombre" />').appendTo('#validar-nombre');
     }

 });

 $('#correo').focus(function(){

     $('#resultado-correo').remove();
     $('#validar-correo').append('<p>* Obligatorio</p>');

 });

 $('#correo').blur(function(){

     $('.advertencia').remove();

     valor = $('#correo').val();

     if(valor != '') {

       if(validaCorreo(valor)){

          $('<img src="imagenes/accept.png" id="resultado-correo" />').appendTo('#validar-correo');
          var valido = true;

       }
      else {
          $('<span id="resultado-correo">Correo no valido</span>').appendTo("#validar-correo");
      }
    }
    else {
         $('<img src="imagenes/delete.png" id="resultado-correo" />').appendTo('#validar-correo');
    }

 });

 $('#sitio').focus(function(){

     $('#validar-sitio').append('<p>* Opcional</p>');

 });

 $('#sitio').blur(function(){

      $('.advertencia').remove();

 });

 $('#mensaje').focus(function(){

      $('#resultado-mensaje').remove();
      $('#validar-mensaje').append('<p>* Obligatorio</p>');

 });

 $('#mensaje').blur(function(){

     $('.advertencia').remove();

     valor = $('#mensaje').val();

     if(valor != '') {
          $('<img src="imagenes/accept.png" id="resultado-mensaje" />').appendTo('#validar-mensaje');
     }
     else {
        $('<img src="imagenes/delete.png" id="resultado-mensaje" />').appendTo('#validar-mensaje');
     }

 });

 $('#enviar').click(function(){

       if($('#nombre').val()!= '' && $('#correo').val()!='' && $('#mensaje').val()!='' && valido) {

         $('.advertencia').remove();

         $('#envio').append('<img src="imagenes/ajax-loader.gif" alt="Procesando envio" id="cargando" />');

         var nombre = $('#nombre').val();
         var correo = $('#correo').val();
         var sitio = $('#sitio').val();
         var mensaje = $('#mensaje').val();

       $.ajax({
           url: 'envio.php',
           type: 'POST',
           data: 'nombre=' + nombre + '&correo=' + correo + '&sitio=' + sitio + '&mensaje=' + mensaje,

           success: function(resultado) {
               $('#respuesta').remove();
               $('#envio').append('<span id="respuesta">' + resultado + '</span>');
               $('#cargando').fadeOut(500, function() {
                   $(this).remove();
               });

           }
       });

       return false;

   }
   else {
       $('#envio').append('<span>Debe completar los datos requeridos.</span>');
       return false;
    }

 });

});

Varias cosas a las que ponerle atención en el código anterior:

• Utilizamos 3 imágenes en los procesos de validación y envío (accept.png, delete.png, ajax-loader.gif). Estas imágenes son utilizadas para validar correcta e incorrectamente así como mostrar un pequeño cargador al momento de enviar los datos. Pueden obtenerlas en el código fuente que hemos adjuntado al final.
• Hacemos uso del método ajax de jQuery, el cual nos permite enviar asincrónicamente los datos a una página en PHP mediante un método como POST o GET y que esta se ejecute sin la necesidad de recargar la página. Como se puede apreciar, en caso de éxito de esta llamada (el código correspondiente a success), hay un parámetro que es devuelto (resultado), el cual corresponde a un mensaje desplegado por el script que ejecutamos, lo que podremos ver más adelante.
• Hemos incluido en 2 partes un return false. Esto se ha hecho para que el formulario no ejecute el action (de enviar a la página envio.php) de forma normal, sino que ejecute todo de forma asincrónica. Si el usuario tiene desactivado Javascript en su navegador, se ejecutará todo de forma normal.
• En la validación del correo se hace un llamado a una función que lo evaluará, esa la incluiremos a continuación.

El código básicamente ejecuta acciones cada vez que se selecciona un campo de texto (focus) y/o se sale de el (blur). Ahí evalua de acuerdo a los parámetros que hemos definido (que existan datos) y en base a eso muestra un resultado de la validación. Luego, al final, cuando se hace click en el botón de envío, evalúa que existan datos en todos los campos y en ese caso envía. De lo contrario, despliega un mensaje indicando la necesidad de completar el formulario.

Luego, a continuación del código jQuery, incluiremos una función en Javascript que evaluará el correo mediante una expresión regular para verificar que tenga el formato correcto:

function validaCorreo(correo) {

 var expresion = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)
|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})
\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.
|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.)
{2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
 return expresion.test(correo);

}

Entre estos 2 códigos se encargan de toda la validación del formulario, tal como indicamos, en tiempo real. Lo que nos queda hacer ahora es crear nuestro script en PHP para el envío final de los datos.

4.- Código PHP

<?php

 /* Recepcionamos los datos enviados asincrónicamente */

 $nombre = $_POST['nombre'];
 $correo = $_POST['correo'];
 $sitio = $_POST['sitio'];
 $mensaje = $_POST['mensaje'];

 /* Definimos el correo donde enviaremos el mensaje y el asunto */

 $destino = "correo@ejemplo.com";
 $asunto = "Contacto sitio Web";

 /* Definimos el formato del mensaje a enviar */

 $cuerpo = "<strong>Nombre: </strong>".$nombre."<br />
 <strong>Correo: </strong>".$correo."<br />
 <strong>Sitio Web: </strong>".$sitio."<br />
 <strong>Mensaje: </strong>".$mensaje;

 /* Definimos las cabeceras del mensaje */

 $cabecera = "MIME-Version: 1.0\r\n";
 $cabecera .= "Content-type:text/html; charset=iso-8859-1\r\n";
 $cabecera .= "From: $correo\r\n";
 $cabecera .= "Reply-to: $correo\r\n";
 $cabecera .= "Cc: $correo\r\n";

 /* Enviamos vía correo, devolviendo un mensaje en caso de éxito o falla */ 

 if(mail($destino, $asunto, $cuerpo, $cabecera)) {
    echo 'Su mensaje ha sido enviado.
     De ser necesario, nos pondremos en contacto con Ud.';
 }
 else {
    echo 'No se pudo enviar el mensaje. Int&eacute;ntelo nuevamente';
 }

?>

Los mensajes desplegados en el if y else cuando enviamos el correo son aquellos que son devueltos al método .ajax de jQuery (el parámetro resultado del que hablamos anteriormente), los cuales son desplegados en el formulario.

Conclusión

Y con eso tenemos nuestro formulario de contacto terminado, el cual valida en tiempo real y envía los datos de forma asincrónica. En caso de que el visitante tenga Javascript desactivado en su navegador, esto se ejecutará de forma normal, es decir, el script PHP se cargará al momento de presionar el botón Enviar y no habrá validación en tiempo real.

Antes de terminar:

Y como siempre, les recordamos que este tutorial ha sido:

Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.

Esperamos que este tutorial haya sido de utilidad para Uds.

Muchas gracias por leer y será hasta una próxima oportunidad.