Crear un formulario de contacto con Css3

Si estas creando un sitio web, una de las páginas mas importantes que necesitaras es la del formulario de contacto, la interacción con su potencial cliente o objetivo es vital para el exito de su sitio web, entonces es muy importante y natural que quiera un formulario que sea funcional y a la vez elegante, aquí aprenderá a crear un formulario limpio y simple con solo CSS3 , sin imagenes.

El Código HTML


El código html es realmente simple.


<form class="css3Form">
<h1>Contact me</h1>
<ul>
<li><input type="text" value="Your Name"/></li>
<li><input type="text" value="Email Address"/></li>
<li><textarea rows="5"> Comments </textarea></li>
</ul>
<input type="button" class="button" value="Send" />
</form>


El Código CSS


Se comienza con el CSS del formulario, note que CSS3 será muy usado, esta apariencia no funciona en IE8, o navegadores mas viejos.


.css3Form ul li
{
margin:10px 0;
box-shadow: 1px 1px 0 0 #949494;
-moz-box-shadow: 1px 1px 0 0 #949494;
-webkit-box-shadow: 1px 1px 0 0 #949494;
border-radius: 18px 18px;
-moz-border-radius: 18px 18px;
-webkit-border-radius: 18px 18px;

float:left;
clear:both
}
.css3Form input, .css3Form textarea
{
margin:0;
width:300px;
padding: 8px 10px;
font-size:16px;
color:#b3b3b3;
border:solid 1px #585858;
text-shadow: 1px 1px 0 #4b4b4b;

border-radius: 18px 18px;
-moz-border-radius: 18px 18px;
-webkit-border-radius: 18px 18px;

box-shadow: inset 1px 1px 3px 0 #000;
-moz-box-shadow: inset 1px 1px 3px 0 #000;
-webkit-box-shadow: inset 1px 1px 3px 0 #000;

background:-moz-linear-gradient(0% 100% 90deg,#7e7e7e, #5e5e5e);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#5e5e5e), to(#7e7e7e));

}
.css3Form .button
{
width:150px;
border:solid 1px #bababa;
color:#363636;
font-weight:bold;
font-size:18px;
border-bottom-color:#363636;
background:-moz-linear-gradient(0% 100% 90deg,#5f5f5f, #9e9e9e);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#9e9e9e), to(#5f5f5f));

box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;

text-shadow: 1px 1px 0 #9d9d9d;
}


Y listo ahí lo tienes un formulario simple con solo usar Css.
Autor: N/A - Fuente

Enlaces patrocinados:



Comentarios

Ivan:
2011-08-10 22:08:40

Muy bonito el formulario,lo agregare a mi web

eugenio:
2012-06-05 21:06:39

muchas gracias muy bueno

Ake:
2012-10-06 17:10:05

gracias me sirvió mucho.

Maria:
2013-08-24 13:08:40

Me gusta, pero como hago para que los tres campos sean obligatorios y para que lleguen los emails a mi correo? Gracias :)

Jesus Santos:
2014-07-14 10:07:44

No logro hacerlo funcionar, disculpa.

Chrismart Andrade:
2014-10-29 22:10:17

MMmm Muchas Gracias Es Genial Este Codigo, Mas Bien Ya Me Hicieron El Trabajo por Mi y ya veo Le falta algo al codigo por eso es que mucha gente no le entiende o no le funciona pero la verdad es gente que no sabe ni consiquiera html ya que le falta el <form action="aqui va la url del envio ejemplo send.php" o puedes ponerle action="mailto:aqui tu correo electronico aunque lo podrian ver las demas gente asi q no se recomienda mucho eso u.u"

Puma:
2015-05-14 23:05:12

Genial

elalngel:
2019-06-04 01:06:56

me ayudo bastante, gracias

Deje un Comentario
[Opcional]
(No se mostrará en el sitio)
[Opcional]
[Opcional]

Ultimos Comentarios

Sergio Ramirez dijo:

Extraño tus labios 7u7

Mary dijo:

Hola me gusta esta galeria no la puedo descargar

Jose Molina dijo:

Buenisimo! Excelente para mi!

Erick Hernandez dijo:

Muy buen menú

SyntaxHighlighter.config.stripBrs=true;