Formulario de contacto en HTML5 y CSS3

Hola a todos, espero que se encuentren muy bien. Vamos a hacer un formulario de contacto usando HTML5 y CSS3. Para este tutorial vamos a preparar dos archivos. Uno es el html (formularioContacto.html) y el otro es el archivo de estilos cascada (formularioContacto.css).

En el archivo con el html vamos a realizar toda la diagramación y la estructura de los elementos del formulario. En el archivo CSS vamos a tener todo el diseño que aplicaremos a las capas del archivo.

Estructura HTML.

A continuación, agregamos el código HTML:

Código :

<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8″ />
<title>Formulario de contacto | John W. Martinez</title>
<link href=”formularioContacto.css” rel=”stylesheet” type=”text/css” media=”screen” />
</head>
<body>
<section id=”Formulario”>
<h1>Enviar mensaje</h1>
<form action=”" method=”post” enctype=”multipart/form-data” name=”formu”>
<fieldset>
<label for=”nombre”>Nombre: </label>
<input type=”text” name=”nombre” id=”nombre” placeholder=”Escriba su nombre completo” required=”" />

<label for=”correo”>Correo: </label>
<input type=”email” name=”correo” id=”correo” placeholder=”Escriba su correo electr&oacute;nico” required=”required”/>

<label for=”mensaje”>Mensaje: </label>
<textarea id=”mensaje” name=”mensaje” placeholder=”Escriba sus comentarios”></textarea>

<input type=”submit” value=”Enviar mensaje” />

</fieldset>
</form>
</section>
</body>
</html>

Explicamos algunos detalles acerca de la estructura HTML5:

Usamos la etiqueta fieldset para agrupar todos los campos del formulario.
A las etiquetas “label” le asignamos el atributo “for” con el ID del campo de texto que estamos relacionando.
El atributo “placeholder” me permite tener un texto por defecto en cada una de las cajas de texto, las cuales al ser seleccionadas (evento focus) se borra automáticamente (esto antes se podía hacer pero usando javascript y muchas más líneas de código).
La etiqueta de tipo “email” me hace una verificación automática del formato correcto de correo electrónico. Antes podía hacerse con javascript usando varias líneas de código, con HTML5 es solo agregar el type=”email” y ahorras código y tiempo.
El atributo “required” me permite hacer que el campo sea obligatorio antes de activar el evento submit en el formulario. Al igual que los dos puntos anteriores, esto antes era posible con javascript, pero HTML5 me permite hacerlo solo aplicando la propiedad.

Aplicando el CSS.

El código es el siguiente:

Código :

body, section, h1, form, fieldset, input, textarea{
   margin:0; 
   padding:0; 
   border:0; 
   outline:none;
   }

html{
   height:100%;
   }

body{
   background: #728eaa;
   background: -moz-linear-gradient(top, #002c3c 0%, #2099aa 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c3c), color-stop(100%,#2099aa));
   font-family: sans-serif;
   }

#Formulario {
   width: 430px; 
   margin: 60px auto; 
   padding: 60px 30px;
   background: #eee; 
   border: 1px solid #e1e1e1;
   -moz-box-shadow: 0px 0px 8px #444;
   -webkit-box-shadow: 0px 0px 8px #444;
   border-radius: 20px; 
   -moz-border-radius: 20px;
   -webkit-border-radius: 20px;
   }

h1 {
   font-size: 35px; 
   color: #445668; 
   text-transform: uppercase;
   text-align: center; 
   margin: 0 0 35px 0; 
   text-shadow: 0px 1px 0px #f2f2f2;
   }

label {
   float: left; clear: left;
   margin: 11px 20px 0 0; 
   width: 95px;
   text-align: right; 
   font-size: 16px; 
   color: #445668;
   text-transform: uppercase; 
   text-shadow: 0px 1px 0px #f2f2f2;
   }

input {
   width: 260px; 
   height: 35px; 
   padding: 5px 20px 0px 20px; 
   margin: 0 0 20px 0;
   background: #5E768D;
   background: -moz-linear-gradient(top, #002c3c 0%, #204c5c 20%); /* firefox */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c3c), color-stop(20%,#204c5c)); /* webkit */
   border-radius: 5px; 
   -moz-border-radius: 5px; 
   -webkit-border-radius: 5px;
   -moz-box-shadow: 0px 1px 0px #f2f2f2;
   -webkit-box-shadow: 0px 1px 0px #f2f2f2;
   font-family: sans-serif; 
   font-size: 16px; color: #f2f2f2;
   text-transform: uppercase; 
   text-shadow: 0px -1px 0px #334f71;
   }

input::-webkit-input-placeholder  {
   color: #ddd; 
   text-shadow: 0px -1px 0px #38506b; 
   text-transform:capitalize;
   }
   
input:-moz-placeholder {
   color: #ddd; 
   text-shadow: 0px -1px 0px #38506b; 
   text-transform:capitalize;
   }

textarea {
   width: 260px; 
   height: 170px; 
   padding: 12px 20px 0px 20px; 
   margin: 0 0 20px 0;
   background: #5E768D;
   background: -moz-linear-gradient(top, #002c3c 0%, #204c5c 20%); /* firefox */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c3c), color-stop(20%,#204c5c)); /* webkit */
   border-radius: 5px; 
   -moz-border-radius: 5px; 
   -webkit-border-radius: 5px;
   -moz-box-shadow: 0px 1px 0px #f2f2f2;
   -webkit-box-shadow: 0px 1px 0px #f2f2f2;
   font-family: sans-serif; font-size: 16px;
    color: #f2f2f2; 
   text-transform: uppercase; 
   text-shadow: 0px -1px 0px #334f71;
   resize:none;
   }
   
textarea::-webkit-input-placeholder  {
   color: #ddd; 
   text-shadow: 0px -1px 0px #38506b; 
   text-transform:capitalize;
   }

textarea:-moz-placeholder {
   color: #ddd; text-shadow: 0px -1px 0px #38506b; 
   text-transform:capitalize;
   }

input:focus, textarea:focus {
   background: #728eaa;
   background: -moz-linear-gradient(top, #204c5c 0%, #406c7c 20%); /* firefox */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#204c5c), color-stop(20%,#406c7c)); /* webkit */
   }

input[type=submit]{
   width: 185px; 
   height: 52px; 
   float: right; 
   padding: 10px 15px; 
   margin: 0 15px 0 0;
   -moz-box-shadow: 0px 0px 5px #999;
   -webkit-box-shadow: 0px 0px 5px #999;
   border: 1px solid #556f8c;
   background: -moz-linear-gradient(top, #002c3c 0%, #204c5c 100%); /* firefox */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c3c), color-stop(100%,#204c5c)); /* webkit */
   cursor: pointer;
   }

input[type=submit]:hover {
   width: 185px; height: 52px; 
   float: right; 
   padding: 10px 15px; 
   margin: 0 15px 0 0;
   -moz-box-shadow: 0px 0px 5px #999;
   -webkit-box-shadow: 0px 0px 5px #999;
   border: 1px solid #556f8c;
   background: -moz-linear-gradient(top, #668099 0%, #728eaa 100%); /* firefox */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#204c5c), color-stop(100%,#406c7c)); /* webkit */
   cursor: pointer;
   }

Este código CSS3 no es nada del otro mundo, ni algo que no hayamos visto en los tutoriales anteriores; sin embargo, explicaremos un poco sobre las funciones de este código:

Es necesario aplicar “reset” a algunas etiquetas HTML que por defecto vienen con propiedades (dependiendo del explorador). En este caso, formateamos las etiquetas body, section, h1, form, fieldset, input y textarea.
Luego aplicamos a todo el documento html un alto del 100%; con esto hago que el documento mida el alto de la pantalla para hacer el degradado en el fondo.
Después seguimos con la etiqueta “body”, donde voy a definir un fondo degradado. Esta etiqueta es indispensable que esté aplicada tanto para mozilla como para webkit (Chrome y Safari).
El siguiente es la etiqueta section, quien para este tutorial lo vamos a usar como la caja donde estará el formulario contenido. A esta caja le aplicamos un color de fondo, una sombra de caja y los bordes redondeados.
Luego definimos las etiquetas label, input y textarea con bordes redondeados, colores degradados y cambio en los colores al evento focus. Además hemos agregado una nueva característica que trae CSS3 que son los selectores (o corchetes). Con esto, podemos aplicar efectos a etiquetas que tengan ciertos atributos (como el tipo, cantidad determinada de caracteres, alto, ancho, etc.).

Y bien, esto es todo por hoy, con este código no resta sino empezar a hacer pruebas y ver qué resultados salen.

Ver demo de este tutorial

Descargar archivos de este tutorial

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Por Omegakenshin el 19 de Diciembre de 2011

Excelente aporte, gracias John!
Por Rhys el 19 de Diciembre de 2011

falta arreglar para ie8 y menores
Por Mariux el 19 de Diciembre de 2011

Rhys-blog :
falta arreglar para ie8 y menores

ya no es necesario
Por Jesus el 19 de Diciembre de 2011

En mi firefox lo veo descuadrado
Por johnwmartinez el 19 de Diciembre de 2011

Si! que descuidado, olvidé ingresar la librería de Modernizr que nos ayuda a que se vea bien el HTML5 en navegadores "subdesarrollados" (como los IE<9).

Lo de Firefox si me preocupa, voy a revisar porque en el mio si se ve bien, pero creo que puede ser el hecho de no haber incluído la librería Modernizr.

Gracias por sus comentarios.
Por jose-humberto el 23 de Diciembre de 2011

Exelente post, sigue asi brother
Por DriverOp el 25 de Diciembre de 2011

Faltaron los prefijos para Opera (-o-).
Por david el 27 de Diciembre de 2011

gracias por el articulo
Por Scheryl el 28 de Diciembre de 2011

Y a donde lo envia? como pongo un correo al que quiero que llegue?
Por johnwmartinez el 28 de Diciembre de 2011

Scheryl-blog :
Y a donde lo envia? como pongo un correo al que quiero que llegue?

El código PHP es lo más fácil. Lo encuentras en decenas de tutoriales disponibles en CLab. Para la muestra de un botón:

http://www.cristalab.com/tutoriales/formulario-de-email-flash-php-enviado-en-html-c141l/

El enfoque era ver como podíamos usar HTML5 y CSS3 para hacer el front-end del formulario con estética.
Por jask05 el 24 de Enero de 2012

Muy muy bueno y la explicación de 10 pero tengo una duda existencial. Si me planteo hacer la web con código HTML y CSS3 la gente que entre con navegadores que no soporten estos estándares no van a poder ver, por ej, si no insertan un nombre, el mensaje de error, por lo tanto, la pregunta es, cómo puedo hacer compatible para nuevos y "viejos" navegadores ?

Gracias !
Por Cotelandia el 20 de Febrero de 2012

Me gusto el ejemplo, lastima que en ie8 no funcione. Si mal no tengo entendido a i8 no hay que dejarlo de lado todavia, caso contrario de lo que dice Mariux. Espero no errarle
Por sergix el 15 de Marzo de 2012

Hola
He hecho un site con html5 y css3, y he pueto un formulario de contacto dentro del acordeon. Al hacer clic en "CONTACTO" se abre el acordeon, pero al ingresar datos en el formulario de contacto el acordeon se cierra. Sabes como puedo solucionar esto? Es como que los campos del formulario no soportan el acordeon en html5 y css3.
Sdos
Por andriuquin el 02 de Abril de 2012

Jhon esta buenísimo tu formulario me ha servido de mucho, sólo tengo un problema, si me puedes ayudar te lo agradecería mucho. Mira tengo armado mi formulario y funciona perfect, el único problema es que al enviar no se vuelve a cargar la misma pag, sino que se va a una en blanco.
Mi consulta es: como puedo hacer para que se recargue la misma pagina del formulario?¿?¿ así como lo hace tu tutorial. Te envió el código de mi formulario para que a ver si me puedes ayudar.
saludos y muchas gracias!!!

codigo en formulario php

<section id="formulario">
<form id="formulario" name="formulario" method="post" action="enviar.php">
<table width="740" border="0" align="center">
<tr class="txt_contacto">
<td width="206">Nombre*</td>
<td width="49"><label for="nombre"></label></td>
<td width="231">Apellido*</td>
</tr>
<tr>
<td width="60" height="30" align="center" class="caja_nombre"><input style="border:none" name="nombre" type="text" id="nombre" size="43" placeholder="Escriba su nombre" required="required" /></td>
<td width="30" height="40"> </td>
<td align="center" class="caja_nombre"><input style="border:none" name="apellido" type="text" id="apellido" size="43" placeholder="Escriba su apellido" required="required" /></td>
</tr>
<tr>
<td height="17"> </td>
<td><label for="apellido"></label></td>
<td> </td>
</tr>
<tr class="txt_contacto">
<td>E-mail*</td>
<td><label for="email"></label></td>
<td>Empresa</td>
</tr>
<tr>
<td width="40" align="center" class="caja_email"><input style="border:none" name="email" type="text" id="email" size="43" placeholder="Escriba su e-mail completo" required="required" /></td>
<td height="40"><p> </p>
<p> </p></td>
<td align="center" class="caja_empresa"><input style="border:none" name="empresa" type="text" id="empresa" size="43" /></td>
</tr>
<tr>
<td> </td>
<td><label for="empresa"></label></td>
<td> </td>
</tr>
<tr class="txt_contacto">
<td>Sitio Web</td>
<td><label for="web"></label></td>
<td>Teléfono*</td>
</tr>
<tr>
<td align="center" class="caja_web"><input style="border:none" name="web" type="text" id="web" size="43" /></td>
<td height="40"><p> </p>
<p> </p></td>
<td align="center" class="caja_telefono"><input style="border:none" name="telefono" type="text" id="telefono" size="43" placeholder="Escriba su teléfono" required="required" /></td>
</tr>
<tr>
<td> </td>
<td><label for="telefono"></label></td>
<td> </td>
</tr>
<tr>
<td class="txt_contacto">Consulta / Comentario *</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3" align="center"><label for="comentario"></label>
<label for="comentario"></label>
<textarea name="comentario" id="comentario" cols="100" rows="10" placeholder="Escriba un comentario" required="required"></textarea></td>
</tr>
<tr>
<td align="center"><span class="txt_contacto">Una vez recibido este formulario completo, un <br />
</form>
ante de Veratech se pondrá en contacto con usted.</span></td>
<td align="center"><img src="media/contacto/linea_vertical.gif" alt="linea" width="8" height="112" /></td>
<td><input type="submit" class="boton" id="enviar" value="." /></td>
</tr>
</table>
</form>

codigo de enviar php

<?
//Recepcion de datos//
$nombre=$_POST['nombre'];
$apellido=$_POST['apellido'];
$email=$_POST['email'];
$empresa=$_POST['empresa'];
$web=$_POST['web'];
$telefono=$_POST['telefono'];
$comentario=$_POST['comentario'];
//Fin Recepcion de datos//

$header = 'From: ' . $mail . " \r\n";
$header .= "X-Mailer: PHP/" . phpversion() . " \r\n";
$header .= "Mime-Version: 1.0 \r\n";
$header .= "Content-Type: text/plain";

//Accion de envio//
//--------------------//
$para='[email protected],[email protected]';
$mensaje='Este mensaje fue enviado por
Nombre: '.$nombre.';
Apellido: '.$apellido.';
Email: '.$email.';
Empresa: '.$empresa.';
Sitio Web: '.$web.';
Telefono: '.$telefono.';
Comentario: '.$comentario.';

';
$mensaje .= "Enviado el " . date('d/m/Y', time());
$desde='Mensaje Cliente';
$asunto = 'Contacto Cliente desde Veratech';
mail($para,$asunto,$mensaje,$desde);

?>
Por johanso el 25 de Junio de 2012

Alguien sabe como darle estilos a los tooltips de los navagadores cuando un campo es requerido y se muestra el error de validacion?
Por Ichan el 23 de Julio de 2012

¿El javascript para que es, que hace?
¿es necesario?
yo quiero aplicar este formulario a una pagina que estoy jalando desde mi pc con xampp
puedo hacerlo o fuerza necesito el scrip?
Por Henry el 29 de Julio de 2012

Me parece muy buena tu ayuda, gracias, saludos
Por badtron el 21 de Agosto de 2012

Gracias, justo lo que requeria
Por johnwmartinez el 23 de Agosto de 2012

badtron :
Gracias, justo lo que requeria

Por nada amigo. Estamos para colaborarnos.
Por julian el 08 de Noviembre de 2012

esta exelente pero aun no he podido configurar el php si alguien tiene uno que ya le sirve con este form que me ayude.
Por maikgianino el 07 de Diciembre de 2012

Preferiria un Tutorial que ayude a como hacerlo y no poner los codigos para dejarlo hecho.
Es solo como yo lo veo.
Por tony.garcia el 14 de Diciembre de 2012

Joder tio, es un excelente tutorial, solo tengo que darle otros toquesito jejejej . Pero esta fantastica esta pagina va a mis marcadores.

Saludos cordiales
Por francy el 28 de Marzo de 2013

no me corrio! que chimbo mira y como haces que esta caja se extienda a lo que la piso para escribir
Por Hectorsito20 el 28 de Abril de 2013

Francy, les fácil solo tiene que usar un estado de css que se llama focus, por ejemplo: hagamoslo con un input de type text bla bla bla, a ese input en css le damos la el estado input:focus, es decir cuando hagamos click dentro de del elemento va a tener cierto comportameinto, imaginate que tiene un input con un cnacho de 300px, (width: 300px;) y queremos que al entrar en foco se ponga más largo o más alto: input {width: 300px; } input:focus {width: 500px;} y eso estodo, y si queremos que el cambio se mas suave podemos usar transition de css3 -webkit-transition: width .4s linear; eso es todo, un saludo

Espero te halla ayudado..
Por Mar el 27 de Agosto de 2013

No se descarga ni se ve la demo
Por lisa el 02 de Septiembre de 2013

la vida es bella
Por juan el 02 de Septiembre de 2013

cono programar una pagina web en html5
Por - el 05 de Septiembre de 2013

-
Por RicardoCD el 27 de Octubre de 2013

Hola es recomendable hacer todo el Front solo en HTML y hace llamadas al server por ajax o algo similar .. ?
Por vktor el 24 de Noviembre de 2013

una duda, como haces para evitar que el usuario inserte por ejemplo etiquetas html o javascript en los campos? eso ya esta validado?
Por Exequiel el 21 de Enero de 2014

Em... y en que parte va el codigo que dice a que correo debe ir este mensaje del formulario????????????????
Por carlos arroyave el 08 de Septiembre de 2014

MUCHAS GRACIAS ME FUE DE GRAN AYUDA
Por jennymendez2012 el 16 de Septiembre de 2014

me gustaria saber como se hace una hoja de vida en html5 con css
gracias no se mucho css gracias por explicar a los principiantes como yo gracias
Por Pachoncita el 22 de Septiembre de 2014

GRACIAS,POR EL APORTE
Por dd el 24 de Febrero de 2015

ds
Por marce el 09 de Abril de 2015

me gsuto el post solo kisiera saber mas sobre el te tama
Por lerojas el 22 de Mayo de 2015

hola amigo, muy buen post me ayudo bastante pero quede con la duda,
en la parte del CSS input[type=submit]:hover existira la opcion :visited
como en las opciones de la etiqueta a.

saludos
Por Adonai Valencia M el 27 de Agosto de 2015

Excelente!!! Esto era lo que yo estaba buscando, Felicitaciones y Muchísimas gracias
[email protected]
Por anonimous el 22 de Abril de 2016

esta muy bien como queda el formulario , ahora, ¿como se hace para que funcione que todos los comentarios se muestren en la misma ventana de mi web, o al menos que me lleguen a mi correo?

Formulario de contacto en HTML5 y CSS3

Estructura HTML.

Aplicando el CSS.

Publica tu comentario

o puedes...