Bootstrap es el framework front-end más popular y posiblemente completo de toda la red, que permite a los desarrolladores, de manera muy rápida y sencilla, construir sitios web y aplicaciones web que se muestren correctamente en todos los dispositivos. He compilado 5 formularios desarrollados en Bootstrap y listos para utilizarse en tus proyectos, para que seas más productivo y no pierdas el tiempo maquetando esos tediosos campos de texto. Sí, has oido bien, es hora de ahorrarse un tiempecito...
Formulario de login vertical
Una plantilla de formulario muy básica que puede ser fácilmente mejorada y modificada para adaptarse a casi cualquier necesidad. Lo ideal es que la utilices como punto de partida para cualquier tipo de formulario simple tales como los de login, formularios de contacto... etc.
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Formulario de login en una línea
Los formularios en una sola línea están muy, pero que muy extendidos, sobre todo para formularios de ingreso de usuarios. Échale un vistazo al código de más abajo. ¿Notas algún cambio respecto al formulario anterior? Pocos, ¿verdad? De hecho, la única diferencia entre este código y el anterior es la clase .form-inline añadida al elemento form de html.
<form class="form-inline" role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Formulario de contacto
Los formularios de contacto es posible que sean los formularios más populares de todos. Toda web que se precie cuenta con formulario de contacto para que los visitantes puedan ponerse en contacto con el administrador de la web. A continuación te proporcionamos una plantilla de calidad para todos los formularios de contacto que necesites, más un pequeño código CSS para que sea vea mucho más vistoso. Si nos ponemos del lado educativo, este formulario es un buen ejemplo sobre cómo utilizar los glyphicons.
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="well well-sm">
<form class="form-horizontal" method="post">
<fieldset>
<legend class="text-center header">Contact us</legend>
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
<div class="col-md-8">
<input id="fname" name="name" type="text" placeholder="First Name" class="form-control">
</div>
</div>
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
<div class="col-md-8">
<input id="lname" name="name" type="text" placeholder="Last Name" class="form-control">
</div>
</div>
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-envelope-o bigicon"></i></span>
<div class="col-md-8">
<input id="email" name="email" type="text" placeholder="Email Address" class="form-control">
</div>
</div>
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-phone-square bigicon"></i></span>
<div class="col-md-8">
<input id="phone" name="phone" type="text" placeholder="Phone" class="form-control">
</div>
</div>
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-pencil-square-o bigicon"></i></span>
<div class="col-md-8">
<textarea class="form-control" id="message" name="message" placeholder="Enter your massage for us here. We will get back to you within 2 business days." rows="7"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
Y aquí tienes la parte del CSS
.header {
color: #36A0FF;
font-size: 27px;
padding: 10px;
}
.bigicon {
font-size: 35px;
color: #36A0FF;
}
Formulario de ingreso de dirección
Aquí tienes un formulario bastante completo que ofrece básicamente todo lo que necesitas para recoger una dirección postal de un cliente de, por ejemplo, EEUU. Utilízalo tal y como está, o personalízalo según tus propias necesidades...
<form>
<div class="form-group"> <!-- Full Name -->
<label for="full_name_id" class="control-label">Full Name</label>
<input type="text" class="form-control" id="full_name_id" name="full_name" placeholder="John Deer">
</div>
<div class="form-group"> <!-- Street 1 -->
<label for="street1_id" class="control-label">Street Address 1</label>
<input type="text" class="form-control" id="street1_id" name="street1" placeholder="Street address, P.O. box, company name, c/o">
</div>
<div class="form-group"> <!-- Street 2 -->
<label for="street2_id" class="control-label">Street Address 2</label>
<input type="text" class="form-control" id="street2_id" name="street2" placeholder="Apartment, suite, unit, building, floor, etc.">
</div>
<div class="form-group"> <!-- City-->
<label for="city_id" class="control-label">City</label>
<input type="text" class="form-control" id="city_id" name="city" placeholder="Smallville">
</div>
<div class="form-group"> <!-- State Button -->
<label for="state_id" class="control-label">State</label>
<select class="form-control" id="state_id">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<div class="form-group"> <!-- Zip Code-->
<label for="zip_id" class="control-label">Zip Code</label>
<input type="text" class="form-control" id="zip_id" name="zip" placeholder="#####">
</div>
<div class="form-group"> <!-- Submit Button -->
<button type="submit" class="btn btn-primary">Buy!</button>
</div>
</form>
Formulario para tarjeta de crédito
Vamos a terminar esto de una forma útil, permitiendo a los visitantes que puedan insertar su número de tarjeta de crédito para pagar. Por favor, ten en cuenta que esta es sólo la interfaz HTML, los formularios para tarjetas de crédito necesitan la validación de un archivo en el backend.
<form action="#" class="credit-card-div">
<div class="panel panel-default" >
<div class="panel-heading">
<div class="row ">
<div class="col-md-12">
<input type="text" class="form-control" placeholder="Enter Card Number" />
</div>
</div>
<div class="row ">
<div class="col-md-3 col-sm-3 col-xs-3">
<span class="help-block text-muted small-font" > Expiry Month</span>
<input type="text" class="form-control" placeholder="MM" />
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<span class="help-block text-muted small-font" > Expiry Year</span>
<input type="text" class="form-control" placeholder="YY" />
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<span class="help-block text-muted small-font" > CCV</span>
<input type="text" class="form-control" placeholder="CCV" />
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img src="assets/img/1.png" class="img-rounded" />
</div>
</div>
<div class="row ">
<div class="col-md-12 pad-adjust">
<input type="text" class="form-control" placeholder="Name On The Card" />
</div>
</div>
<div class="row">
<div class="col-md-12 pad-adjust">
<div class="checkbox">
<label>
<input type="checkbox" checked class="text-muted"> Save details for fast payments <a href="#"> learn how ?</a>
</label>
</div>
</div>
</div>
<div class="row ">
<div class="col-md-6 col-sm-6 col-xs-6 pad-adjust">
<input type="submit" class="btn btn-danger" value="CANCEL" />
</div>
<div class="col-md-6 col-sm-6 col-xs-6 pad-adjust">
<input type="submit" class="btn btn-warning btn-block" value="PAY NOW" />
</div>
</div>
</div>
</div>
</form>
Y aquí tienes la parte del CSS
.credit-card-div span { padding-top:10px; }
.credit-card-div img { padding-top:30px; }
.credit-card-div .small-font { font-size:9px; }
.credit-card-div .pad-adjust { padding-top:10px; }
Si buscas más plantillas de formulario para Bootstrap o cosas más complejas (incluyendo CSS personalizado y JavaScript), échale un vistazo a esta página donde encontrarás más de 150 formularios para todo tipo de necesidades. ¡Una auténtica mina de oro!