5 Ready-to-Use Bootstrap Form Templates for Your Projects
Bootstrap is the most popular and probably the most complete front-end web framework, which allows developers to fasten the creation of a website or web app. In this article, I have compiled 5 ready-to-use web forms for your Bootstrap projects. It’s time to save some time!
Join the DZone community and get the full member experience.
Join For FreeBootstrap is the most popular and probably the most complete front-end web framework, which allows developers to fasten the creation of a website or web app. In this article, I have compiled 5 ready-to-use web forms for your Bootstrap projects. It’s time to save some time!
Vertical Login Form
<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>
→ Source: W3 Schools
Inline Login Form
.form-inline
class added to the form
HTML element.<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>
→ Source: W3 Schools
Contact Form
<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>
Associated CSS:
.header {
color: #36A0FF;
font-size: 27px;
padding: 10px;
}
.bigicon {
font-size: 35px;
color: #36A0FF;
}
→ Source: PreBootstrap
Address Form
<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>
→ Source: Formden.com
Credit Card Form
<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>
Associated CSS code:
<style>
.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; }
</style>
→ Source: Design Bootstrap
Want More?
Published at DZone with permission of Jean-Baptiste Jung, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments