Formulario de contacto con CSS (Tutorial paso a paso)

Css

En esta nuevo post les daré paso a paso como hacer un sencillo y si formulario de contacto con css, si es primera vez que utilizas css te invito a ver los anteriores post donde explico detalladamente.

Estructura de formulario Html:

formulario

Esta es la estructura que estaré utilizando algo bastante simple y básico, si tu formulario necesita mas campos recuerda que puedes agregarle o quitarle si es el caso esto solo es un ejemplo.

formulario

En la pagina se ve de esta manera pero ya lo arreglaremos css.

Formulario de contacto con css: Código 

le haré un borde pequeño en la parte superior para el fondo del formulario

formulario

formulario

Ahora vamos a centrar y darle borde a nuestro formulario.

formulario

formulario

Ahora separaremos un input de otro  para poder así ubicar los label en la parte inferior de cada input.

formulario

 

formulario

formulario

formulario

Hasta el momento su formulario debe verse de esta manera, seguiremos editando radio y checkbox para que se vean de esta manera, existe un post solo para la personalización de los radio button y checkbox, en el explica mas detalladamente como se diseñaron.

formulario

con el siguiente código lo que haremos es hacer el circulo, colocarle el color y al seleccionar algunas de las dos sea radio o checkbox  se rellene todo como lo ven en la imagen.

formulario

formulario

formulario

formulario

formulario

Ya con este doy por terminado el post su formulario debe quedar de la siguiente manera.

formulario