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 excelente tutorial muy sencillo y simple de aplicar pero tengo unas consultas que hacer 😀

    1.- El mensaje de respuesta que mi correo ha sido enviado aparece al lado del botón de enviar y me gustaría que apareciera abajo de este, como lo hago??

    2.- Cuando apretó enviar el mensaje y este no es enviado aparece “debe completar todos los datos para enviar” si vuelvo a apretar el boton enviar el mensaje anterior se repite indefinidamente segun la cantidad de veces que precione enviar, como hago para que no suceda esto ??

    Estoy atento a sus respuestas muchas gracias de antemano, saludos

  • Hola! queria agradecerte por el tutorial y felicitarte por tu web. El formulario funcionó de maravillas.

  • Buenos dias gracias por tu formulario lo baje y lo quise trabajar en local y pareciera que funcionara me marca que lo envio pero no llega estoy trabajando con xampp para windows me puedes apoyar ademas no encontre donde configurar el smtp para que se realice el envio o que es lo que tengo que hacer.
    Saludos

  • Mostrar tres párrafos. Cada párrafo tiene un link al final. Este link hace que el párrafo correspondiente se oculte o se muestre. Si esta oculto se muestra, o viceversa.

    digame que si se le mide o que.

  • Buenas una consulta, me funciona todo perfecto el formulario, el problema que tengo es que cuando creo un item de radio button no me llega nunca, y me sale la leyenda undefined, a que se debe eso, y si me podrían dar una mano.

    Muchas gracias

    Excelente el formulario

  • Hola disuclpa quiero descargar el archivo pero no me lo permite tienes algun link en donde lo pueda descargar?

  • Aunque estoy registrado, no me permite bajar el Código

  • Experiencing figured out your training with the sneakers, My partner and i concluded that whether or not it doesn in shape, you have to acquit on your own most certainly instead of invest in which truck.
    how to wear discount cartier bracelet yellow gold http://www.accessoireslamode.in/en/cartier-yellow-gold-love-bracelet-with-10-diamonds-discount-p122/

1 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