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.

  • SAREVALO

    Muchas Gracias Esta Muy bueno el Tuto!!

  • PerroOscu

    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

  • yo

    no funcionan etiquetas como [code]([.code][./code]) [/code]?????

  • don gato

    Y donde van a parar los mensajes enviados?

    • ano

      #4 A ningún lado. Se necesita enviar a una dirección que se especifica en el tag de form en el atributo de action.

  • wolfman

    No Funciona, no se supone que necesita algo de php?

    • ano

      #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.

  • kameb

    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

  • MR. X

    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?

  • MR. X

    me referia a este codigoque no salio
    !–[if IE]>
    script src="http://html5shiv.googlecode.com/svn/trunk
    /html5.js"> ![endif-

  • ano

    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.

  • pues vaya

    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

  • tito

    é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.

  • hash

    quien necesite el codigo aca esta .. ya lo probe en un server y funciona
    https://www.dropbox.com/sh/wdio09rd4zm44qs/Ipa52kFSlH
    y la pagian de muestra
    http://kontrolhard.tk/formulario.html
    http://kontrolhard.tk/

  • Misael

    bastante bueno. Gracias pro el aporte man!

  • ricardo

    buen aporte

  • Hola que tal, oye solo se visualiza bien en google chrome en los demas exploradores no me carga el css, no sabes a que se deba eso ?

  • julio

    Gracias por el formulario

  • Xavier

    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.

  • Dani

    Muchas gracias por el formulario.
    Una duda: ¿dónde indico la cuenta de correo electrónico en la que quiero recibir los mensajes?
    Gracias!

  • Margarita Echenique

    Hola! lo mismo que comentaron abajo, ¿dónde se pone la cuenta donde van a llegar los mensajes? gracias!!

  • santi

    Uso Notepad++ y le inserté el formulario html, pero no se donde integrar el CSS necesito ayuda

  • Alejandro Bergesio

    Hola, muchas gracias, lo utilice en mi pagina. Le hice unos cambios de color y forma nada mas.