HTML5 y CSS – Curso básico – Formulario de contacto (III)

En esta guía vamos a detallar los pasos para realizar un formulario de contacto en un sitio web. Para ello vamos a utilizar las nuevas etiquetas de HTML5 y también vamos a trabajar con CSS3, de esta manera podremos manipular las funciones del formulario y su apariencia.

Con el formulario que vamos a realizar podrás recibir información de usuarios a tu sitio web y aparte otorgarle un bonito diseño a dicho formulario.

El código HTML es el siguiente (copiar todo lo que está entre corchetes):

[<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>HTML5 Contact Form</title>
<link rel="stylesheet" media="screen" href="styles.css" >
    <!–[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk
/html5.js"></script>
        <![endif]–>
</head>
<body>
<form class="contact_form" action="#" method="post">
    <ul>
        <li>
             <h2>Formulario de Contacto</h2>
        </li>
        <li>
            <label for="name">Nombre:</label>
            <input type="text"  placeholder="Neoteo" required />
        </li>
        <li>
            <label for="email">Email:</label>
            <input type="email" name="email" placeholder="neoteo@neoteo.com" required />
        </li>
        <li>
            <label for="website">Sitio Web:</label>
            <input type="url" name="web" placeholder="www.neoteo.com" required />
        </li>
        <li>
            <label for="Mensaje">Mensaje:</label>
            <textarea name="Mensaje" cols="40" rows="6" required ></textarea>
        </li>
        <li>
        <button class="submit" type="submit">Enviar</button>
        </li>
    </ul>
</form>
</body>
</html>]
 

Como podrás  observar, visualmente es bastante básico;  para mejorarlo estéticamente vamos a crear un código CSS.

El código CSS es el siguiente (copiar todo lo que está entre corchetes):

[.contact_form h2 {
    background: none repeat scroll 0 0 #c1bfbf;
    border-radius: 5px;
    color: #164a20;
    display: block;
    font-family: calibri;
    font-size: 20px;
    padding: 5px;
    text-shadow: 1px 1px 1px #CCCCCC;
    width: 433px;
}
/*— estilos para los ul y li del formulario —*/
.contact_form ul {
    width:500px;
    list-style-type:none;
margin:0px;
padding:0px;
}
.contact_form li{
padding:12px; 
border-bottom:1px solid #eee;
position:relative;
.contact_form label {
    color: #555555;
    display: inline-block;
    float: left;
    font-family: calibri;
    font-size: 13px;
    font-weight: bold;
    margin-top: 3px;
    padding: 3px;
    width: 90px;
}
.contact_form input {
height:20px; 
width:220px; 
padding:5px 8px;
}
.contact_form textarea {
padding:8px; 
width:300px;
}
.contact_form button {
margin-left:90px;
}
 
/*—– estilos visuales de los elementos ——–*/
 
.contact_form input, .contact_form textarea { 
border:1px solid #aaa;
box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
border-radius:2px;
color: #888;
font-size: 12px;
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:80px;
}
 
/* === Estilos de Validacion === */
 
.contact_form input:required:valid, .contact_form textarea:required:valid {
box-shadow: 0 0 5px #5cd053;
border-color: #28921f;
}
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
box-shadow: 0 0 5px #d45252;
border-color: #b03535
}
 
/* === Estilos del boton de Envio === */
button.submit {
    padding: 9px 17px;
   font-family: Helvetica,calibri, Arial, sans-serif;
   font-weight: bold;
   line-height: 1;
   color: #444;
   border: none;
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb));
   background-image: -moz-linear-gradient(0% 100% 90deg, #BBBBBB, #FFFFFF);
   background-color: #fff;
   border: 1px solid #f1f1f1;
   border-radius: 10px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
button.submit:hover {
opacity:.55;
cursor: pointer; 
color: #fff;
}
button.submit:active {
border: 1px solid #222;
box-shadow: 0 0 10px 5px #444 inset; 
}]
 

Si quieres manipular los valores del color, el tamaño de la fuente, la sombras y demás característica del formulario lo puedes hacer personalizando el código CSS a tu medida. El orden del CSS es de arriba hacia abajo igual que el orden del formulario. Al final encontrarás el estilo del botón de envió tanto en “normal”, “hover” y “actíve”.

Una vez terminado nombras los archivos, por ejemplo “formulario.html” y “styles.css”, y lo subes vía FTP para que este online el formulario.

Deja tu voto

1 punto
Upvote Downvote

Total votes: 1

Upvotes: 1

Upvotes percentage: 100.000000%

Downvotes: 0

Downvotes percentage: 0.000000%

Written by Federico Reggiani

Participo en NeoTeo.com, JuegosFan.com y Foto24.com como desarrollador, entre otras cosas.

23 Comments

Deja una respuesta
  1. Creo que te tomo el codigo html como codigo de pagina directamente, no esta escapado.
    Por lo menos yo en firefox veo directamente los componentes y no el codigo.
    Saludos

    • #5 No se necesita un servidor web para poder ver la página. Con tu puro navegador es más que suficiente para ver la forma. Si necesitas enviar esa información a un servidor tendrías que crearlo en php o en un servlet de java o un asp u otra tecnología.

  2. esto es algo con lo que siempre he batallado desde que escribia mi primeras paginas web en 4.xx. supuestamente antes debia existir un archivo cgi/perl para enviarlo a un correo, incluso en alguna pagina lei que debias poner como tal el email (email@servidor.com), sin embargo nunca me ha funcionado. seria bueno que detallaran esta parte para tratar los datos y que lleguen, ya que en las paginas web que diseñaba, mejor incluia el tipico mailto:email@servidor.com

  3. Algo Falta, no hay ni 1 direccion de envio ni nada que lo almacene localmente en el host… seria bueno que completaran la informacion, si no resulta inutil.

    pd: esto sobra verdad?

  4. A mi parecer el objetivo del tutorial es mostrar los tag y los comportamientos que se pueden tener con HTML 5 como por ejemplo las validaciones en la capa de cliente ya vienen incluidas y no hay que programar en Javascript para que las muestren las cuales se parecen mucho a las validaciones que se proponen en JSF.

  5. En otras palabras que esta incompleto y no vale para nada, si muy guapo esta pero si no funciona… imprimelo y ponlo en un cuadro en la pared no le veo otra utilidad

  6. él título del artículo dice claramente "curso de html y css", no se de que se quejan, es ovbio que él proceso y envío del formulario se hace con otro lenguaje, php, asp, etc.

  7. oie amigazo porque al momento de escribir en el input no lo abarca todo, ya lo eh intentado de varias formas con el padding pero nomás no sale, me sería muy importante tu ayuda.

Deja un comentario

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