Simple Form Slider for Step by Step Form Wizard
- Article
- Comment
KV Simple form Slider (Step by step form)
Hello there, Are you looking for a simple slider? Then you can put end to your search, yes I’m sharing what I have looked more than a month. Eventually got it and sharing it for you.
HTML Code(index.html)
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="slide.js"></script>
<title> KV Simple Form slider </title>
</head>
<body>
<div id="kv_main-slider-space">
<div class="kv_slider-wrapper">
<form action="#"method="post">
<div id="step1" class="main-slides">
<table style="width: 100%" > <tr> <th colspan="2" > <p> Step 1/3</p> </th> </tr> <tr>
<td> <label> First Name :</label> </td> <td> <input type="text" name="fname" id="fname"> </td> </tr>
<tr> <td> <label> Last Name :</label> </td> <td> <input type="text" name="lname" id="lname"> </td> </tr>
<tr> <td><label> Email :</label> </td> <td> <input type="text" name="email" id="email"> </td> </tr>
</table>
</div><!-- end of slide1 -->
<div id="step2" class="main-slides">
<table style="width: 100%" > <tr> <th colspan="2" > <p> Step 1/3 Just repeated fields for demo. </p> </th> </tr> <tr>
<td> <label> First Name :</label> </td> <td> <input type="text" name="fname" id="fname"> </td> </tr>
<tr> <td> <label> Last Name :</label> </td> <td> <input type="text" name="lname" id="lname"> </td> </tr>
<tr> <td><label> Email :</label> </td> <td> <input type="text" name="email" id="email"> </td> </tr>
<tr> <td><label> phone :</label> </td> <td> <input type="text" name="email" id="email"> </td> </tr>
<tr> <td><label> fax :</label> </td> <td> <input type="text" name="email" id="email"> </td> </tr>
</table>
</div><!-- end of slide2 -->
<div id="step3" class="main-slides">
<table style="width: 100%" > <tr> <th colspan="2" > <p> Step 1/3</p> </th> </tr> <tr>
<td> <label> First Name :</label> </td> <td> <input type="text" name="fname" id="fname"> </td> </tr>
<tr> <td> <label> Last Name :</label> </td> <td> <input type="text" name="lname" id="lname"> </td> </tr>
</table>
</div><!-- end of slide3 -->
</div> <!-- end of slider-wrapper -->
</div><!-- end of slider-container -->
<div id="kv_slider-next" class="kv_slider-buttons">Next</div>
</div>
</body>
</html>" name="email" id="email">
</div><!-- end of slide1 -->
<div id="step2" class="main-slides">
<p> Step 2/3</p>
</div><!-- end of slide2 -->
<div id="step3" class="main-slides">
<p> Step 3/3</p>
</div><!-- end of slide3 -->
</div> <!-- end of slider-wrapper -->
</div><!-- end of slider-container -->
<div id="kv_slider-next" class="kv_slider-buttons">Next</div>
</div>
</body>
</html>
Once you have created this html file then you have to go for CSS and it is below. Since it slides from right to left, we have to place all steps in a line. Thus the below style does
Style.css
.kv_slider-wrapper {
position:relative;
left:0;
width:3000px;
overflow:hidden;
}
.main-slides {
width:600px;
float:left;
}
.kv_slider-buttons {
width:30px;
height:30px;
}
.kv_slider-buttons:hover { cursor:pointer; }
#kv_slider-next {
float:right;
width: 80px;
margin-top:10px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
text-align:center;
cursor: pointer;
padding: 10px 5px 0;
}
#kv_slider-next:hover {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
#kv_main-slider-space{
overflow:hidden;
position :relative ;
width:600px;
margin: 0 auto;
top: 20%;
height: auto ;
border: 1px solid blue ;
box-shadow: 0px 0px 16px 2px rgba(119, 119, 119, 0.41);
-moz-box-shadow: 0px 0px 16px 2px rgba(119, 119, 119, 0.41);
-webkit-box-shadow: 0px 0px 16px 2px rgba(119, 119, 119, 0.41);
}
table {
width: 100% ;
background: #f5f5f5;
border: 1px solid #ddd;
margin:auto;
}
table thead, table tfoot {
background: #f5f5f5;
}
table thead tr th, table tfoot tr th, table tbody tr td, table tr td, table tfoot tr td {
font-size: 12px;
line-height: 18px;
text- align: left;
image- align: left;
}
table thead tr th, table tfoot tr td {
padding: 8px 10px 9px;
font-size: 14px;
font-weight: bold;
color: #222;
}
table thead tr th:first-child, table tfoot tr td:first-child {
border-left: none;
}
table thead tr th:last-child, table tfoot tr td:last-child {
border-right: none;
}
table tbody tr.even, table tbody tr.alt {
background: #f9f9f9;
}
table tbody tr:nth-child(even) { background: #f9f9f9; }
table tbody tr td {
color: #333;
padding: 7px 7px;
vertical-align: top;
border: none;
}
Once the div’s are on straight line we have to make sure that it is responsive that is irrespective of first step’s height the second must adjust, so the height is adjusted through jquery.
Slide.js
$(document).ready(function(){
$('#kv_main-slider-space').css("height","200px");
// find all slides
var slides = $('.main-slides');
// starting index
var i = 0;
// click listener
$('#kv_slider-next').click(function(){
// find next index
// i + 1 or 0 if end of slides
i = ++i % slides.length;
//adjust height of div’s
var k=i+1;
var stp='#step'+k;
var height=$(stp).height();
$('#kv_main-slider-space').css("height",+height);
// scroll to that index
$('.kv_slider-wrapper').animate(
{'left' : -(slides.eq(i).position().left)},
600
);
});
});
Thus, a simple slider has been created you can add your own requirement such as validation if it is same form or any other functions according to the requirement.
You can download the Soruce code here.
