- One account for five websites!
- Free access to Premium Codes
- Acess to cool web tools
- Ask and answer questions
- Stay ahead of other web developers
- and MUCH MORE!
Sign up
Sign in
Home
How to use
Sitemap
About Us
Suggested
Privacy Policy
Previous Code
If you like to have a well-designed website to interest audiences, look at this post and apply it to your page. The Collapsible Forms with Gradient Background using Bootstrap is presented with a beautiful design and can attract many new visitors. This HTML Forms Code allows you to gather different types of information from the users of your website regularly. These Bootstrap Forms with Gradient have a great performance and are so functional.
As you can see in the preview, the background of these Collapse Form Codes is blue. The left side is lighter, and the right side is darker. The title of this Bootstrap is placed in a white field, and the writing is black. You see six parts in this code related to a specific section. These sections are shown with numbers. If you click on each field, the detailed needed information will appear on a white page. After filling in all blanks, you have to click on the “Next” option and move to the second field. If you want to close the selected part, you should click on it again. This Free CSS Form is available with a great performance and appearance.
#
HTML Forms Code
#
Bootstrap Forms with Gradient
#
Collapse Form Codes
#
Free CSS Form
<!-- This script got from frontendfreecode.com -->
<div class="container imi-joingform">
<!-- Start Header -->
<div class="imc-jfheader">
<div class="row">
<div class="col-lg-6">
<div class="imc-logo">
<h3>Collapse Steps Form</h3>
</div>
</div>
<div class="col-lg-6 text-right">
<div class="imc-text">
<h2>
Last Visited on <span id="dateandtime"> 08-May-2021 12:01 PM </span> | My Profile | <span id="logstatus"> <a href="#">Logout </a> </span>
</h2>
</div>
</div>
</div>
</div>
<!-- End Header -->
<!-- Start Joining Form -->
<!-- Start row -->
<div class="row">
<div class="col-md-12">
<!-- Start accordion -->
<div id="accordion" class="">
<!-- Start First collapse -->
<div class="panel checkout-step">
<div role="tab" id="headingOne" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<div class="row">
<div class="col-10 col-lg-10">
<span class="checkout-step-number">1</span>
<h4 class="checkout-step-title"><a role="button"> Personal Details</a></h4>
</div>
<div class="col-2 col-lg-2 text-right d-none d-sm-block d-md-block d-lg-block d-xl-block">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn">Edit <i class="fa fa-edit"></i></button>
</div>
<div class="col-2 col-lg-2 text-right d-md-none d-lg-none">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn"><i class="fa fa-edit"></i></button>
</div>
</div>
</div>
<div id="collapseOne" class="collapse in">
<!-- Start collapse body -->
<div class="checkout-step-body">
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">First Name</label>
<input id="name" name="name" type="text" placeholder="First Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Middle Name</label>
<input id="name" name="name" type="text" placeholder="Middle Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Last Name</label>
<input id="name" name="name" type="text" placeholder="Last Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Mobile No</label>
<input id="name" name="name" type="text" placeholder="+91" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Email Id</label>
<input id="name" name="name" type="text" placeholder="Email Id" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Address</label>
<input id="name" name="name" type="text" placeholder="Address" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start button row -->
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4 text-right">
<div class="form-group">
<div class="col-md-12">
<button id="nextBtn" name="nextBtn" class="btn btn-primary">Next</button>
</div>
</div>
</div>
</div>
<!-- End button row -->
</div>
<!-- End collapse body -->
</div>
</div>
<!-- End First collapse -->
<!-- Start Second collapse -->
<div class="panel checkout-step">
<div role="tab" id="headingTwo" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<div class="row">
<div class="col-10 col-lg-10">
<span class="checkout-step-number">2</span>
<h4 class="checkout-step-title"><a role="button"> Professional Details</a></h4>
</div>
<div class="col-2 col-lg-2 text-right d-none d-sm-block d-md-block d-lg-block d-xl-block">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn">Edit <i class="fa fa-edit"></i></button>
</div>
<div class="col-2 col-lg-2 text-right d-md-none d-lg-none">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn"><i class="fa fa-edit"></i></button>
</div>
</div>
</div>
<div id="collapseTwo" class="collapse">
<!-- Start collapse body -->
<div class="checkout-step-body">
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">First Name</label>
<input id="name" name="name" type="text" placeholder="First Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Middle Name</label>
<input id="name" name="name" type="text" placeholder="Middle Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Last Name</label>
<input id="name" name="name" type="text" placeholder="Last Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Mobile No</label>
<input id="name" name="name" type="text" placeholder="+91" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Email Id</label>
<input id="name" name="name" type="text" placeholder="Email Id" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Address</label>
<input id="name" name="name" type="text" placeholder="Address" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start button row -->
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4 text-right">
<div class="form-group">
<div class="col-md-12">
<button id="nextBtn" name="nextBtn" class="btn btn-primary">Next</button>
</div>
</div>
</div>
</div>
<!-- End button row -->
</div>
<!-- End collapse body -->
</div>
</div>
<!-- End Second collapse -->
<!-- Start Third collapse -->
<div class="panel checkout-step">
<div role="tab" id="headingThree" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<div class="row">
<div class="col-10 col-lg-10">
<span class="checkout-step-number">3</span>
<h4 class="checkout-step-title"><a role="button"> Educational Details</a></h4>
</div>
<div class="col-2 col-lg-2 text-right d-none d-sm-block d-md-block d-lg-block d-xl-block">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn">Edit <i class="fa fa-edit"></i></button>
</div>
<div class="col-2 col-lg-2 text-right d-md-none d-lg-none">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn"><i class="fa fa-edit"></i></button>
</div>
</div>
</div>
<div id="collapseThree" class="collapse">
<!-- Start collapse body -->
<div class="checkout-step-body">
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">First Name</label>
<input id="name" name="name" type="text" placeholder="First Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Middle Name</label>
<input id="name" name="name" type="text" placeholder="Middle Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Last Name</label>
<input id="name" name="name" type="text" placeholder="Last Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Mobile No</label>
<input id="name" name="name" type="text" placeholder="+91" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Email Id</label>
<input id="name" name="name" type="text" placeholder="Email Id" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Address</label>
<input id="name" name="name" type="text" placeholder="Address" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start button row -->
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4 text-right">
<div class="form-group">
<div class="col-md-12">
<button id="nextBtn" name="nextBtn" class="btn btn-primary">Next</button>
</div>
</div>
</div>
</div>
<!-- End button row -->
</div>
<!-- End collapse body -->
</div>
</div>
<!-- End Third collapse -->
<!-- Start Fourth collapse -->
<div class="panel checkout-step">
<div role="tab" id="headingFour" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
<div class="row">
<div class="col-10 col-lg-10">
<span class="checkout-step-number">4</span>
<h4 class="checkout-step-title"><a role="button"> Nominee Details</a></h4>
</div>
<div class="col-2 col-lg-2 text-right d-none d-sm-block d-md-block d-lg-block d-xl-block">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn">Edit <i class="fa fa-edit"></i></button>
</div>
<div class="col-2 col-lg-2 text-right d-md-none d-lg-none">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn"><i class="fa fa-edit"></i></button>
</div>
</div>
</div>
<div id="collapseFour" class="collapse">
<!-- Start collapse body -->
<div class="checkout-step-body">
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">First Name</label>
<input id="name" name="name" type="text" placeholder="First Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Middle Name</label>
<input id="name" name="name" type="text" placeholder="Middle Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Last Name</label>
<input id="name" name="name" type="text" placeholder="Last Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Mobile No</label>
<input id="name" name="name" type="text" placeholder="+91" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Email Id</label>
<input id="name" name="name" type="text" placeholder="Email Id" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Address</label>
<input id="name" name="name" type="text" placeholder="Address" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start button row -->
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4 text-right">
<div class="form-group">
<div class="col-md-12">
<button id="nextBtn" name="nextBtn" class="btn btn-primary">Next</button>
</div>
</div>
</div>
</div>
<!-- End button row -->
</div>
<!-- End collapse body -->
</div>
</div>
<!-- End Fourth collapse -->
<!-- Start Five collapse -->
<div class="panel checkout-step">
<div role="tab" id="headingFive" data-toggle="collapse" data-parent="#accordion" href="#collapseFive">
<div class="row">
<div class="col-10 col-lg-10">
<span class="checkout-step-number">5</span>
<h4 class="checkout-step-title"><a role="button"> Documents Details</a></h4>
</div>
<div class="col-2 col-lg-2 text-right d-none d-sm-block d-md-block d-lg-block d-xl-block">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn">Edit <i class="fa fa-edit"></i></button>
</div>
<div class="col-2 col-lg-2 text-right d-md-none d-lg-none">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn"><i class="fa fa-edit"></i></button>
</div>
</div>
</div>
<div id="collapseFive" class="collapse">
<!-- Start collapse body -->
<div class="checkout-step-body">
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">First Name</label>
<input id="name" name="name" type="text" placeholder="First Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Middle Name</label>
<input id="name" name="name" type="text" placeholder="Middle Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Last Name</label>
<input id="name" name="name" type="text" placeholder="Last Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Mobile No</label>
<input id="name" name="name" type="text" placeholder="+91" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Email Id</label>
<input id="name" name="name" type="text" placeholder="Email Id" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Address</label>
<input id="name" name="name" type="text" placeholder="Address" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start button row -->
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4 text-right">
<div class="form-group">
<div class="col-md-12">
<button id="nextBtn" name="nextBtn" class="btn btn-primary">Next</button>
</div>
</div>
</div>
</div>
<!-- End button row -->
</div>
<!-- End collapse body -->
</div>
</div>
<!-- End Five collapse -->
<!-- Start Six collapse -->
<div class="panel checkout-step">
<div role="tab" id="headingSix" data-toggle="collapse" data-parent="#accordion" href="#collapseSix">
<div class="row">
<div class="col-10 col-lg-10">
<span class="checkout-step-number">6</span>
<h4 class="checkout-step-title"><a role="button"> Reviews </a></h4>
</div>
</div>
</div>
<div id="collapseSix" class="collapse">
<!-- Start collapse body -->
<div class="checkout-step-body">
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name"><strong>Name : </strong></label>
<label class="control-label" for="name">test</label>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name"><strong>Gender : </strong></label>
<label class="control-label" for="name">Male</label>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name"><strong>Mobile : </strong></label>
<label class="control-label" for="name">111111111</label>
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name"><strong>Email : </strong></label>
<label class="control-label" for="name">info@example.com</label>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name"><strong>Address : </strong></label>
<label class="control-label" for="name">test </label>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class=""></div>
</div>
</div>
<!-- End row -->
<!-- Start button row -->
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4 text-right">
<div class="form-group">
<div class="col-md-12">
<button id="nextBtn" name="nextBtn" class="btn btn-primary">Print</button>
</div>
</div>
</div>
</div>
<!-- End button row -->
</div>
<!-- End collapse body -->
</div>
</div>
<!-- End Six collapse -->
</div>
<!-- End accordion -->
</div>
</div>
<!-- End row -->
<!-- End Joining Form -->
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
body {
background: #7f7fd5; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #91eae4, #86a8e7, #7f7fd5); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #91eae4, #86a8e7, #7f7fd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.panel {
margin-bottom: 0px;
}
.checkout-step {
/*background: #e8eef1;*/
background: #83a4d4; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #b6fbff, #83a4d4); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #b6fbff, #83a4d4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
border-top: 1px solid #607d8b21;
color: #666;
font-size: 14px;
padding: 15px 10px;
position: relative;
}
.checkout-step-number {
border-radius: 50%;
/* border: 1px solid #ced0d2; */
display: inline-block;
background: #065c9f;
font-size: 12px;
color: #fff;
font-weight: bold;
height: 32px;
margin-right: 15px;
padding: 6px;
text-align: center;
width: 32px;
}
.checkout-step-title {
font-size: 16px;
font-weight: 500;
vertical-align: middle;
display: inline-block;
margin: 0px;
color: #3d4884;
}
.checkout-step-body {
background: #fbfbfb;
padding: 15px 0px;
margin: 20px 0px 0px;
}
.imi-joingform {
margin-top: 50px;
}
.imc-jfheader {
background: #fff;
padding: 15px;
}
.imc-text h1 {
font-size: 20px;
color: #00bcd4;
}
.imc-text h2 {
font-size: 12px;
}
.imc-jfeditbtn {
padding: 5px;
font-size: 12px;
color: #fff;
font-weight: bold;
background: #29506f;
}
#collapseOne, #collapseTwo, #collapseThree, #collapseFour, #collapseFive, #collapseSix{
transition: all .3s;
}
#headingOne, #headingTwo, #headingThree, #headingFour, #headingFive, #headingSix{
cursor: pointer;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<style>
body {
background: #7f7fd5; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #91eae4, #86a8e7, #7f7fd5); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #91eae4, #86a8e7, #7f7fd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.panel {
margin-bottom: 0px;
}
.checkout-step {
/*background: #e8eef1;*/
background: #83a4d4; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #b6fbff, #83a4d4); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #b6fbff, #83a4d4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
border-top: 1px solid #607d8b21;
color: #666;
font-size: 14px;
padding: 15px 10px;
position: relative;
}
.checkout-step-number {
border-radius: 50%;
/* border: 1px solid #ced0d2; */
display: inline-block;
background: #065c9f;
font-size: 12px;
color: #fff;
font-weight: bold;
height: 32px;
margin-right: 15px;
padding: 6px;
text-align: center;
width: 32px;
}
.checkout-step-title {
font-size: 16px;
font-weight: 500;
vertical-align: middle;
display: inline-block;
margin: 0px;
color: #3d4884;
}
.checkout-step-body {
background: #fbfbfb;
padding: 15px 0px;
margin: 20px 0px 0px;
}
.imi-joingform {
margin-top: 50px;
}
.imc-jfheader {
background: #fff;
padding: 15px;
}
.imc-text h1 {
font-size: 20px;
color: #00bcd4;
}
.imc-text h2 {
font-size: 12px;
}
.imc-jfeditbtn {
padding: 5px;
font-size: 12px;
color: #fff;
font-weight: bold;
background: #29506f;
}
#collapseOne, #collapseTwo, #collapseThree, #collapseFour, #collapseFive, #collapseSix{
transition: all .3s;
}
#headingOne, #headingTwo, #headingThree, #headingFour, #headingFive, #headingSix{
cursor: pointer;
}
</style>
</head>
<body>
<div class="container imi-joingform">
<!-- Start Header -->
<div class="imc-jfheader">
<div class="row">
<div class="col-lg-6">
<div class="imc-logo">
<h3>Collapse Steps Form</h3>
</div>
</div>
<div class="col-lg-6 text-right">
<div class="imc-text">
<h2>
Last Visited on <span id="dateandtime"> 08-May-2021 12:01 PM </span> | My Profile | <span id="logstatus"> <a href="#">Logout </a> </span>
</h2>
</div>
</div>
</div>
</div>
<!-- End Header -->
<!-- Start Joining Form -->
<!-- Start row -->
<div class="row">
<div class="col-md-12">
<!-- Start accordion -->
<div id="accordion" class="">
<!-- Start First collapse -->
<div class="panel checkout-step">
<div role="tab" id="headingOne" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<div class="row">
<div class="col-10 col-lg-10">
<span class="checkout-step-number">1</span>
<h4 class="checkout-step-title"><a role="button"> Personal Details</a></h4>
</div>
<div class="col-2 col-lg-2 text-right d-none d-sm-block d-md-block d-lg-block d-xl-block">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn">Edit <i class="fa fa-edit"></i></button>
</div>
<div class="col-2 col-lg-2 text-right d-md-none d-lg-none">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn"><i class="fa fa-edit"></i></button>
</div>
</div>
</div>
<div id="collapseOne" class="collapse in">
<!-- Start collapse body -->
<div class="checkout-step-body">
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">First Name</label>
<input id="name" name="name" type="text" placeholder="First Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Middle Name</label>
<input id="name" name="name" type="text" placeholder="Middle Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Last Name</label>
<input id="name" name="name" type="text" placeholder="Last Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Mobile No</label>
<input id="name" name="name" type="text" placeholder="+91" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Email Id</label>
<input id="name" name="name" type="text" placeholder="Email Id" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Address</label>
<input id="name" name="name" type="text" placeholder="Address" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start button row -->
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4 text-right">
<div class="form-group">
<div class="col-md-12">
<button id="nextBtn" name="nextBtn" class="btn btn-primary">Next</button>
</div>
</div>
</div>
</div>
<!-- End button row -->
</div>
<!-- End collapse body -->
</div>
</div>
<!-- End First collapse -->
<!-- Start Second collapse -->
<div class="panel checkout-step">
<div role="tab" id="headingTwo" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<div class="row">
<div class="col-10 col-lg-10">
<span class="checkout-step-number">2</span>
<h4 class="checkout-step-title"><a role="button"> Professional Details</a></h4>
</div>
<div class="col-2 col-lg-2 text-right d-none d-sm-block d-md-block d-lg-block d-xl-block">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn">Edit <i class="fa fa-edit"></i></button>
</div>
<div class="col-2 col-lg-2 text-right d-md-none d-lg-none">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn"><i class="fa fa-edit"></i></button>
</div>
</div>
</div>
<div id="collapseTwo" class="collapse">
<!-- Start collapse body -->
<div class="checkout-step-body">
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">First Name</label>
<input id="name" name="name" type="text" placeholder="First Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Middle Name</label>
<input id="name" name="name" type="text" placeholder="Middle Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Last Name</label>
<input id="name" name="name" type="text" placeholder="Last Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Mobile No</label>
<input id="name" name="name" type="text" placeholder="+91" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Email Id</label>
<input id="name" name="name" type="text" placeholder="Email Id" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Address</label>
<input id="name" name="name" type="text" placeholder="Address" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start button row -->
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4 text-right">
<div class="form-group">
<div class="col-md-12">
<button id="nextBtn" name="nextBtn" class="btn btn-primary">Next</button>
</div>
</div>
</div>
</div>
<!-- End button row -->
</div>
<!-- End collapse body -->
</div>
</div>
<!-- End Second collapse -->
<!-- Start Third collapse -->
<div class="panel checkout-step">
<div role="tab" id="headingThree" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<div class="row">
<div class="col-10 col-lg-10">
<span class="checkout-step-number">3</span>
<h4 class="checkout-step-title"><a role="button"> Educational Details</a></h4>
</div>
<div class="col-2 col-lg-2 text-right d-none d-sm-block d-md-block d-lg-block d-xl-block">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn">Edit <i class="fa fa-edit"></i></button>
</div>
<div class="col-2 col-lg-2 text-right d-md-none d-lg-none">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn"><i class="fa fa-edit"></i></button>
</div>
</div>
</div>
<div id="collapseThree" class="collapse">
<!-- Start collapse body -->
<div class="checkout-step-body">
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">First Name</label>
<input id="name" name="name" type="text" placeholder="First Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Middle Name</label>
<input id="name" name="name" type="text" placeholder="Middle Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Last Name</label>
<input id="name" name="name" type="text" placeholder="Last Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Mobile No</label>
<input id="name" name="name" type="text" placeholder="+91" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Email Id</label>
<input id="name" name="name" type="text" placeholder="Email Id" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Address</label>
<input id="name" name="name" type="text" placeholder="Address" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start button row -->
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4 text-right">
<div class="form-group">
<div class="col-md-12">
<button id="nextBtn" name="nextBtn" class="btn btn-primary">Next</button>
</div>
</div>
</div>
</div>
<!-- End button row -->
</div>
<!-- End collapse body -->
</div>
</div>
<!-- End Third collapse -->
<!-- Start Fourth collapse -->
<div class="panel checkout-step">
<div role="tab" id="headingFour" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
<div class="row">
<div class="col-10 col-lg-10">
<span class="checkout-step-number">4</span>
<h4 class="checkout-step-title"><a role="button"> Nominee Details</a></h4>
</div>
<div class="col-2 col-lg-2 text-right d-none d-sm-block d-md-block d-lg-block d-xl-block">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn">Edit <i class="fa fa-edit"></i></button>
</div>
<div class="col-2 col-lg-2 text-right d-md-none d-lg-none">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn"><i class="fa fa-edit"></i></button>
</div>
</div>
</div>
<div id="collapseFour" class="collapse">
<!-- Start collapse body -->
<div class="checkout-step-body">
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">First Name</label>
<input id="name" name="name" type="text" placeholder="First Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Middle Name</label>
<input id="name" name="name" type="text" placeholder="Middle Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Last Name</label>
<input id="name" name="name" type="text" placeholder="Last Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Mobile No</label>
<input id="name" name="name" type="text" placeholder="+91" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Email Id</label>
<input id="name" name="name" type="text" placeholder="Email Id" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Address</label>
<input id="name" name="name" type="text" placeholder="Address" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start button row -->
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4 text-right">
<div class="form-group">
<div class="col-md-12">
<button id="nextBtn" name="nextBtn" class="btn btn-primary">Next</button>
</div>
</div>
</div>
</div>
<!-- End button row -->
</div>
<!-- End collapse body -->
</div>
</div>
<!-- End Fourth collapse -->
<!-- Start Five collapse -->
<div class="panel checkout-step">
<div role="tab" id="headingFive" data-toggle="collapse" data-parent="#accordion" href="#collapseFive">
<div class="row">
<div class="col-10 col-lg-10">
<span class="checkout-step-number">5</span>
<h4 class="checkout-step-title"><a role="button"> Documents Details</a></h4>
</div>
<div class="col-2 col-lg-2 text-right d-none d-sm-block d-md-block d-lg-block d-xl-block">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn">Edit <i class="fa fa-edit"></i></button>
</div>
<div class="col-2 col-lg-2 text-right d-md-none d-lg-none">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn"><i class="fa fa-edit"></i></button>
</div>
</div>
</div>
<div id="collapseFive" class="collapse">
<!-- Start collapse body -->
<div class="checkout-step-body">
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">First Name</label>
<input id="name" name="name" type="text" placeholder="First Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Middle Name</label>
<input id="name" name="name" type="text" placeholder="Middle Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Last Name</label>
<input id="name" name="name" type="text" placeholder="Last Name" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Mobile No</label>
<input id="name" name="name" type="text" placeholder="+91" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Email Id</label>
<input id="name" name="name" type="text" placeholder="Email Id" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Address</label>
<input id="name" name="name" type="text" placeholder="Address" class="form-control input-md" required="" />
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start button row -->
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4 text-right">
<div class="form-group">
<div class="col-md-12">
<button id="nextBtn" name="nextBtn" class="btn btn-primary">Next</button>
</div>
</div>
</div>
</div>
<!-- End button row -->
</div>
<!-- End collapse body -->
</div>
</div>
<!-- End Five collapse -->
<!-- Start Six collapse -->
<div class="panel checkout-step">
<div role="tab" id="headingSix" data-toggle="collapse" data-parent="#accordion" href="#collapseSix">
<div class="row">
<div class="col-10 col-lg-10">
<span class="checkout-step-number">6</span>
<h4 class="checkout-step-title"><a role="button"> Reviews </a></h4>
</div>
</div>
</div>
<div id="collapseSix" class="collapse">
<!-- Start collapse body -->
<div class="checkout-step-body">
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name"><strong>Name : </strong></label>
<label class="control-label" for="name">test</label>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name"><strong>Gender : </strong></label>
<label class="control-label" for="name">Male</label>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name"><strong>Mobile : </strong></label>
<label class="control-label" for="name">111111111</label>
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name"><strong>Email : </strong></label>
<label class="control-label" for="name">info@example.com</label>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name"><strong>Address : </strong></label>
<label class="control-label" for="name">test </label>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class=""></div>
</div>
</div>
<!-- End row -->
<!-- Start button row -->
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4 text-right">
<div class="form-group">
<div class="col-md-12">
<button id="nextBtn" name="nextBtn" class="btn btn-primary">Print</button>
</div>
</div>
</div>
</div>
<!-- End button row -->
</div>
<!-- End collapse body -->
</div>
</div>
<!-- End Six collapse -->
</div>
<!-- End accordion -->
</div>
</div>
<!-- End row -->
<!-- End Joining Form -->
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
</body>
</html>
Preview
Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes
WHAT IS NEW IN KERIXA?
RECENT CODES
CATEGORIES
Frontend Free Code
© 2024 Kerixa Inc