In the above image there is multi step form with progress bar.In that three steps for completing form.first is 'service details' second is 'requirement type' and last is personal details.In code we are not set up background texture.All steps have next and previous button,and if you complete first step the 'service detail' color has been changed.All step have same structure.This form is developed in HTML,JavaScript,CSS. Below is full code of above multi step form,with three separated files that is(HTML,JavaScript,CSS).
- HTML Code
<html>
<head>
<body>
<div class="content"
<div class="main">
<form class="regform" action="#">
<ul id="progressbar">
<li id="active1"> Service Details</li>
<li id="active2">Requirement Type</li>
<li id="active3">Personal Details</li>
</ul>
<fieldset id="first">
<h2 class="title">Choose which service you want</h2>
<p class="subtitle">Step 1</p>
cook
<input type="checkbox" class="text_field" name="cook" value=""/><br/>
elder care <input type="checkbox" class="text_field" name="elder care" value=""/><br/>
baby sitter<input type="checkbox" class="text_field" name="baby sitter" value=""/><br/>
<input type="button" id="next_btn1" value="Next" onclick="next_step1()" />
</fieldset>
<fieldset id="second">
<h2 class="title">How urgent is your requirement?</h2>
<p class="subtitle">Step 2</p>
urgent
<input type="checkbox" name="urgent" class="text_field" value=""/><br/>
not so urgent<input type="checkbox" name="not so urgent" class="text_field" value=""/><br/>
just checking<input type="checkbox" name="just checking" class="text_field" /><br/>
<input type="button" id="pre_btn1" value="Previous" onclick="prev_step1()"/>
<input type="button" name="next" id="next_btn2" value="Next" onclick="next_step2()"/>
</fieldset>
<fieldset id="third">
<h2 class="title">Tell us more about yourself</h2>
<p class="subtitle">Step 3</p>
<input type="text" name="fname" class="text_field" placeholder="First Name" /><br/>
<input type="text" name="lname" class="text_field" placeholder="Last Name" /><br/>
<input type="text" name="email" class="text_field" placeholder="Email" /><br/>
<input type="text" name="mobile" class="text_field" placeholder="Mobile" /><br/>
<select class="options">
<option>--Select city</option>
<option>Pune</option>
<option>Surat</option>
<option>Mumbai</option>
<option>Banglore</option>
</select><br/>
<label>Gender</label><br/>
<input name="gender" type="radio" value="Male"/>Male<br/>
<input name="gender" type="radio" value="Female"/>Female<br/>
<input type="button" id="pre_btn2" value="Previous" onclick="prev_step2()"/>
<input type="submit" class="submit_btn" value="Submit" onclick="validation(event)"/>
</fieldset>
</form>
</div>
</head>
</body>
</html>
- JavaScript Code
<script type="text/javascript">
//Function Execution Part
function next_step1(){
document.getElementById("first").style.display="none";
document.getElementById("second").style.display="block";
document.getElementById("active2").style.color="#E76F11 ";
}
function prev_step1(){
document.getElementById("first").style.display="block";
document.getElementById("second").style.display="none";
document.getElementById("active1").style.color="#E76F11 ";
document.getElementById("active2").style.color="gray";
}
function next_step2(){
document.getElementById("second").style.display="none";
document.getElementById("third").style.display="block";
document.getElementById("active3").style.color="#E76F11 ";
}
function prev_step2(){
document.getElementById("third").style.display="none";
document.getElementById("second").style.display="block";
document.getElementById("active2").style.color="#E76F11 ";
document.getElementById("active3").style.color="gray";
}
</script>
- CSS Code
<style type="text/css">
.content{
width:960px;
margin:20px auto;
}
.main{
float:left;
width: 650px;
margin-top:80px;
}
#progressbar{
margin:20;
padding:0;
font-size:18px;
}
#active1{
color:#E76F11 ;
}
fieldset{
display:none;
width: 350px;
padding:20px;
margin-top:50px;
margin-left: 85px;
border-radius:5px;
box-shadow: 3px 3px 25px 1px gray;
}
#first{
display:block;
width: 350px;
padding:20px;
margin-top:50px;
border-radius:5px;
margin-left: 85px;
box-shadow: 3px 3px 25px 1px gray;
}
input[type=text],
input[type=password],
select{
width:100%;
margin:10px 0;
height:40px;
padding:5px;
border: 3px solid gray;
border-radius: 4px;
}
textarea{
width:100%;
margin:10px 0;
height:70px;
padding:5px;
border: 3px solid rgb(236, 176, 220);
border-radius: 4px;
}
input[type=submit],
input[type=button]{
width: 120px;
margin:15px 25px;
padding: 5px;
height: 40px;
background-color: #1197A9;
border: none;
border-radius: 4px;
color: white;
}
h2,p{
text-align:center;
}
li{
margin-right:52px;
display:inline;
color:#c1c5cc;
}
.formget{
float:right;
margin-top:30px;
}
</style>
No comments:
Post a Comment