Create Registration Form Easily with Twitter Bootstrap in Minutes

This tutorial will guide you how to use Twitter Bootstrap to create a registration form in Minutes. Those who don’t know what Twitter Bootstrap is? I would define it as a complete package for powerful front-end development. It is a framework for faster and easier web development. It has already gained popularity among web developers, if you haven’t tried it yet then follow this simple tutorial and feel the power of this cool framework.

LIVE DEMO DOWNLOAD

We will create an ajax based registration page which can be used in websites for user’s sign up. The form is with complete validation and hence can be directly used in any web application. Let’s start our simple tutorial:

Twitter Bootstrap framework takes care of css and javascript. There are predefined classes and you need to use those classes in your code, css written for those classes would be automatically called. Here is a brief guideline about creating forms and form elements using Twitter Bootstrap.

Download Twitter Bootstrap from HERE. Unzip the file in your machine. Lets start with creating our signup page.

NOTE: Never forget to include <!DOCTYPE html> at the beginning of your document.

First you need to include all the necessary files for styling and validation of your form. So include all necessary css and js files in your document. Twittter bootstrap gives you “bootstrap.css” and the path of the file is “twitter-bootstrap\twitter-bootstrap-v2\docs\assets\css\bootstrap.css”.

<link href="twitter-bootstrap-v2\docs\assets\css\bootstrap.css" rel="stylesheet"></em>

<em><link href="twitter-bootstrap-v2\docs\assets\css\bootstrap-responsive.css" rel="stylesheet">

Remember you can directly link to the hosted files on GitHub.

A simple block of code that you can use to add as many form elements based on your requirement is below:

Code between body tag is:

  <body>

 	    <div class="container">
<legend>Sign Up</legend>
<div class="well">
      <form id="signup" class="form-horizontal" method="post" action="success.php">
		<legend>Sign Up</legend>
		<div class="control-group">
	        <label class="control-label">First Name</label>
			<div class="controls">
			    <div class="input-prepend">
				<span class="add-on"><i class="icon-user"></i></span>
					<input type="text" class="input-xlarge" id="fname" name="fname" placeholder="First Name">
				</div>
			</div>
		</div>
		<div class="control-group ">
	        <label class="control-label">Last Name</label>
			<div class="controls">
			    <div class="input-prepend">
				<span class="add-on"><i class="icon-user"></i></span>
					<input type="text" class="input-xlarge" id="lname" name="lname" placeholder="Last Name">
				</div>
			</div>
		</div>
		<div class="control-group">
	        <label class="control-label">Email</label>
			<div class="controls">
			    <div class="input-prepend">
				<span class="add-on"><i class="icon-envelope"></i></span>
					<input type="text" class="input-xlarge" id="email" name="email" placeholder="Email">
				</div>
			</div>
		</div>
		<div class="control-group">
	        <label class="control-label">Gender</label>
			<div class="controls">

					<p><div id="gender" name="gender" class="btn-group" data-toggle="buttons-radio">
                    <button type="button" class="btn btn-info">Male</button>
                    <button type="button" class="btn btn-info">Female</button>

                  </div></p>

			</div>
		</div>
		<div class="control-group">
	        <label class="control-label">Password</label>
			<div class="controls">
			    <div class="input-prepend">
				<span class="add-on"><i class="icon-lock"></i></span>
					<input type="Password" id="passwd" class="input-xlarge" name="passwd" placeholder="Password">
				</div>
			</div>
		</div>
		<div class="control-group">
	        <label class="control-label">Confirm Password</label>
			<div class="controls">
			    <div class="input-prepend">
				<span class="add-on"><i class="icon-lock"></i></span>
					<input type="Password" id="conpasswd" class="input-xlarge" name="conpasswd" placeholder="Re-enter Password">
				</div>
			</div>
		</div>

		<div class="control-group">
		<label class="control-label"></label>
	      <div class="controls">
	       <button type="submit" class="btn btn-success" >Create My Account</button>

	      </div>

	</div>

	  </form>

   </div>
</div>

Now what with validation? We will place all our javascript code at the bottom to ensure our page loads faster. First include all necessary javascript files. I have used jquery.js, bootstrap-button.js and validate.js files. Out of these three files only ‘bootstrap-button.js’ comes in bootstrap package.

So here is your javascript code:

 <script type="text/javascript">
$(document).ready(function(){

$("#signup").validate({
rules:{
fname:"required",
lname:"required",
email:{
required:true,
email: true
},
passwd:{
required:true,
minlength: 8
},
conpasswd:{
required:true,
equalTo: "#passwd"
},
gender:"required"
},

errorClass: "help-inline"

});
});
</script>

The registration page coded with BootStrap is flexible and you can create another such pages like login form, comment form etc in minutes. Share this article to help other beginner developers.

16 thoughts on “Create Registration Form Easily with Twitter Bootstrap in Minutes”

  1. Hi,
    Thanks for your nice article.
    i came by searching “bootstrap btn-group validation” here, saw your nice registration form.
    I’ve only one question, help me.
    How can i add “required” validation in “Gender”(in your form) btn-group,such that user must select one but can’t leave blank?

    Thanks again.

  2. Hi sanjeev, I am glad to see these helpful posts. Really, i like the smart work done as implementing this normally is very time consuming. Thanks alot for sharing and it will be very nice of you if you start providing freebies… 🙂 . Get the smart work rolling!!!

  3. hi sanjeev the validations on the form are not working.how can i perform validations
    here is my code and thanks in advance

    Sign Up

    First Name

    Last Name

    Email

    Gender

    Male
    Female

    Password

    Confirm Password

    Create My Account

    var btns = [‘btn-one’, ‘btn-two’];
    var input = document.getElementById(‘btn-input’);
    for(var i = 0; i < btns.length; i++) {
    document.getElementById(btns[i]).addEventListener('click', function() {
    input.value = this.value;

    });
    }

    $(document).ready(function(){

    $(“#signup”).validate({
    rules:{
    fname:”required”,
    lname:”required”,
    email:{
    required:true,
    email: true
    },
    passwd:{
    required:true,
    minlength: 8
    },
    conpasswd:{
    required:true,
    equalTo: “#passwd”
    },
    gender:”required”
    },

    errorClass: “help-inline”

    });
    });

  4. Pingback: A shorthand for Bootstrap-friendly controls in an MVC registration form | SpiegelSoft Blog

  5. Hi , I Am beginner to bootstrap.So I Just download the bootstrap registration from this site and run into localhost . It does not works properly like the live demo page .please help any one. Thanks in advance

  6. What am I missing? Do I need to create a ‘success.php’ file?

    Submit isn’t working. Have added validate.min.js and both sets of code above. Thanks in advance.

  7. if u wanna subit it into a databbase ,you need to write the code behind in php. This is just for the client side only

  8. Pingback: Why You Need to Start Using Twitter Bootstrap

  9. Pingback: Easily Create Contact Form Using Twitter Bootstrap - InfoTuts

  10. I want to create an application which allows the user to create dynamic insurance forms, having fields like label,textbox,textarea,date,dropdown etc & styles like underline,font, size etc. After user creates these forms they will be launched from web application
    i want to use bootstrap form builder for this can you help me in this.

    Thanks
    Dev

Comments are closed.