Formulario de contacto HTML5

**Hectorsito20** · 26-oct-2012

Hola que tal a todos me gustaría mostrarle un formulario de contacto muy funcional y visualmente muy atractivo y sobre todo funcional...

Aquí está el código html!

Código:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Formulario de Contacto HTML5</title>
	<link rel="stylesheet" media="screen" href="styles.css" >
</head>
<body>
    <div id="container">
        <form class="contact_form" action="#" method="post" name="contact_form">
            <ul>
                <li>
                     <h2>Formulario de contacto</h2>
                     <span class="notificacion_requerida">* Los campos marcados con un asterisco son obligagatorios
                     </span>
                </li>
                <li>
                    <label for="name">Nombre:</label>
                    <input type="text"  placeholder="Hectorsito" required />
                </li>
                <li>
                    <label for="email">Email:</label>
                    <input type="email" name="email" placeholder="[email protected]" required />
                    <span class="form_hint">Formato apropiado "[email protected]"</span>
                </li>
                <li>
                    <label for="website">Website:</label>
                    <input type="url" name="website" placeholder="http://intercambiosos.org.com" required pattern="(http|https)://.+"/>
                    <span class="form_hint">Formato apropiado "http://dominio.com"</span>
                </li>
                <li>
                    <label for="message">Mensaje:</label>
                    <textarea name="message" cols="40" rows="6" required ></textarea>
                </li>
                <li>
                	<button class="submit" type="submit">Enviar información</button>
                </li>
            </ul>
        </form>
    </div>
</body>
</html>

Aqui el css!

Código:

/* === REGLAS GENERALES === */

body {
	margin: 0;
	padding: 0;
	background-color: #f2f2f2;
}

#container {
	width: 800px;
	margin: 30px auto;
	padding: 20px 30px;
	background: #fff;
}

/*===  ESTILOS PARA QUITAR TODOS LOS OUTLINE DE CUALQUIER OUTLINE  ===*/
*:focus {outline: none;}

/* === FUENTES DEL FORMULARIO === */
body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;}
.contact_form h2, .contact_form label {font-family:Georgia, Times, "Times New Roman", serif;}
.form_hint, .notificacion_requerida {font-size: 10px;}

/* === ESTILIZACIÓN DE LAS DECORACIONES === */
.contact_form ul {
    width:750px;
    list-style-type: none;
	list-style-position: outside;
	margin:0px;
	padding:0px;
}
.contact_form li{
	padding:12px; 
	border-bottom:1px solid #eee;
	position:relative;
} 
.contact_form li:first-child, .contact_form li:last-child {
	border-bottom:1px solid #777;
}

/* === FORMULARIO HEADER === */
.contact_form h2 {
	font-family: 'Lucida Grande', Arial, Helvetica, sans-serif;
	margin:0;
	font-size: 28px;
	letter-spacing: -1;
	font-weight: normal;
	display: inline;
}

.notificacion_requerida {
	color:#d45252; 
	margin:5px 0 0 0; 
	display:inline;
	float:right;
}

/* === ELEMENTOS DEL FORMULARIO === */
.contact_form label {
	width:150px;
	margin-top: 3px;
	display:inline-block;
	float:left;
	padding:3px;
}

.contact_form input {
	height:20px; 
	width:220px; 
	padding:5px 8px;
}

.contact_form textarea {padding:8px; width:300px;}
.contact_form button {margin-left:156px;}


	/* ESTILOS VISUALES DE LOS ELEMENTOS DE CONTACTO */
	.contact_form input, .contact_form textarea { 
		border:1px solid #aaa;
		box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
		border-radius:2px;
		padding-right:30px;
		-moz-transition: padding .25s; 
		-webkit-transition: padding .25s; 
		-o-transition: padding .25s;
		transition: padding .25s;
	}

	.contact_form input:focus, .contact_form textarea:focus {
		background: #fff; 
		border:1px solid #555; 
		box-shadow: 0 0 3px #aaa; 
		padding-right:70px;
	}

/* === ESTILOS DE VALIDACION HTML5 === */	
.contact_form input:required, .contact_form textarea:required {
	background: #fff url(img/red_asterisk.png) no-repeat 98% center;
}
.contact_form input:required:valid, .contact_form textarea:required:valid {
	background: #fff url(img/valid.png) no-repeat 98% center;
	box-shadow: 0 0 5px #5cd053;
	border-color: #28921f;
}
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
	background: #fff url(img/invalid.png) no-repeat 98% center;
	box-shadow: 0 0 5px #d45252;
	border-color: #b03535
}

/* === Hints del Formulario === */
.form_hint {
	background: #d45252;
	border-radius: 3px 3px 3px 3px;
	color: white;
	margin-left:8px;
	padding: 1px 6px;
	z-index: 999;
	position: absolute; 
	display: none;
}
.form_hint::before {
	content: "\25C0";
	color:#d45252;
	position: absolute;
	top:1px;
	left:-6px;
}
.contact_form input:focus + .form_hint {display: inline;}
.contact_form input:required:valid + .form_hint {background: #28921f;}
.contact_form input:required:valid + .form_hint::before {color:#28921f;}
	
/* === ESTILOS DEL BOTÓN ENVIAR === */
button.submit {
	background-color: #68b12f;
	background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
	background: -webkit-linear-gradient(top, #68b12f, #50911e);
	background: -moz-linear-gradient(top, #68b12f, #50911e);
	background: -ms-linear-gradient(top, #68b12f, #50911e);
	background: -o-linear-gradient(top, #68b12f, #50911e);
	background: linear-gradient(top, #68b12f, #50911e);
	border: 1px solid #509111;
	border-bottom: 1px solid #5b992b;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	box-shadow: inset 0 1px 0 0 #9fd574;
	-webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
	-moz-box-shadow: 0 1px 0 0 #9fd574 inset;
	-ms-box-shadow: 0 1px 0 0 #9fd574 inset;
	-o-box-shadow: 0 1px 0 0 #9fd574 inset;
	color: white;
	font-weight: bold;
	padding: 6px 20px;
	text-align: center;
	text-shadow: 0 -1px 0 #396715;
}
button.submit:hover {
	opacity:.76;
	cursor: pointer; 
}
button.submit:active {
	border: 1px solid #20911e;
	box-shadow: 0 0 10px 5px #356b0b inset; 
	-webkit-box-shadow:0 0 10px 5px #356b0b inset ;
	-moz-box-shadow: 0 0 10px 5px #356b0b inset;
	-ms-box-shadow: 0 0 10px 5px #356b0b inset;
	-o-box-shadow: 0 0 10px 5px #356b0b inset;
	
}

Vista de un video con la funcionalidad

Ojo el video es hd sugerido para verlo mejor, y les pido una disculpa por no haber explicado, lo que pasa es que tengo gripe, pero cualquier duda me la pueden dejar en los comentarios con gusto les responderé, Saludos Héctoristo20

**Froyandres** · 26-oct-2012

baduser · 26-oct-2012

**Tururojo** · 26-oct-2012

Buen aporte muchas gracias.

PD: que te mejores de salud compañero.

**VJEVans** · 27-oct-2012

exelente trabajo compañero ..

**carmen10** · 27-oct-2012

**joivan** · 04-nov-2012

Gracias muy bueno.

**guanaco** · 11-nov-2012

Yo siempre utilizo el jquery para estas validaciones y no sabia que el html 5 se puede jeje voy a revisar muchas gracias

**gnulizard** · 13-nov-2012

gracias, muchas veces uno se kiebra la cabezo con eso :D

**kako_s69** · 12-dic-2012

una cosa estimado y me podrias colocar el php el codigo completo de ese formulario que no logro hacerlo funcionar porfavor

26-oct-2012	#4
Tururojo Erudito Ingreso: enero-2012 Ubicación: Barcelona (España) Mensajes: 5.106 Sexo: País: Signo: Agradecido: +10.221	Buen aporte muchas gracias. PD: que te mejores de salud compañero. Mi Sabiduria, abarca lo que una gota de Agua, en el Oceano del Conocimiento

12-dic-2012	#10
kako_s69 Ingreso: diciembre-2012 Mensajes: 1 Sexo: País: Signo: Agradecido: +0	ayudame porfa una cosa estimado y me podrias colocar el php el codigo completo de ese formulario que no logro hacerlo funcionar porfavor Última edición por Dianela; 12-dic-2012 a las 21:58 Razón: Quitar Correo

Temas Similares
Tema	Autor	Foro	Respuestas	Último mensaje
HTML5 Demos – Coleccion de ejemplos en Html5 para estudiar	Abraxas	Recursos Webmasters & Diseño Web	8	08-jul-2012 13:45
LigthBox y formulario de contacto	Ab's	Recursos Webmasters & Diseño Web	4	01-may-2012 22:10
Dos Nuevas entradas de Formulario (Novedad de HTML5)	Hectorsito20	Recursos Webmasters & Diseño Web	6	19-dic-2011 11:57
Como hacer un formulario web de contacto con base de datos	gahby_3	Peticiones	1	26-sep-2011 14:31

Los siguientes 18 usuarios agradecen a Hectorsito20 por este mensaje:
alivlece (26-oct-2012), aprendizdelaweb (15-jul-2013), carmen10 (27-oct-2012), choleet (18-feb-2015), CrazyDarOne (15-nov-2012), CriticalError (12-dic-2012), Froyandres (26-oct-2012), iyllescas (23-abr-2015), joivan (13-abr-2015), Juandelacosa (11-dic-2012), kako_s69 (12-dic-2012), magnoli@ (11-jun-2013), opadrino (12-feb-2013), picunes (26-mar-2015), tom1260 (15-oct-2014), Tururojo (26-oct-2012), VJEVans (27-oct-2012), xurfero (25-mar-2014)

26-oct-2012	#2
Froyandres Genio Ingreso: diciembre-2011 Ubicación: En la Sucursal del Cielo Mensajes: 1.041 Sexo: País: Signo: Agradecido: +2.302

Los siguientes 4 usuarios agradecen a Froyandres por este mensaje:
baduser (26-oct-2012), Hectorsito20 (26-oct-2012), platoyvaso (23-ago-2014), Tururojo (26-oct-2012)

26-oct-2012	#3
baduser Banned Ingreso: julio-2009 Ubicación: Mexico City, Capital del Mundo Mensajes: 33.485 Sexo: País: Signo: Agradecido: +70.461

Los siguientes 3 usuarios agradecen a baduser por este mensaje:
Froyandres (26-oct-2012), Hectorsito20 (26-oct-2012), Tururojo (26-oct-2012)

Los siguientes 2 usuarios agradecen a Tururojo por este mensaje:
Hectorsito20 (26-oct-2012), platoyvaso (23-ago-2014)

27-oct-2012	#5
VJEVans Erudito Ingreso: mayo-2010 Ubicación: Arequipa (Peru) Mensajes: 6.935 Sexo: País: Signo: Agradecido: +10.323	exelente trabajo compañero ..

27-oct-2012	#6
carmen10 Erudito Ingreso: agosto-2010 Ubicación: En Andalucia Mensajes: 17.081 Sexo: País: Signo: Agradecido: +22.675	*El que busca la verdad corre el riesgo de encontrarla.*

04-nov-2012	#7
joivan Ayudante Frecuente Ingreso: septiembre-2012 Ubicación: La Paz, Bolivia Mensajes: 130 Sexo: País: Signo: Agradecido: +205	Gracias muy bueno.

Usuarios que han agradecido este mensaje de joivan
Hectorsito20 (09-nov-2012)

11-nov-2012	#8
guanaco Ayudante Frecuente Ingreso: mayo-2010 Ubicación: 127.0.0.1 Mensajes: 141 Sexo: País: Signo: Agradecido: +223	Yo siempre utilizo el jquery para estas validaciones y no sabia que el html 5 se puede jeje voy a revisar muchas gracias

13-nov-2012	#9
gnulizard Aprendiendo Ingreso: mayo-2012 Mensajes: 91 Sexo: País: Signo: Agradecido: +77	gracias, muchas veces uno se kiebra la cabezo con eso :D