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:
- .thanks: Mensaje de agradecimiento.
- #aster: Advertencia de campos obligatorios.
- .error: Mensaje de error cuando no se introduce correctamente algún campo.
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.
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á?
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 :)
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!
Me alegra que te sirva. Un saludo ;)
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?
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.
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!!
Según me comentas parece que se te ha olvidado poner tu dirección de correo en el proccess.php.
Saludos. :)
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!
No puedo verlo porque el contenido HTML no se interpreta en los comentarios.
Te molesta si te lo paso dos minutos por mail :)?
Adelante, tan pronto como pueda lo echo un ojo.
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!!!!
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
Me alegro que te sirva. Un saludo.
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.
Te falta la validación jQuery, revisa los pasos una vez más. Saludos.
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.
Revisa todos los campos de nuevo, algo en el php te falta.
okey ya reviso, gracias dario
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.
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.
Hola, me alegra que te haya sido útil.
Un saludo.
hola, hace todo pero no me llega ningún correo, ya está en el servidor, por qué no me llega el mail?
Hola, asegúrate de configurar bien el fichero .php que se adjunta. El formulario funciona correctamente.
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.
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.
Hola pepofortes,
Sí, sería posible. Basta con agregar el campo en HTML y en el php adjuntarlo al email a la hora de enviarlo.
Saludos.
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.)
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…
Hola Walter, en el ejemplo está todo bien explicado y funciona bien. Leelo de nuevo.
Saludos.
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 :)
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.
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
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.
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?
Hola Edwin,
deberías cambiar en el fichero .php el remitente y colocar la variable del email.
Saludos.
Asi lo hice pero me llega como remitente el webhost y no el correo q colocan en el campo de email. gracias de antemano
Muy buenos dias Dario, pude instalar tu formulario y acoplarlo a mi web cambie el correo tal como explicas, pero no recibo los correos, este es mi email barcelona@conexionfm1073.com, no llegan los mensajes. Agradecido por tu ayuda
Trate de bajar el Formulario, pero me dice que no exite, de donde puedo descargarlo
Hola Cesar,
Ya está reparado el enlace.
Un saludo.
hola gracias por la ayuda….disculpa no se donde poner mi correo para que me siga el formulario…yo tengo hotmail y gmail…
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.
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
Hola, te faltan los ficheros javascript, incluidos en la carpeta js.
Si ya lo estaba leyendo, perdona pero donde se encuentran esos ficheros? :S lo siento
Mil gracias!!
Al final de la entrada puedes descargar el fichero comprimido con todo lo necesario para hacerlo funcionar. Saludos.
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
Hola Luis, eso lo hago con un plugin, Social Lockers.
Saludos.
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?
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.
Hola Juan Carlos, sigue el tutorial, es sencillo cambiar los input o agregar más.
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?
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.
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?
Hola, el servidor debe tener la función mail() de php activada.
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.
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.
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.
El sistema ya muestra ese aviso. Tras darle a enviar oculta el formulario y muestra un mensaje similar al que mencionas.
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
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.
Muy bien explicado, muy facil de digerir, Saludos
Gracias por este excelente tutorial!!! donde puedo descargar los archivos? veo el enlace de ejemplo pero ninguno de descarga!
Excelente post. Muchas gracias
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.
Hola Juan,
puede ser que tu servidor no tenga soporte para la función mail() de php.
Muy bien explicado! Saludos desde Uruguay!