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

  • Excelente estimado. Es justo lo que andaba buscando. Muchas gracias. Grande!!!

  • Muchas gracias fue de gran ayuda este tuto, solo que todavia existen errores como cuando oprimes el boton enviar y aparece el mensaje “Debe completar los datos requeridos.” si se sigue oprimiendo este sigue apareciendo y acumulandose uno enfrente de otro.

  • Hola, tengo problemas con el formulario. En realidad funciona todo muy bien, el unico problema es que no envia al correo. Probe con varios mails, Gmail y Hotmail pero no recibo nada. Me ha pasado con otros formularios. Alguna idea de que puede ser?

  • Bajé su formulario para probarlo y esta muy bueno lo unico que cuando voy a abrirlo no me sale el texto y tengo que hacerle reply para ver el mensaje que puedo hacer para verlo directamente cuando yo abro el correo

  • Hola, tengo un problema estoy adaptando la pagina a mi web y me pasa que no me valida los mensajes, me dice: Debe completar los datos requeridos, pero ya están completos y no me arroja la imagen de aprobado en el mensaje, a que podría deberse?

  • Muy bueno, pero una pregunta… estos codigos los pego en un archivo? como y en que extension tengo que hacer los otros en tal caso?

  • que tal de antemano muchisimas gracias por este tutorial soy nuevo en esto y me estaba dando unos dolores de cabeza con esto del formulario, ahora gracias a ustedes lo comprendo mas…

    queria preguntarte si hay alguna forma de que una vez enviado el formulario se redireccione la pagina a la de contacto.

    denuevo te agradesco mucho por la ayuda

  • Hola buen dia, alguien me puede ayudar seleccione tu codigo y lo pegue y lo modifique a mis necesidades pero no me funciona no envia ningun correo, pero no me marca ningun error. Porfavor que alguien me ayude me urge.

  • Muchas gracias!! funciona perfecto!!

    Si a alguien le sirve:
    Así quedarían validacion.js con los cambios que sugirió Xabadu para que no se envíe nada hasta que el email sea correcto:

    Primer cambio:

    //crear variable “valido” con valor false
    $(function(){
    var valor; /
    var i = 0;
    var valido = false;

    Segundo:

    if(validaCorreo(valor)){
    valido = true; //se cambia el valor de “valido”

    Tercero:

    //se pregunta si “valido” es igual a “true” (sólo remplazar esa linea)
    if($(‘#nombre’).val()!= ” && $(‘#correo’).val()!=” && $(‘#mensaje’).val()!=” && valido == true){

    Saludos!!

  • Que tal, baje los archivos y los coloque en la raiz. Tambien he cambiado el correo electronico del destinatario. Sin embargo, cuando trato en enviar un correo, me resulta en el error:”No se pudo enviar el mensaje. Inténtelo nuevamente”
    Favor ayudar.

1 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