Tutorial – Formulario de contacto en HTML5 Y CSS3

En este nuevo tutorial vamos a crear un simpático formulario de contacto para usarlo en nuestra web, Hace algun tiempo realizamos un tutorial de las nuevas propiedades de formularios en HTML5 (Ver tutorial) lo vamos a hacer con las nuevas etiquetas de HTML5 y también vamos a necesitar la ayuda de CSS3 para lograr una buena y dinámica apariencia.

Esto es lo que vamos a Lograr:

form-contacto

Este formulario tendrá buena apariencia en IExplorer de 8 y versiones anteriores pero en las versiones modernas de los navegadores se verá muy cool.

Ahora si comencemos:

1 – El html

En el html tenemos la forma del formulario, dentro de la etiqueta <form> y con una clase para darle un estilo, dentro tenemos una lista desordenada <ul> y cada elemento <li> será un campo para el formulario, esto lo podemos hacer con <div>, <p> o tablas, pero en este caso utilizaremos los ítems de la lista <li>. Especificamos los diferentes tipo de <input> para cada campo, ejemplo <input type=”url”> que nos especifica que ese campo es para una dirección de web, y cada campo lo asociamos con su respectivo <label> para definirlo todos los campos son requeridos por que tienen la propiedad required y por medio de los placeholder de cada campo especificamos el valor esperado de cada campo de entrada. Básicamente el código de un formulario html5 básico.

Esto es lo que llevamos al momento.
html5-formulario

2 – El Css

h2-form

Este código css fue para darle un poco de estilo al título h2 que está dentro del formulario.

Aplicamos los estilos para los <li> y <ul> del formulario que son los contenedores de cada campo con su label, damos una anchura a la lista y quitamos los margin y padding y de igual posicionamos los ítems <li> y colocamos bordes debajo de cada <li>.

estilos para los lebel da cada <li>

label-formulario css

 

Con el anterior código damos estilos a los <input>, damos un ancho, alto y padding, de igual manera al textarea y al botón de enviar la damos un margin left para posicionarlo.

Con los estilos anteriores damos un aspecto visual agradable a los campos de entrada de texto, entre ellos un borde, una sombra interna por medio de box-shadow inset, bordes redondeados, padding y una transición que se hace con el padding que simula una animación que cambia del estado normal a focus, en este estado cambiamos el background el color del borde y el box-shadow.

css3-form

 

validacion-css3-form

con el código anterior lo que hacemos es darle las propiedades a los diferentes estados de los campos de entrada, el primero es verde y se coloca cuando hay información y es válida, esto va de acuerdo al tipo de entrada del campo, y se coloca rojo cuando está en estado focus o la entrada es invalida.

Y por ultimo damos los estilos al botón de envío del formulario entre ellos damos un degradado a ese botón, sombras en el botón y en el texto, bordes redondeado entre otros. También damos los estilos en el estado hover del botón que es cuando el mouse esta sobre él y el estado active que se ejecuta al momento de clickear el botón.

botones-form-html5-css3

Y eso es todo, claro podemos seguir embelleciendo este sencillo formulario con las nuevas características de CSS3, pero lo importante es tener bases para hacer cosas que necesitemos, que nos ayuden y nos despierten la curiosidad para hacer cosas mejores.

————————

Ver la parte 2 de este tutorial enviar formulario: http://www.tutosytips.com/tutorial-2-enviar-formulario-de-contacto-en-html5-con-php/

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

6 Respuestas

  1. vanina dice:

    Hola estoy armando mi pagina por medio de un templare y quisiera saber como doy la orden que se envie a mi correo el formulario, ya que no encuentro el lugar para poner el link, no se nada de programación, solo copio y pego según veo los resultados, muy buena tu explicación, saludos Vanina

    • Johanso dice:

      oK Vanina, el formulario lo podemos procesar con php,, este tutorial solo es el codigo html su ordenamiento y estructura y algo nuevo de html5. Pero si, vamos a hacer muy pronto un tutorial de como hacer para prosesar este formulario

  2. Will dice:

    Hola como doy la orden que se envie a mi correo el formulario??

  3. Maria dice:

    Muy buen aporte. Saber crear páginas en Internet puede ser de gran utilidad teniendo en cuenta la gran disponibilidad laboral que poseen los profesionales en esta área hoy en día.

  4. marius dice:

    Muy bien presentado, y mejor expicado, gracias por tu generosidad