Formulario de contacto con HTML5 y CSS3 (Con ejemplo)

Vamos a ver como hacer fácilmente un formulario de contacto con HTML5 y CSS3, con ejemplos incluidos.

Primero vamos a elaborar el código HTML.

<form action="#" class="contact_form" method="post">
<ul>
<li>
            <h2>
Formulario de contacto</h2>
</li>
<li>
           <label for="name">Nombre:</label>
           <input placeholder="Chey" required="" type="text" />
       </li>
<li>
           <label for="email">Email:</label>
           <input name="email" placeholder="mercedesconde@ymail.com"

            required="" type="email" />
       </li>
<li>
           <label for="website">Sitio Web:</label>
           <input name="web" placeholder="http://cheydeveloper.blogspot.com.es/"

           required="" type="url" />
       </li>
<li>
           <label for="Mensaje">Mensaje:</label>
           <textarea cols="40" name="Mensaje" required="" rows="6"></textarea>
       </li>
<li>
          <button class="submit" type="submit">Enviar</button>
        </li>
</ul>
</form>

Nos quedaría un formulario más o menos así:

Ahora vamos a mostrar el css:

.contact_form h2 {
    background: none repeat scroll 0 0 #F3F3F3;
    border-radius: 5px;
    color: blue;
    display: block;
    font-family: sans-serif;
    font-size: 20px;
    padding: 5px;
    text-shadow: 1px 1px 1px #CCCCCC;
    width: 433px;
}


.contact_form ul {
    width:750px;
    list-style-type:none;
    margin:0px;
    padding:0px;
}

.contact_form li{
    padding:12px; 
    position:relative;
}

.contact_form label {
    color: #555555;
    display: inline-block;
    float: left;
    font-family: sans-serif;
    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;
}

.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;
}

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

button.submit {
    padding: 9px 17px;
   font-family: Helvetica, 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; 
}

Y ahora nuestro formulario quedaría así:

No voy a explicar los códigos porque supongo que si estáis haciendo esto es porque más o menos entendéis, pero no tenéis imaginación para hacerlo o no estabais inspirados.

Aún y así, si tenéis alguna duda con ellos, ser libre de preguntarme que contestaré en cuanto pueda.

Espero que os sirva, ¡un saludo!

Más articulos

Tweet

Escrito por Unknown

Si tienes alguna otra duda, o quieres comentar algo sobre el tema, te animo a que dejes un comentario. También puedes visitar nuestro foro. ¡Un saludo!