Formulario de contacto con HTML5 y jQuery

13

Aquí dejo un formulario de contacto en HTML5 y CSS3 listo para utilizar.

Para la explicación he dividido el formulario en sus cuatro partes diferenciables; HTML, CSS, php y jQuery.

HTML

Entre las nuevas características de HTML5 para formularios cabe destacar el placeholder, que podría sustituir a la propiedad value que se utiliza para preasignar un valor a los campos del formulario; a diferencia de que el placeholder no es un valor como tal sino que hace de indicador. Al hacer click en el input el placeholder desaparece. Esto antes se hacía con el value y alguna función de javascript.

Nuestro formulario tendrá 6 campos y el comentario del visitante: Nombre, Apellidos, Empresa, Cargo/Departamento, Teléfono y E-mail; al que añadimos el comentario como textarea.

El HTML de nuestro formulario, por tanto, ha de quedar así:

PLAIN TEXT
HTML:
  1. <form id="formulario" name="formContacto" method="post" action="process.php">
  2.     <label for="name">Nombre*:</label>
  3.     <input type="text" name="name" id="name" placeholder="Introduce tu hombre" class="required" /><br />
  4.        
  5.     <label for="surname">Apellidos*:</label>
  6.     <input type="text" name="surname" id="surname" placeholder="Tus dos apellidos" class="required" /><br />
  7.                
  8.     <label for="company">Empresa*:</label>
  9.     <input type="text" name="company" id="company" placeholder="¿Para quién trabajas?" class="required" /><br />
  10.    
  11.     <label for="department">Cargo/Departamento:</label>
  12.     <input type="text" name="department" id="department" placeholder="¿Qué función desempeñas?" /><br />
  13.            
  14.     <label for="phone">Teléfono:</label>
  15.     <input type="tel" name="phone" id="phone" placeholder="¿Hablamos?" /><br />
  16.        
  17.     <label for="mail">E-mail*:</label>
  18.     <input type="email" name="mail" id="mail" placeholder="Podré contestarte" class="required" /><br />
  19.            
  20.     <label for="comment">Comentario:</label>
  21.     <textarea placeholder="Escribeme tu comentario aquí" id="comment" name="comment"></textarea><br />
  22.                    
  23.     <div id="aster"> * | Campos obligatorios</div>
  24.                            
  25.     <input class="botonAcceder" type="submit" id="boton" value="Enviar" />
  26. </form>

También he aprovechado los nuevos tipos de input (tel y email) para los campos correspondientes al teléfono y el correo electrónico.

PHP

En todo fomulario, bien mediante html bien mediante javascript (u otros métodos), debemos especificar un action que indique qué sistema gestionará los datos recogidos en el formulario y procederá a enviarlos por correo electrónico.

En este ejemplo concreto lo indico mediante el propio html con la siguiente línea, diciéndo que process.php será el fichero que gestione los datos de mi formulario y, además, se los haré llegar mediante el método POST.

PLAIN TEXT
HTML:
  1. <form id="formulario" name="formContacto" method="post" action="process.php">

Recogiendo datos del formulario

En este fichero lo que haremos será recoger los datos que llegan con el método indicado (en este ejemplo POST):

PLAIN TEXT
PHP:
  1. /*
  2.     Recopilo los datos vía POST
  3.     Con strip_tags suprimo etiquetas HTML y php para evitar una posible inyección.
  4.     Como no gestiona base de datos no es necesario limpiar de inyección SQL.
  5. */
  6. $nombre = strip_tags($_POST['name']);
  7. $apellidos = strip_tags($_POST['surname']);
  8. $empresa = strip_tags($_POST['company']);
  9. $departamento = strip_tags($_POST['department']);
  10. $telefono = strip_tags($_POST['phone']);
  11. $correo = strip_tags($_POST['mail']);
  12. $comentario = strip_tags($_POST['comment']);

Además, aprovecho para recoger la hora del envío para incluirlo en el email de notificación (el que me llegará a mí con el comentario del visitante).

PLAIN TEXT
PHP:
  1. $fecha = time();
  2. $fechaFormateada = date("j/n/Y", $fecha);

No voy a entrar en detalles sobre cómo funcionan las funciones time y date de php, pero básicamente time recoge la hora del servidor y date la adapta a un formano humanamente legible (importante tener tu servidor configurado para el mismo uso horario en el que vives).

Preparando el envío por correo electrónico
Lo siguiente que tenemos que hacer (y prácticamente lo último) es preparar el contenido y cabeceras del email que vamos a enviar.

Sin entrar en mucho detalle sobre las cabeceras de un correo electrónico decir que es la parte del correo electrónico que lleva la información más valiosa:
From: Nombre y dirección de correo electrónico del emisor (Dirección IP también, pero de forma oculta)
To: Nombre y dirección de correo electrónico del receptor.
Date: Fecha/hora del envio.
Subject: El texto que el emisor introduce en el asunto del correo electrónico.
Si estás interesado en conocer más sobre las cabeceras de un correo electrónico te recomiendo esta lectura.

Pues bien, el siguiente paso en nuestro código php será configurar estas cabeceras; tranquilo, no es tan complicado como parece (puedes limitarte a copiar y pegar las que yo he colocado si lo ves muy complicado):

PLAIN TEXT
PHP:
  1. $textoEmisor = "MIME-VERSION: 1.0\r\n";
  2. $textoEmisor .= "Content-type: text/html; charset=UTF-8\r\n";
  3. $textoEmisor .= "From: Formulario creado por DarioBF - www.dariobf.com";

Como puedes ver, me limito a declarar el MIME-VERSION, Content-type (envío de texto-HTML) y la codificación (UTF-8 en este caso), así como el from del correo electrónico.

Tenemos todos los datos ya listos a excepción del destinatario del correo electrónico, en este caso nosotros mismos:

PLAIN TEXT
PHP:
  1. //Correo de destino; donde se enviará el correo.
  2. $correoDestino = "tu.mail@dominio.ext";

Aquí deberás reemplazar la cadena tu.mail@dominio.ext por tu dirección de correo electrónico.

Enviando el correo
Una vez tenemos recopilados y adaptados todos los datos necesarios, vamos a preparar el cuerpo del mensaje y procedemos a enviarlo.

Para preparar el asunto del mensaje hemos de escoger un formato, que puede ser algo como el siguiente:

Asunto: Contacto WEB_Nombre, Apellido1 Apellido2;
Enviado por: Nombre, Apellido1 Apellido2; 22/2/2012
Teléfono de contacto: 999999999
E-mail: micorreo@dominio.ext
Comentario: Aquí está mi comentario.

Algo similar es lo que vamos a preparar con nuestro código php para que el correo recibido tenga todos los datos accesibles de manera rápida.

PLAIN TEXT
PHP:
  1. //Formateo el asunto del correo
  2. $asunto = "Contacto WEB_$nombre $apellidos; de $empresa";
  3.  
  4. //Formateo el cuerpo del correo
  5. $cuerpo = "<b>Enviado por:</b> " . $nombre . ", " . $apellidos . " a las " . $fechaFormateada . "<br />";
  6. $cuerpo .= "<b>Empresa:</b> " . $empresa . ", <b>en el cargo/departamento de</b> " . $departamento . "<br />";
  7. $cuerpo .= "<b>Teléfono de contacto: </b>" . $telefono . "<br />";
  8. $cuerpo .= "<b>E-mail:</b> " . $correo . "<br />";
  9. $cuerpo .= "<b>Comentario:</b> " . $comentario;

Lo único que estamos haciendo en esa instrucción es generar las variables $asunto y $cuerpo con el formato deseado.

Cuando ya las tenemos podemos enviar el correo electrónico con la siguiente línea:

PLAIN TEXT
PHP:
  1. // Envío el mensaje
  2. mail( $correoDestino, $asunto, $cuerpo, $textoEmisor);

mail es una función de php de la que podéis conocer todo aquí.

Con esto hemos enviado nuestro correo electrónico con los datos del formulario.

CSS

Como es lógico hoy en día, podemos darle una apariencia elegante a nuestro formulario utilizando CSS. En mi caso he usado los siguientes estilos de los que voy a explicar poca cosa:

PLAIN TEXT
CSS:
  1. /*Estilos formulario*/
  2. #textoContacto {
  3.     width: 500px;
  4.     position: relative;
  5. }
  6.  
  7. #textoContacto h3 {
  8.     font-size: 3.5em;
  9.     font-family: Helvetica, arial;
  10.     font-weight: 100;
  11.     -webkit-transform: rotate(-90deg);
  12.     -moz-transform: rotate(-90deg);
  13.    
  14.     color:#d3e11d;
  15.    
  16.     position: absolute;
  17.     top: 200px;
  18.     left: -80px;
  19. }
  20. #formulario {
  21.     width:435px;
  22.     margin:auto;
  23.  
  24.     font-family: Helvetica, Verdana, Geneva, sans-serif;
  25.     font-size: .8em;
  26.    
  27.     padding:15px;
  28.    
  29.     padding-bottom: 50px;
  30.     padding-left:90px;
  31.     position: relative;
  32.    
  33.     background: url(images/content/contactoBG2.png) no-repeat left;
  34. }
  35. #formulario label{
  36.     display: block;
  37.     float:left;
  38.     width:175px;
  39.     font-weight:bold;
  40.     font-size:12px;
  41.    
  42.     padding-top:5px;
  43.    
  44.     position: relative;
  45. }
  46.  
  47. label.error {
  48.     width:175px;
  49.     margin-top:-17px;
  50.    
  51.     color:#ff0000;
  52.    
  53.     float: left;
  54.    
  55.     font-size:1em;
  56. }
  57.  
  58. #formulario input{
  59.     display: block;
  60.     float:left;
  61.     width:250px;
  62.     margin-bottom: 7px;
  63. }
  64.  
  65. #formulario textarea{
  66.     display: block;
  67.     float:left;
  68.     width:254px;
  69.     height: 200px;
  70.     margin-bottom: 5px;
  71.    
  72.     resize: none;
  73. }
  74.  
  75. #formulario .botonAcceder{
  76.     width: 175px;
  77.     height: 30px;
  78.     background: #d3e11d;
  79.     border:none;
  80.     margin:auto;
  81.    
  82.     position: absolute;
  83.     right: 0;
  84.     left: 0;
  85.     bottom: 10px;
  86.    
  87.     color:#535353;
  88. }
  89.  
  90. #formulario .botonAcceder:hover{
  91.     background: #535353;
  92.     color:#d3e11d;
  93. }
  94.  
  95. #formulario #aster {
  96.     color:#ff0000;
  97. }
  98.  
  99. #textoContacto {
  100.     color:#535353;
  101. }
  102.  
  103. .thanks{
  104.     color:red;
  105.     text-align:center;
  106.     height:220px;
  107.    
  108.     margin-top: 100px;
  109.     font-size:1em;
  110. }

Las propiedades más relevantes (para mí) y que merecen mención son:

El resto no dejan de ser estilos propios de formularios.

Cualquier fallo que veas o añadido que creas imprescindible, házmelo saber en los comentarios.

Si te ha servido esta entrada y te gusta, puedes mencionarlo en tu blog, compartirlo o usarlo libremente; sólo te pido un pequeño agradecimiento o bien en esta entrada o bien enlazándola desde el sitio web donde has utilizado el formulario.

Puedes ver un ejemplo aquí.

Puedes descargar el código aquí.

Entradas relacionadas

13 comentarios en “Formulario de contacto con HTML5 y jQuery”

  1. Por alguna razón, cuando recibo un mail desde este formulario, en el campo de nombre de quién envía me aparece como Unknown Sender.

    Por qué será?

    2. Patricio el abril 19th, 2012 a las 21:58

  2. Puede ser que tu versión de php no envíe los headers correctamente en la versión de php o el php.ini del servidor.

    En la documentación de php (http://php.net/manual/es/function.mail.php) tienen esta nota:

    Nota:

    Si no se reciben los mensajes enviados, intentar el uso de sólo LF (\n). Algunos agentes de transferencia de correo de baja calidad en Unix reemplzan LF por CRLF automáticamente (lo que conlleva doblar CR si se usa CRLF). Esto debería ser el último recurso, si bien no cumple con » RFC 2822.

    Asique en la parte del código donde agregas los headers quita el “\r” dejando sólo el “\n” y prueba de nuevo.

    Un saludo :)

    3. Darío BF el abril 19th, 2012 a las 22:03

  3. Hola! muchísimas gracias por la respuesta tan rápida. De hecho la vi ayer pero ya no tuve chance de responderte.

    En el enlace que me pasaste investigué y di con la respuesta, muchas gracias, en estos momentos estoy usando tu formulario en tres sitios, Muchas gracias!

    4. Patricio el abril 20th, 2012 a las 15:39

  4. Me alegra que te sirva. Un saludo ;)

    5. Darío BF el abril 20th, 2012 a las 15:44

  5. Hola a todos, y gracias por el codigo que me viene de perlas. El problema que tengo es el mismo del compañero patricio, que en el remitente me aparece unknown sender… he probado tu mensaje posterior y no he conseguido que funcione bien… me podeis iluminar un poco?

    6. Antonio el abril 20th, 2012 a las 19:17

  6. Lee mi anterior comentario con el enlace al manual de PHP, ahí puse la solución. Cuando tenga un rato actualizaré la entrada para añadirlo.

    Saludos.

    7. Darío BF el abril 21st, 2012 a las 22:41

  7. Dario, buenisimo el tutorial! Tengo un par de problemas con el codigo. El problema es que no puedo hacer funcionar la recepcion del mail. Inclui al server los Jquary. Los coloque en el head, guarde el contacto.php y coloque el archivo process.php, pero no me llega ningun correo, al darle click se me va a process.php. Por favor necesito que me ayudes! Gracias!!

    8. Gonzalo el mayo 10th, 2012 a las 5:54

  8. Según me comentas parece que se te ha olvidado poner tu dirección de correo en el proccess.php.

    Saludos. :)

    9. Darío BF el mayo 10th, 2012 a las 16:52

  9. Dari, gracias por tu respuesta. Pero he colocado mi direccion de correo en el process.php. Queda algo asi:

    -//Correo de destino; donde se enviará el correo.
    $correoDestino = “gonzalo.mauro@bagscomputers.com.ar”;

    -//Texto emisor; sólo lo leerá quien reciba el contenido.
    -$textoEmisor = “MIME-VERSION: 1.0\r\n”;
    -$textoEmisor .= “Content-type: text/html; charset=UTF–8\r\n”;
    -$textoEmisor .= “From: Formulario creado por DarioBF -www.dariobf.com”;

    -/*
    Recopilo los datos vía POST
    Con strip_tags suprimo etiquetas HTML y php para evitar una posible inyección.
    Como no gestiona base de datos no es necesario limpiar de inyección SQL.
    */
    -$nombre = strip_tags($_POST['razon']);
    -$apellidos = strip_tags($_POST['surname']);
    -$ciudad = strip_tags($_POST['ciudad']);
    -$departamento = strip_tags($_POST['department']);
    -$telefono = strip_tags($_POST['phone']);
    -$correo = strip_tags($_POST['mail']);
    -$comentario = strip_tags($_POST['mensaje']);
    -$fecha = time();
    -$fechaFormateada = date(“j/n/Y”, $fecha);

    Modifique los name por los que cree en el formulario html.

    Y este seria el formulario que cree en el html:

    Razon Social:

    Ciudad:

    E-mail:

    Mensaje:


    $(function(){
    $(‘#formulario’).validate({
    submitHandler: function(form) {
    $(form).ajaxSubmit({
    url: ‘process.php’,
    success: function() {

    $(‘#textoContacto h3′).hide();
    $(‘#formulario’).hide();
    $(‘#textoContacto’).append(“Gracias por contactar con nosotros.”)
    }
    });
    }
    });
    });

    Necesito que me des una mano! por favor, me esta costando bastante esto!

    Gracias!

    10. Gonzalo el mayo 10th, 2012 a las 18:33

  10. No puedo verlo porque el contenido HTML no se interpreta en los comentarios.

    11. Darío BF el mayo 10th, 2012 a las 18:39

  11. Te molesta si te lo paso dos minutos por mail :)?

    12. Gonzalo el mayo 10th, 2012 a las 18:40

  12. Adelante, tan pronto como pueda lo hecho un ojo.

    13. Darío BF el mayo 10th, 2012 a las 18:57

  13. Dario, muchisimas gracias por la buena onda, y el interes en ayudarme!! GENIO!!!! funciona pero con cuentas de hotmail, con el dominio de GOOGLE APP no funciona. MILLONES DE GRACIAS!!!!

    14. Gonzalo el mayo 10th, 2012 a las 21:10

Deja un comentario

Volver arriba