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