Create a Bootstrap registration form

In this article you will learn how to create a Bootstrap registration form. Why twitter bootstrap? It is the best responsive website development framework. You can make responsive websites in no time with twitter bootstrap. Bootstrap uses HTML5 and JQuery. Once the bootstrap registration form completed would look as follows;

Setting up bootstrap environment

First step we need to download Twitter Bootstrap and extract it into a folder.

It is very easy, all what you need to do is to create a web page using the default template given in the Bootstrap site. You can use any HTML editor to create the HTML page such as Visual Studio Express edition.

Now your web page code will look as follows;

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Bootstrap 101 Template</title>
 <!-- Bootstrap -->
 <link href="CSS/bootstrap.min.CSS" rel="stylesheet">
 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
 <![endif]-->
</head>
<body>
 <h1>
 Hello, World</h1>
 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
 <script src="js/bootstrap.min.js"></script>
</body>
</html>

Once you open this page in the browser you will see a screen displaying Hello, World. Therefore you have to change the heading Hello, World into registration. To begin with using any Twitter Bootstrap controls, it is advisable to wrap the entire HTML code which is inside the body tag in a div with the CSS class “container”. This container keeps the layout centered and responsive in the browser.

Using Bootstrap Grid

Here, I use the Grid System of Bootstrap to build the layout. Grid layout inside the container will make the web page responsive.

Now add the code below into your page to build the basic layout grid.

<div class="container">
   <div class="row">
     <div class="col-md-6">
     </div>
   </div>
</div>

The reason to choose “col-md-6” is to make use 50% of page size to create registration form.

You can also get all the form controls and support given by bootstrap framework here in making a registration up form.

Usually, a Registration Form has a box around it. Now, we’re going to use bootstrap panels to create this box. Bootstrap panels consist of header, body and footer. We can locate all the registration controls in the body section and heading in the header section where footer can utilize for buttons. The following code shows the way to get this box around the registration form.

<div class="container">
 <div class="row">
 <div class="col-md-6">
   <div class="panel panel-default">
      <div class="panel-heading">
         <h4 class="panel-title">
               Heading here</h4>
      </div>
      <div class="panel-body">
             Body Controls here
      </div>
      <div class="panel-footer">
           Footer here</div>
   </div>
 </div>
 </div>
 </div>

Save and refresh the page, you will get the output which you can see below;

bootstrap-registration-form-container — Bootstrap Registration Form Container

Adding the “First Name” field of bootstrap registration form

Let’s add the form controls one by one to the bootstrap registration form. First, I’m going to add the First Name field. The First Name field can be added as follows using bootstrap html code;

<form class="form-horizontal">
  <div class="form-group">
     <label for="inputfirstname" class="col-md-4 control-label">
       First Name</label>
     <div class="col-md-8">
          <input type="text" class="form-control" id="inputfirstname" placeholder="Enter First Name..." />
     </div>
  </div>
</form>

The bootstrap CSS class, “form-horizontal” spreads form controls horizontally. The div tag with the CSS class, “form-group” wraps the input controls and the labels and keep them horizontally also it act as the form row. “col-md-4” determine the label width as well as class “col-md-8” set the width of the input text box. These bootstrap css classes will make sure the layout responsive or self adjust according to the device size.

bootstrap-registration-form-field-first-name — Adding the field “First Name” into Bootstrap Registration Form

Now we can add the other similar html controls into the bootstrap registration form. Lets add last name and screen name fields, you can add the following code into your web page.

<div class="form-group">
    <label for="inputlastname" class="col-md-4 control-label">
     Last Name</label>
    <div class="col-md-8">
       <input type="text" class="form-control" id="inputlastname" placeholder="Enter Last Name..." />
    </div>
</div>
<div class="form-group">
    <label for="inputscreenname" class="col-md-4 control-label">
      Screen Name</label>
    <div class="col-md-8">
         <input type="text" class="form-control" id="inputscreenname" placeholder="Enter Screen Name..." />
    </div>
</div>

Save the page. Refresh the browser to see the following output;

bootstrap-registration-form-field-first-last-screen-names — Adding the fields “Last Name and Screen Name” into Bootstrap Registration Form

Adding the field “Date of Birth (DOB)” to bootstrap registration form

Now, we need to add the field of Date of Birth. For DOB need to use three dropdown boxes to show Day, Month and Year. As you can see I have added another new bootstrap row in side the “col-md-8” class box, that is to retain three drop downboxes in the same line as well as to get adjust properly in the smaller devices. This process is know as nesting html controls in the bootstrap grid. The following code will help you in doing it;

<div class="form-group">
    <label for="inputdateofbirth" class="col-md-4 control-label"> Date of Birth</label>
    <div class="col-md-8">
      <div class="row">
        <div class="col-md-5">

          <select class="form-control" name="">
             <option value="">January</option>
             <option value="">February</option>
             <option value="">March</option>
             <option value="">April</option>
             <option selected value="">May</option>
          </select>
        </div>
        <div class="col-md-3">
            <select name="" class="form-control">
                 <option value="">1</option>
                 <option value="">2</option>
                 <option value="">3</option>
                 <option value="">4</option>
                 <option selected value="">5</option>
             </select>
        </div>
        <div class="col-md-4">
            <select name="" class="form-control">
                <option value="">1980</option>
                <option value="">1981</option>
                <option value="">1982</option>
                <option value="">1983</option>
                <option value="">1984</option>
                <option selected value="">1985</option>
            </select>
        </div>
     </div>
   </div>
 </div>

Refresh the page and get the following output.

bootstrap-registration-form-field-DOB — Adding the field Date of Birth (DOB) into Bootstrap Registration Form

Adding the field “Gender”

Then comes the Gender field. To crate gender selection we are using radio button group, that is two radio buttons are group with their name attribute. You can group radio buttons by giving the same name attribute to both controls. The advantage will be only one will be checked at a given time. Other thing you need to note here is the role of the label wrap, since radio button doesn’t include a label property need to wrap with a html label control show the description. Include the following code snippet to add the Gender field into your page.

<div class="form-group">
     <label for="inputgender" class="col-md-4">
        Gender</label>
     <div class="col-md-8 ">
       <label>
          <input type="radio" name="gender">
             Male
          </label>
       <label>
          <input type="radio" name="gender">
          Female
       </label>
     </div>
 </div>

Following is the output that you will get after refreshing the page.

bootstrap-registration-form-field-Gender img-responsive — Adding the field Gender into Bootstrap Registration Form

Adding the field “Country”

Now it’s time to add the Country field. You can go ahead with the following code.

<div class="form-group">
     <label for="inputUsername" class="col-md-4">
          Country</label>
      <div class="col-md-8">
          <select name="" class="form-control">
              <option value="">Australia</option>
              <option value="">Canada</option>
              <option value="">United Kingdom</option>
              <option selected value="">USA</option>
          </select>
      </div>
 </div>

Refresh the page to get the following result.

bootstrap-registration-form-field-Country — Adding the field Country into Bootstrap Registration Form

Adding the fields “E-mail and Phone”

Now you can add the fields E-mail and Phone same as the way you added First name, Last name and Screen name fields.

<div class="form-group">
     <label for="inputemail" class="col-md-4">
        E-mail</label>
     <div class="col-md-8">
          <input type="text" class="form-control" id="inputemail" placeholder="Enter E-mail......"></input>
     </div>
</div>
<div class="form-group">
     <label for="inputphone" class="col-md-4">
         Phone</label>
     <div class="col-md-8">
       <input type="text" class="form-control" id="inputphone" placeholder="Enter Phone......"></input>
     </div>
</div>

Now refresh the page to see the result.

bootstrap-registration-form-field-first-email-phone — Adding the fields E-mail and Phone into Bootstrap Registration Form

Adding the fields “Password and Confirm Password”

Now it’s time to include the fields Password and Confirm Password. The following code will help you in this.

<div class="form-group">
     <label for="inputpassword" class="col-md-4">
        Password</label>
     <div class="col-md-8">
        <input type="password" name="" class="form-control" value="">
     </div>
</div>
<div class="form-group">
     <label for="inputconfirmpassword" class="col-md-4">
       Confirm Password</label>
     <div class="col-md-8">
         <input type="password" name="" class="form-control" value="">
     </div>
</div>

Now look at the form with new fields once you refresh it.

bootstrap-registration-form-field-Password-ConfirmPassword — Adding the fields Password and Conform Password into Bootstrap Registration Form

Adding a agree terms “Check Box”

Now, we need to add a check box that says I agree to the Terms of Use. You can do this with the following code snippet;

   <div class="col-md-8">
        <div class="checkbox">
          <label>
             I agree to the Terms of Use
             <input type="checkbox">
          </label>
        </div>
    </div>
 </div>

bootstrap-registration-form-check-box — Adding a Check Box into Bootstrap Registration Form

Adding the “Submit Button”

Now the last thing to include in the form is the Submit button. You can use the following code snippet and place it in the footer section;

<div class="form-group">
     <div class="col-md-8">
         <input type="submit" name="submit" value="submit" class="btn btn-default">
     </div>
 </div>

Custom Styling Bootstrap Registration form

Your Bootstrap Registration Form is ready now. Now you can add bit of style to make it look like the figure one shown above. You can use bootstrap button classes to add some color to button by adding “btn-success” class to submit button and “btn-primary” class to cancel button.

Add a style class call signup at the top where the “panel panel-default” classes. Now in the header section define a style tag as follows

<style type="text/css">
</style>

Now you can add body color and border color to registration form as follows;

<style type="text/css">
.signup{background-color: #222535; border-color: #DD8705;}

</style>

Now save and refresh the page, output will look as follows;

You can add custom styles to label text as follows;

.signup .panel-body label
 {
 color: #FDFD2E;
 font-weight: normal;
 }

above style class will give a nice yellow color to the text and font will be bold. Now we can change the color settings of heading section using below styles;

.signup .panel-heading
 {
 background-color: #DD8705;
 color: #FDFD2E;
 }

Above styles will add nice orange color to the heading background and text color will be yellow. Save and refresh the browser you will get following;

Now we can add styles to the footer section as follows;

.signup .panel-footer
 {
 background-color: #DD8705;
 }
 .btn-submit{margin-right:5px;}

Your complete Bootstrap registration form will look as follows;

Check live demo

3 Comments

Join the discussion and tell us your opinion.

Luana Taylorreply

Saturday at 01:05 AM

for some reason i did exactly what you have and it didnt come out like how it should. like how it is shown. can someone tell me what I hve done wrong.

WebHelperreply

Saturday at 08:06 AM

– In reply to: Luana Taylor

Luauna, sorry for the delay of reply can you share your code. can solve the issue

My form did not come out like how it is shown. where did i go wrong