Unas de las cosas más difíciles de diseñar con buenos resultados son los formularios, hasta hace un tiempo no permitían salirse demasiado de la forma establecida y solía ser complejo incluirlos en diseños elaborados creando una unidad con el entorno. Pues este diseño duro quedó atrás con el desarrollo más avanzado de CSS y HTML.
Esta plantilla tiene como objeto mostrar un ejemplo de formulario que no utiliza la clásica columna que dispone los elementos de forma vertical. En este caso podremos desplegar varias columnas de elementos y además de eso, hacer que el planteo responda al tamaño del explorador en el que está siendo mostrado.
La aplicación es bastante más simple de lo que se piensa y el resultado es muy atractivo, aunque siempre se puede mejorar.
El HTML
Es un formulario simple a primera vista y utiliza diferentes etiquetas naturales a este tipo de planteos funcionales. No requiere conocimientos demasiado avanzados para editarlo y en realidad, la magia sucede en el CSS.
<form class="cbp-mc-form"> <div class="cbp-mc-column"> <label for="first_name">First Name</label> <input type="text" id="first_name" name="first_name" placeholder="Jonathan"> <label for="last_name">Last Name</label> <input type="text" id="last_name" name="last_name" placeholder="Doe"> <label for="email">Email Address</label> <input type="text" id="email" name="email" placeholder="jon@doe.com"> <label for="country">Country</label> <select id="country" name="country"> <option>Choose a country</option> <option>France</option> <option>Italy</option> <option>Portugal</option> </select> <label for="bio">Biography</label> <textarea id="bio" name="bio"></textarea> </div> <div class="cbp-mc-column"> <label for="phone">Phone Number</label> <input type="text" id="phone" name="phone" placeholder="+351 999 999"> <label for="affiliations">Affiliations</label> <textarea id="affiliations" name="affiliations"></textarea> <label>Occupation</label> <select id="occupation" name="occupation"> <option>Choose an occupation</option> <option>Web Designer</option> <option>Web Developer</option> <option>Hybrid</option> </select> <label for="cat_name">Cat's name</label> <input type="text" id="cat_name" name="cat_name" placeholder="Kitty"> <label for="gagdet">Favorite Gadget</label> <input type="text" id="gagdet" name="gagdet" placeholder="Annoy-a-tron"> </div> <div class="cbp-mc-column"> <label>Type of Talent</label> <select id="talent" name="talent"> <option>Choose a talent</option> <option>Ninja silence</option> <option>Sumo power</option> <option>Samurai precision</option> </select> <label for="drink">Favorite Drink</label> <input type="text" id="drink" name="drink" placeholder="Green Tea"> <label for="power">Special power</label> <input type="text" id="power" name="power" placeholder="Anti-gravity"> <label for="weapon">Weapon of choice</label> <input type="weapon" id="weapon" name="weapon" placeholder="Lightsaber"> <label for="comments">Comments</label> <textarea id="comments" name="comments"></textarea> </div> <div class="cbp-mc-submit-wrap"><input class="cbp-mc-submit" type="submit" value="Send your data" /></div> </form>
El CSS
Una serie de propiedades que plantean los resultados estéticos y la forma en la que el formulario reacciona ante las modificaciones de resolución. Posee propiedades inherentes a una gran cantidad de exploradores, aunque saben que esto es todo experimental, por lo que pueden llegar a encontrar errores en aquellos un tanto más antiguos. Claro, que si tienen ganas de probar, pueden encontrar la forma de subsanar la situación.
.cbp-mc-form {
position: relative;
}
/* Clearfix hack by Nicolas Gallagher:
http://nicolasgallagher.com/micro-clearfix-hack/ */
.cbp-mc-form:before,
.cbp-mc-form:after {
content: " "; display: table;
}
.cbp-mc-form:after {
clear: both;
}
.cbp-mc-column {
width: 33%;
padding: 10px 30px;
float: left;
}
.cbp-mc-form label {
display: block;
padding: 40px 5px 5px 2px;
font-size: 1.1em;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
}
.cbp-mc-form input,
.cbp-mc-form textarea,
.cbp-mc-form select {
font-family: 'Lato', Calibri, Arial, sans-serif;
line-height: 1.5;
font-size: 1.4em;
padding: 5px 10px;
color: #fff;
display: block;
width: 100%;
background: transparent;
}
.cbp-mc-form input,
.cbp-mc-form textarea {
border: 3px solid #fff;
}
.cbp-mc-form textarea {
min-height: 200px;
}
.cbp-mc-form input:focus,
.cbp-mc-form textarea:focus,
.cbp-mc-form label:active + input,
.cbp-mc-form label:active + textarea {
outline: none;
border: 3px solid #10689a;
}
.cbp-mc-form select:focus {
outline: none;
}
::-webkit-input-placeholder { /* WebKit browsers */
color: #10689a;
font-style: italic;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #10689a;
font-style: italic;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #10689a;
font-style: italic;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #10689a;
font-style: italic;
}
.cbp-mc-submit-wrap {
text-align: center;
padding-top: 40px;
clear: both;
}
.cbp-mc-form input.cbp-mc-submit {
background: #10689a;
border: none;
color: #fff;
width: auto;
cursor: pointer;
text-transform: uppercase;
display: inline-block;
padding: 15px 30px;
font-size: 1.1em;
border-radius: 2px;
letter-spacing: 1px;
}
.cbp-mc-form input.cbp-mc-submit:hover {
background: #1478b1;
}
@media screen and (max-width: 70em) {
.cbp-mc-column {
width: 50%;
}
.cbp-mc-column:nth-child(3) {
width: 100%;
}
}
@media screen and (max-width: 48em) {
.cbp-mc-column {
width: 100%;
padding: 10px;
}
}
Pueden visitar el sitio del autor en Codrops para descargar el código y ver la demo de este formulario multi columnas.
