Formulario de contacto con HTML5 y jQuery

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í:

<form id="formulario" name="formContacto" method="post" action="process.php" >
	<label for="nombre">Nombre*:</label>
	<input name="name" placeholder="Introduce tu hombre" class="required" /><br />
        
	<label for="apellidos">Apellidos*:</label>
	<input name="surname" placeholder="Tus dos apellidos" class="required" /><br />
                
	<label for="empresa">Empresa*:</label>
	<input name="company" placeholder="¿Para quién trabajas?" class="required" /><br />
    
	<label for="departamento">Cargo/Departamento:</label>
	<input name="department" placeholder="¿Qué función desempeñas?" /><br />
            
	<label for="telefono">Teléfono:</label>
	<input name="phone" placeholder="¿Hablamos?" /><br />
        
	<label for="mail">E-mail*:</label>
	<input name="mail" placeholder="Podré contestarte" class="required" /><br />
            
	<label id="modif01" for="comentario">Comentario:</label>
	<textarea id="modif02" placeholder="Escribeme tu comentario aquí" name="comment"></textarea><br />
                    
	<div id="aster" > * | Campos obligatorios</div>
                            
	<input class="botonAcceder" type="submit" id="boton" value="Enviar" />
</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.

<form id="formulario" action="process.php" method="post" name="formContacto"></form>

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):

/*	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['name']);
$apellidos = strip_tags($_POST['surname']);
$empresa = strip_tags($_POST['company']);
$departamento = strip_tags($_POST['department']);
$telefono = strip_tags($_POST['phone']);
$correo = strip_tags($_POST['mail']);
$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).

$fecha = time();$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):

//Headers del correo electrónico.
$headers =
	'From: ' . $correoFrom . "\r\n". 
	'Reply-To: ' . $correoDestino. "\r\n" . 
	'X-Mailer: PHP/' . phpversion() .
	'MIME-Version: 1.0\r\n'.
	'Content-type: text/html; charset=UTF-8\r\n';

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:

//Correo de destino; donde se enviará el correo.
$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.

//Formateo el asunto del correo
$asunto = "Contacto WEB_$nombre $apellidos; de $empresa";
//Formateo el cuerpo del correo
$cuerpo = "Enviado por: " . $nombre . ", " . $apellidos . " a las " . $fechaFormateada . "";
$cuerpo .= "Empresa: " . $empresa . ", en el cargo/departamento de " . $departamento . "";
$cuerpo .= "Teléfono de contacto: " . $telefono . "";
$cuerpo .= "E-mail: " . $correo . "";
$cuerpo .= "Comentario: " . $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:

// Envío el mensajemail( $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:

/*Estilos formulario*/
#textoContacto {
	width: 500px;
	position: relative;
}

#textoContacto h3 {
	font-size: 3.5em;
	font-family: Helvetica, arial;
	font-weight: 100;
	-webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg);
	
	color:#d3e11d;
	
	position: absolute;
	top: 200px;
	left: -80px;
}
#formulario {
    width:435px;
    margin:auto;

    font-family: Helvetica, Verdana, Geneva, sans-serif;
    font-size: .8em;
    
    padding:15px;
    
    padding-bottom: 50px;
    padding-left:90px;
    position: relative;
    
    background: url(images/content/contactoBG2.png) no-repeat left;
}
#formulario label{
	display: block;
	float:left;
	width:175px;
    font-weight:bold;
    font-size:12px;
    
    padding-top:5px;
    
    position: relative;
}

label.error { 
	width:175px;
	margin-top:-17px;
	
	color:#ff0000;
	
	float: left;
	
	font-size:1em;
}

#formulario input{
	display: block;
	float:left;
	width:250px;
	margin-bottom: 7px;
}

#formulario textarea{
	display: block;
	float:left;
	width:254px;
	height: 200px;
	margin-bottom: 5px;
	
	resize: none;
}

#formulario .botonAcceder{
	width: 175px;
	height: 30px;
	background: #d3e11d;
	border:none;
	margin:auto;
	
	position: absolute;
	right: 0;
	left: 0;
	bottom: 10px;
	
	color:#535353;
}

#formulario .botonAcceder:hover{
	background: #535353;
	color:#d3e11d;
}

#formulario #aster {
	color:#ff0000;
}

#textoContacto {
	color:#535353;
}

.thanks{
	color:red;
	text-align:center;
	height:220px;
	
	margin-top: 100px;
	font-size:1em;
}

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

67 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á?

    1. 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 :)

  2. 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!

  3. 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?

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

  4. 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!!

  5. 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!

  6. 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!!!!

  7. Hola Dario,

    Solo darte las gracias por este peazo tuto.
    Soy admin y de este tema no sé mucho, tengo que implementar un formulario y me viene que ni pintao.

    Voy a probar y te cuento.

    Me reitero... muchísimas gracias.

    Saludos,

    Pablo

  8. excelente trabajo!! tengo un solo problema cuando apreto para nviar el mail aunque no esten llenos los datos de nombre envia igual llevandome a una página en blanco de process.php.
    Lo mismo si completo todo el form nunca me aparece el mensaje de enviado, solo me lleva a una web en blanco que es la de process.php.
    Los mails me llegan.

  9. Hola Buenas a todos, mi problemilla es que no me envia el formulario al emai, la validacion esta bien, probe con la sugerencia que le dio al compaero patricio pero nada que envia el email. gracias de antemano por la ayuda que me pueda brindar.

    1. Si no encuentras el fallo siempre puedes descargar el ejemplo que os facilito al final de la entrada y usarlo como base editándolo.

      Un saludo.

  10. Buenas Darío, simplemente comentar que he utilizado parte de tu código para crear un formulario de envio de correo para nuestra web de fotografía.

    Decirte que me ha parecido muy útil la idea y que funciona perfectamente, es altamente recomendable.

    Saludos.

  11. Nadamas como nota. Modifique en el formulario donde dice
    class"required" y pongan.. required="required" porque si le dan enviar aun asi se envia y ya con esto obliga a que llenen los campos.

  12. Antes de nada gracias por el aporte, siempre es interesante agredecer a personas com tú.
    Mi pregunta es si sería posible agregar en tu formulario la posibilidad de enviar archivos adjuntos.

    No tendría problemas con el html (input label..) pero no tengo los conocimientos para validarlo en el process.php

    Gracias de antemano.

  13. Muchas gracias! me has salvado el día :)

    (para quienes al enviar el mail se redirige a una web en blanco (process.php) no se olviden de la carpeta js y la validación jquery que está en el mismo archivo index.php que ha dejado de ejemplo para descargar, copiar y pegar. y listo.)

  14. Hola estupendo ejemplo. Ya me lo baje :D

    Otra cosa soy nuevo con Jquery y Php me baje una plantilla administrativa y la configure a mi estilo pero no allo como enviar los datos mediante el formulario sera que Podrías ayudarme? Donde podría contactarte por mensajería rapida.

    Gracias.. Muy Buena Web...

  15. Hola, el formulario funciona fantastico, pero tengo 2 dudas:
    1.- Seria posible que al enviar el formulario se iniciara la descarga de un archivo??
    2.- Como se haria para que al enviar el formulario redireccionara hacia otra web?
    En este segundo paso creo que tengo un problema, pues al enviar el formulario el mensaje de gracias, no me aparece.
    Muchisimas gracias :)

  16. Hola Diego,
    Te contesto por puntos:
    1.- Si, es posible pero tienes que editar el .php del formulario para que realice esta opción sin trastornar el funcionamiento del formulario.
    2.- Tendrías que hacer una redirección 301 en el .php para que no altere el funcionamiento del formulario, de lo contrario no validará los datos adecuadamente o, como es tu caso, no permitirá mostrar el mensaje final de agradecimiento.

    Saludos.

  17. hola dario gran trabajo tengo una preguna: podria este formulario modificarse para que a determinado nivel de manejo o sea como administrador agregarle o quitarle campos?
    y si fuera asi como seria ? gracias por tu tiempo
    atte:: leonardo

  18. Hola Leonardo,
    Por poder claro que se podría, ¿Cómo? Pues depende de tu sistema... Siento no poder ayudarte más, pero tu cuestión depende de muchos factores.

    Saludos.

  19. Amigo estoy probando el formulario y esta de maravilla, muchas gracias, pero quisiera que cuando se envie el formulario a mi correo el remitente sea el mismo correo que se coloca en el campo email de tu formulario, como puedo hacer eso?

  20. Hola nash, en la entrada se explica correctamente cómo y dónde colocar tu correo para recibir los correos que envía el formulario.

    Saludos.

  21. Hola Dario!
    Muchísimas gracias, es justo lo que he estado buscando.
    Solo tengo un problema, soy nueva en esto, seguí todos los pasos pero al momento de dar enviar lo que hace es abrirme una pantalla en blanco con todo el código php, no entiendo que es lo que me falta? :S
    Gracias nuevamente

  22. Hola Dario muchas gracias por tu aporte, te comento que me gusto mucho el botón de las redes sociales que se destapa tu puedes por favor indicarme como puedo adquirirlos?.

    Muchas gracias

  23. Dario pero este plugin por lo que veo es para WordPress, pero lo puedo anidar en una página normal?, a por cierto tu código del formulario contáctenos funciona por dominios distintos a hotmail, gmail, etc?

  24. Hola Darío muchas gracias por el GRAN APORTE con este formulario que me trabaja muy... pero muy bien.
    Pedirte ayuda con cambiar algunos inputs:

    Nombre*:

    Apellidos*:

    Carnet Identidad*:

    Cambiar empresa por carnet y company por identidad

    Ciudad/Departamento*:

    Fecha de Nacimiento*:

    Cambiar telefono por fecha y phone por fecha

    E-mail*:

    Comentario:

     
     
    *|Campos obligatorios

    He tratado de cambiar como te explico pero no me dá para nada... ayuda por favor... gracias anticipadas.

  25. Dario,
    Debes haber contestado esta pregunta algunas otras veces pero mi única excusa es que soy novato y estoy haciendo el restyling de mi web a pulso así que estoy con el escollo del formulario. Trabajando en la web con tus tres formularios (html/css/php) y personalizando mis datos tengo esta respuesta:
    Not Found
    The requested URL /fcgi-bin/php.fcgi/comunicacion/process.php was not found on this server.
    Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
    ¿Que hago mal?

    1. Hola Pedro, asegúrate de que has colocado los ficheros correctamente y que todas las rutas están bien puestas. En tu caso no localiza el fichero process.php.

  26. Saludos, solicito su ayuda; he hecho un formulario pero no me hace el envío, he revisado la sintaxis y todo parece coincidir. Mi pregunta es: para que el formulario pueda enviarme la info a mi correo debo precargar el archivo.php en el usando la etiqueta: ?, el servidor debe tener alguna configuración especial? debo habilitar alguna función en la configuración del php en el srvidor?

  27. Hola y gracias por el aporte. Lo he incorporado a mi web y, al pulsar el botón "Enviar" del formulario me devuelve el siguiente mensaje de error:

    Parse error: syntax error, unexpected '$cuerpo' (T_VARIABLE) in /homepages/3/d541587912/htdocs/web/process.php on line 27

    La línea 27 de mi fichero "process.php" es:
    $cuerpo = "Enviado por: " . $nombre . ", " . $apellidos . " a las " . $fechaFormateada . "";

    ¿Qué habré hecho mal?

    Espero tu ayuda. Gracias.

  28. Yo mismo me respondo a la pregunta que planteé el otro día, pues ahora ya he instalado bien todos los ficheros del Formulario y debo decir que funciona perfectamente.
    Hay un error tipográfico en el fichero index.php, en el texto para recoger el nombre del visitante, se lee "hombre" en vez de "nombre".
    Un saludo, gracias y enhorabuena.

  29. Un favor Dario, me puedes indicar cómo haría para que una vez obtenidos los datos del remitente, mi formulario pueda enviarle una respuesta al correo que ingreso el remitente, algo así como: " nombreRemitente gracias por tus comentarios. Nos comunicaremos contigo dentro de x horas". Muchas gracias.

  30. Hola Amigo, primero felicitarte por este aporte, yo tengo alojado mi sitio un hosting en yahoo, he subido tus ficheros y no logro que me envie el correo, no he modificado nada mas que la direccion de destino, que pasara, gracias

    1. Es posible que tu servidor no tenga activada la función mail de php, por lo que no podrás enviar correos desde tu servidor. Comprueba esto que te comento.

      Saludos.

  31. Genial post Darío. Me ha sido de gran ayuda.
    Una duda... en localhost me funciona sin problema, el problema es que una vez que lo subo a mi FTP no me llega ningún correo.
    ¿Sabes por qué puede ser?

    Muchas gracias por tu tiempo.

Deja una respuesta

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

*

*

DARÍO BALBONTÍN FERNÁNDEZ es el Responsable del tratamiento de los datos personales del usuario y le informa que estos datos serán tratados de conformidad con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril (GDPR) y la Ley Orgánica 3/2018 de 5 de diciembre (LOPDGDD), por lo que se le facilita la siguiente información del tratamiento: Fin del tratamiento: mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios. Criterios de conservación de los datos: se conservarán mientras exista un interés mutuo para mantener el fin del tratamiento y cuando ya no sea necesario para tal fin, se suprimirán con medidas de seguridad adecuadas para garantizar la seudonimización de los datos o la destrucción total de los mismos.Comunicación de los datos: No se comunicarán los datos a terceros, salvo obligación legal. Derechos que asisten al usuario: Derecho a retirar el consentimiento en cualquier momento. Derecho de acceso, rectificación, portabilidad y supresión de sus datos y a la limitación u oposición al su tratamiento. Derecho a presentar una reclamación ante la Autoridad de control (agpd.es) si considera que el tratamiento no se ajusta a la normativa vigente. Datos de contacto para ejercer sus derechos: contacto@dariobf.com.

¡Únete ya a BFLabs GRATIS! Estreno próximamente... Más información