/ Web Dev Zone
Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

5 Ready-to-Use Bootstrap Form Templates for Your Projects

DZone's Guide to

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!

by
·
Mar. 23, 16 · Web Dev Zone ·
Free Resource

Comment (1)

Save
Tweet
{{ articles[0].views | formatCount}} Views

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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! 

Vertical Login Form

Here's a very basic form template that can be easily enhanced and modified to suit almost any need. Use it as a starting point for almost any kind of simple forms, such as login forms, contact forms, 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>

→ Source: W3 Schools

Inline Login Form

Inline forms are widespread, especially when it comes to login forms. Look at the code below. Notice any change from the previous form? In fact, the single difference between this code and the previous one is the .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

Contact forms are probably the most popular forms ever, as nearly every website features at least one. Here’s a quality template for all your contact form needs, plus a little CSS to make it look better. Also, note that this example makes an interesting usage of Bootstrap’s 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>

Associated CSS:

.header {
 color: #36A0FF;
 font-size: 27px;
 padding: 10px;
}

.bigicon {
 font-size: 35px;
 color: #36A0FF;
}

→ Source: PreBootstrap

Address Form

Here is a pretty complete form, featuring basically everything you need to collect a postal address from a (US) customer. Use it as it is or customize it as needed! 
<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

Let’s finish this round-up with another useful form, allowing visitors to communicate their credit card number. Please keep in mind that this is only the HTML interface, credit card forms need serious back-end validation. 
<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?

If you’re looking for more Bootstrap form templates, or more complete stuff (including custom CSS and JavaScript) then make sure to have a look at  this page where 150+ forms for all needs can be downloaded. It's a gold mine!

Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.

Like This Article? Read More From DZone

Working With Angular Template Forms
Displaying Code in WordPress: Tools, Plugins, and Best Practices
Custom Validators in Template Driven Angular 2 Forms

Free DZone Refcard

Node.js
DOWNLOAD
Topics:
web developement ,form builder ,templates ,bootstrap

Comment (1)

Save
Tweet
{{ articles[0].views | formatCount}} Views

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

Web Dev Partner Resources

Strategies for Improving Your Debugging Workflow
Integrate Feature Flags in Angular
Remove Guesswork and Save Time Prioritizing Your Workflow
App-centric Monitoring Alternatives to New Relic
How Instacart Improves User Experiences and Reduces Mean-Time-to-Resolve (MTTR)
Adopt Continuous Delivery Without Harming End Users
From Design to Code: Indigo.Design’s Unified Platform for Sketch and Angular Teams
Customer Success Strategy: Using Bugsnag for Proactive Customer Support
A Brief Overview of Indigo.Design, an End-to-End Design and Development Platform
Top 10 JavaScript Errors and How to Avoid Them
Test in Production (the Netflix Way)
Angular Essentials eBook: Provides Step-by-Step Guidance to Angular

Web Dev Partner Resources

Strategies for Improving Your Debugging Workflow
Integrate Feature Flags in Angular
Remove Guesswork and Save Time Prioritizing Your Workflow
App-centric Monitoring Alternatives to New Relic

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.linkDescription }}

{{ parent.urlSource.name }}
by {{ parent.authors[0].realName || parent.author}}
· {{ parent.articleDate | date:'MMM. dd, yyyy' }} {{ parent.linkDate | date:'MMM. dd, yyyy' }}
· {{ parent.portal.name }} Zone