The registration / Create account form and Bootstrap
In other tutorials of Bootstrap series, I showed how you may create Bootstrap based forms by using built-in classes.
The demos included simple form along with custom CSS to style with your own color scheme. I also used icon classes in the form control in demos.
In this tutorial, I am going to show you creating simple and free registration or account creation forms, that you may easily integrate with the scripts like PHP, JSP, ASP.net, etc. to save information into databases.
A free Bootstrap registration form – Theme 1
This “Register / Create Account” form is created by using the “Lato” font that can be referenced from Google fonts. The form contains Name, email, desired user name, password, and confirm password fields.
The green theme is used for this form.
Complete code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style>
body, html{
height: 100%;
background-repeat: no-repeat;
background-color: #d3d3d3;
font-family: 'Lato', Verdana;
}
.main{
margin-top: 70px;
}
.form-group{
margin-bottom: 15px;
}
input,
input::-webkit-input-placeholder {
font-size: 11px;
padding-top: 3px;
}
.main-login{
background-color: #E1FFE1;
/* shadows and rounded borders */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
label{
margin-bottom: 15px;
font-size:18px;
}
.main-center{
margin-top: 30px;
margin: 0 auto;
max-width: 330px;
padding: 40px 40px;
}
.login-button{
margin-top: 5px;
}
.login-register{
font-size: 12px;
text-align: center;
text-decoration:underline;
color:#5CB85C;
font-weight:bold;
}
.iconbk{
background-color:#5CB85C;
}
</style>
</head>
<body>
<div class="container">
<div class="row main">
<div class="panel-heading">
<div class="panel-title text-center">
<h1 class="title">Create Account</h1>
<hr />
</div>
</div>
<div class="main-login main-center">
<form class="form-horizontal" method="post" action="#">
<div class="form-group">
<label for="name" class="cols-sm-2 control-label">Name:</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon iconbk"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="name" id="name" placeholder="Enter your Name here"/>
</div>
</div>
</div>
<div class="form-group">
<label for="email" class="cols-sm-2 control-label">Email:</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon iconbk"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="email" id="email" placeholder="Enter your Email here"/>
</div>
</div>
</div>
<div class="form-group">
<label for="username" class="cols-sm-2 control-label">Username:</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon iconbk"><i class="fa fa-users fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="username" id="username" placeholder="Desired Username"/>
</div>
</div>
</div>
<div class="form-group">
<label for="password" class="cols-sm-2 control-label">Password:</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon iconbk"><i class="fa fa-lock fa-lg " aria-hidden="true"></i></span>
<input type="password" class="form-control" name="password" id="password" placeholder="Password: Must be 8 char long"/>
</div>
</div>
</div>
<div class="form-group">
<label for="confirm" class="cols-sm-2 control-label">Re-enter Password:</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon iconbk"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
<input type="password" class="form-control" name="confirm" id="confirm" placeholder="Confirm Password"/>
</div>
</div>
</div>
<div class="form-group ">
<button type="button" class="btn btn-success btn-lg btn-block login-button">Create Account</button>
</div>
<div class="login-register">
<a href=" ">Already have an account?</a>
</div>
</form>
</div>
</div>
</div>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
You have to include the references of Bootstrap CSS and JS files. Along with this, font-awesome.min.css is also included which icons are used with form controls.
The reddish theme of the account registration form
This theme is designed with a reddish theme that uses different icons for form controls than the above theme like user name, name, email, and password.
HTML and CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style>
body, html{
height: 100%;
background-repeat: no-repeat;
background-color: #d3d3d3;
font-family: 'Lato', Verdana;
}
.main{
margin-top: 70px;
}
.form-group{
margin-bottom: 15px;
}
input,
input::-webkit-input-placeholder {
font-size: 11px;
padding-top: 3px;
}
.main-login{
background-color: #F4CFCE;
/* shadows and rounded borders */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
label{
margin-bottom: 15px;
font-size:18px;
}
.main-center{
margin-top: 30px;
margin: 0 auto;
max-width: 330px;
padding: 40px 40px;
}
.login-button{
margin-top: 5px;
}
.login-register{
font-size: 12px;
text-align: center;
text-decoration:underline;
color:#5CB85C;
font-weight:bold;
}
.iconbk{
background-color:#D9534F;
}
</style>
</head>
<body>
<div class="container">
<div class="row main">
<div class="panel-heading">
<div class="panel-title text-center">
<h1 class="title">Create Account</h1>
<hr />
</div>
</div>
<div class="main-login main-center">
<form class="form-horizontal" method="post" action="#">
<div class="form-group">
<label for="name" class="cols-sm-2 control-label">Name:</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon iconbk"><i class="fa fa-user-plus fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="name" id="name" placeholder="Enter your Name here"/>
</div>
</div>
</div>
<div class="form-group">
<label for="email" class="cols-sm-2 control-label">Email:</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon iconbk"><i class="fa fa-envelope-o fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="email" id="email" placeholder="Enter your Email here"/>
</div>
</div>
</div>
<div class="form-group">
<label for="username" class="cols-sm-2 control-label">Username:</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon iconbk"><i class="fa fa-user-secret fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="username" id="username" placeholder="Desired Username"/>
</div>
</div>
</div>
<div class="form-group">
<label for="password" class="cols-sm-2 control-label">Password:</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon iconbk"><i class="fa fa-lock fa-lock " aria-hidden="true"></i></span>
<input type="password" class="form-control" name="password" id="password" placeholder="Password: Must be 8 char long"/>
</div>
</div>
</div>
<div class="form-group">
<label for="confirm" class="cols-sm-2 control-label">Re-enter Password:</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon iconbk"><i class="fa fa-lock fa-lock" aria-hidden="true"></i></span>
<input type="password" class="form-control" name="confirm" id="confirm" placeholder="Confirm Password"/>
</div>
</div>
</div>
<div class="form-group ">
<button type="button" class="btn btn-danger btn-lg btn-block login-button">Create Account</button>
</div>
<div class="login-register">
<a href="#">Already have an account?</a>
</div>
</form>
</div>
</div>
</div>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
The Bootstrap blue form
The blue form is given the btn-info Bootstrap built-in class for the button. While form controls are also given some bluish shades along with background and icon colors.
The code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Raleway:300,500' rel='stylesheet' type='text/css'>
<style>
body, html{
height: 100%;
background-repeat: no-repeat;
background-color: #d3d3d3;
font-family: 'Raleway', Verdana;
}
.main{
margin-top: 70px;
}
.form-group{
margin-bottom: 15px;
}
input,
input::-webkit-input-placeholder {
font-size: 11px;
padding-top: 3px;
}
.main-login{
background-color: #1C728A;
/* shadows and rounded borders */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
label{
margin-bottom: 15px;
font-size:18px;
color: #fff;
}
.main-center{
margin-top: 30px;
margin: 0 auto;
max-width: 330px;
padding: 40px 40px;
}
.login-button{
margin-top: 5px;
}
.iconbk{
background-color:#5BC0DE;
}
.formcontrolcls {
padding: 9px;
border: solid 1px #4B718B;
outline: 0;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #9DDAEC), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #9DDAEC 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="row main">
<div class="panel-heading">
<div class="panel-title text-center">
<h1 class="title">Create Account</h1>
<hr />
</div>
</div>
<div class="main-login main-center">
<form class="form-horizontal" method="post" action="#">
<div class="form-group">
<label for="name" class="cols-sm-2 control-label">Name:</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon iconbk"><i class="fa fa-user-plus fa" aria-hidden="true"></i></span>
<input type="text" class="form-control formcontrolcls" name="name" id="name" placeholder="Enter your Name here"/>
</div>
</div>
</div>
<div class="form-group">
<label for="email" class="cols-sm-2 control-label">Email:</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon iconbk"><i class="fa fa-envelope-o fa" aria-hidden="true"></i></span>
<input type="text" class="form-control formcontrolcls" name="email" id="email" placeholder="Enter your Email here"/>
</div>
</div>
</div>
<div class="form-group">
<label for="username" class="cols-sm-2 control-label">Username:</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon iconbk"><i class="fa fa-user-secret fa" aria-hidden="true"></i></span>
<input type="text" class="form-control formcontrolcls" name="username" id="username" placeholder="Desired Username"/>
</div>
</div>
</div>
<div class="form-group">
<label for="password" class="cols-sm-2 control-label">Password:</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon iconbk"><i class="fa fa-lock fa-lock " aria-hidden="true"></i></span>
<input type="password" class="form-control formcontrolcls" name="password" id="password" placeholder="Password: Must be 8 char long"/>
</div>
</div>
</div>
<div class="form-group">
<label for="confirm" class="cols-sm-2 control-label">Re-enter Password:</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon iconbk"><i class="fa fa-lock fa-lock" aria-hidden="true"></i></span>
<input type="password" class="form-control formcontrolcls" name="confirm" id="confirm" placeholder="Confirm Password"/>
</div>
</div>
</div>
<div class="form-group ">
<button type="button" class="btn btn-info btn-lg btn-block login-button">Create Account</button>
</div>
</form>
</div>
</div>
</div>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
For the form controls colors, a separate class is created in the <style> section, .formcontrolcls, where the linear background is used for each control while the font used is “Raleway” which is also available from Google fonts.