CSS

Ξ 58 comentarios

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

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

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.

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

Comparte este tutorial

El culpable de todo esto

Las tardes gloriosas de domingo y las grandes ovaciones a estadio lleno, no son algo extraño para Xabadu. Luego de ser descubierto a los 4 años en un partido de barrio por los ojeadores del gran Aviación F.C., sacudió el mercado nacional al ser traspasado en $500 pesos chilenos (1 USD) y 3 coca colas al renombrado Estrella Blanca de Lolol. Luego de una impresionante carrera por equipos como Lozapenco, Santa Cruz, Deportivo Lago Chungará y una incursión en la 3a división del futbol de Kazajstan, su record imbatible hasta la fecha de 1257 goles en 20 partidos lo llevo a ser elegido como uno de los arqueros más recordados en la historia pelotera nacional. Una lesión en el colmillo superior derecho lo llevó al retiro el año 2003, pero está de vuelta y sin duda que su jerarquía y experiencia internacional será un gran aporte.

En los barrios marginales se le conoce como: Xabadu

Comentarios en Facebook

58 Comentarios

  • Hola, ante todo excelente tutorial, gracias por el aporte. He implementado el formulario en un sitio web que he creado pero tras subirlo al servidor web, me sale el mismo error (con diferente ruta evidentemente) que a eccehomo. Mi error es exactamente:

    Warning: mail() [function.mail]: SMTP server response: 530 SMTP authentication is required. in C:\Domains\enriquevaldes.es\wwwroot\envio.php on line 32
    No se pudo enviar el mensaje. Inténtelo nuevamente

    Pueden ayudarme por favor?? Muchas Gracias de Antemano.

  • Hola, bueno de ante mano gracias por el tuto me ha servido de mucho.

    Tengo una duda, quiero agregar un nuevo campo al formulario, pero no sé qué cambiar en el código .js para que quede bien, puesto que al meter ese campo el mensaje no se envia, no llega.
    Saludos y gracias nuevamente.

  • Hola.

    Genial el post, me ha sido de mucha ayuda el código pero tengo una duda/problema. He usado el código y funciona correcto pero no realiza la validación. Es decir, que manda el correo haya datos o no introducidos. Preferiría que no me pasara esto pero mientras lo envíe, de momento me vale… ^-^

    Un saludo.

  • exelente formulario pero pillé otro error, si no lleno los campos y pongo “enviar enviar enviar enviar” se repite el mensaje infinitas veces en la alerta

  • Hola, me hace todo el proceso perfecto, pero el mail nunca llega.
    Está ingresado correctamente en la variable $destino, y probé con varios correos..
    Alguna idea?
    Gracias

  • hola que tal ? me gustaria tener este formulario en mi pagina, pero tengo alguna dudas.
    como por ejemplo que la etiqueta figuere dentro del campo y desaparzca al empezar a tipear, como este ejemplo

    http://demo.joomclub.org/ajax-contact-form

    y lo otro es que el campo mensaje este alineado a la derecha del campo nombre, correo web y sitio.

    es factibles haces esto ?

    Desde ya muchas gracias por el tutorial no entiendo mucho de programaciòn.

    saludos

  • Hola amigos, le agradezco infinitamente su aporte, solo una pequeña molestia para ustedes.

    Es que puse a funcionar el codigo muy bien, pero al momento de enviar el mensaje, no veo que llega a mi cuenta, que podra pasar??

  • Hola amigos, nuevamente les escribo, el caso es que si me funciona, el problema era que lo estaba manejando en localhost y queria enlazar con acceso a la web, tan pronto lo subi a mi hosting funciono!!!

    Gracias totales!

  • Hola, he probado el formulario y está genial. Lo único que veo es que el error que comunica pablo arriba y que dices haber solucionado más adelante sigue existiendo… sale lo de “correo no valido” pero también dice que el mensaje ha sido enviado. He repasado todo el código y no veo lo que hago mal. Tengo todo igual que en lo que has publicado.

    Si sigues por aquí, te agradezco de antemano la ayuda!!

  • Hola

    Estan excelentes su tutos

    Como solicitud de ayuda he probado el codigo y se queda colgado, no me arroja un resultado final ya he incluido el codigo en la raiz del sitio y no funciona, que esto haciendo mal? en el php elm correo de envio lo he cambiado por mi personal y no me llega nada

1 2 3 4 5 6

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Gente linda que nos quiere

Donde mas estamos