<div class="container-fluid px-1 py-5 mx-auto">
<div class="row d-flex justify-content-center">
<div class="col-xl-5 col-lg-6 col-md-7">
<div class="card b-0">
<h3 class="heading">Request a Quote</h3>
<p class="desc">Fill out the form or call <span class="yellow-text">123 456 7891</span><br>to start protecting your business today!</p>
<ul id="progressbar" class="text-center">
<li class="active step0" id="step1"></li>
<li class="step0" id="step2"></li>
<li class="step0" id="step3"></li>
<li class="step0" id="step4"></li>
</ul>
<fieldset class="show">
<div class="form-card">
<h5 class="sub-heading">Select Service(s)</h5>
<div class="row px-1 radio-group">
<div class="card-block text-center radio selected">
<div class="image-icon"> <img class="icon icon1" src="https://i.imgur.com/vZxfo9x.png"> </div>
<p class="sub-desc">One time paper cleanout</p>
</div>
<div class="card-block text-center radio">
<div class="image-icon"> <img class="icon icon1 fit-image" src="https://i.imgur.com/HnX40f4.png"> </div>
<p class="sub-desc">Shredding service on a regular schedule</p>
</div>
<div class="card-block text-center radio">
<div class="image-icon"> <img class="icon icon1 fit-image" src="https://i.imgur.com/ynKYPkk.png"> </div>
<p class="sub-desc">Hard Drive destruction</p>
</div>
<div class="card-block text-center radio">
<div class="image-icon"> <img class="icon icon1 fit-image" src="https://i.imgur.com/6qK7u8Q.png"> </div>
<p class="sub-desc">Other Material destruction</p>
</div>
</div> <button id="next1" class="btn-block btn-primary mt-3 mb-1 next">NEXT<span class="fa fa-long-arrow-right"></span></button>
</div>
</fieldset>
<fieldset>
<div class="form-card">
<h5 class="sub-heading mb-4">Personal Details</h5> <label class="text-danger mb-3">* Required</label>
<div class="form-group"> <label class="form-control-label">First Name * :</label> <input type="text" id="fname" name="fname" placeholder="" class="form-control" onblur="validate1(1)"> </div>
<div class="form-group"> <label class="form-control-label">Last Name * :</label> <input type="text" id="lname" name="lname" placeholder="" class="form-control" onblur="validate1(2)"> </div>
<div class="form-group"> <label class="form-control-label">Email ID * :</label> <input type="text" id="email" name="email" placeholder="" class="form-control" onblur="validate1(3)"> </div>
<div class="form-group"> <label class="form-control-label">Contact No. * :</label> <input type="text" id="mob" name="mob" placeholder="" class="form-control" onblur="validate1(4)"> </div> <button id="next2" class="btn-block btn-primary mt-3 mb-1 next mt-4" onclick="validate1(0)">NEXT<span class="fa fa-long-arrow-right"></span></button> <button class="btn-block btn-secondary mt-3 mb-1 prev"><span class="fa fa-long-arrow-left"></span>PREVIOUS</button>
</div>
</fieldset>
<fieldset>
<div class="form-card">
<h5 class="sub-heading mb-4">Company Details</h5> <label class="text-danger mb-3">* Required</label>
<div class="form-group"> <label class="form-control-label">Company Name * :</label> <input type="text" id="cname" name="cname" placeholder="" class="form-control" onblur="validate2(1)"> </div>
<div class="form-group"> <label class="form-control-label">Zip Code * :</label> <input type="text" id="zip" name="zip" placeholder="" class="form-control" onblur="validate2(2)"> </div>
<div class="form-group"> <label class="form-control-label">State * :</label> <input type="text" id="state" name="state" placeholder="" class="form-control" onblur="validate2(3)"> </div>
<div class="form-group"> <label class="form-control-label">City * :</label> <input type="text" id="city" name="city" placeholder="" class="form-control" onblur="validate2(4)"> </div>
<div class="form-group"> <label class="form-control-label">Shredding Job Size * :</label>
<div class="select mb-3"> <select name="shred-info" class="form-control">
<option>NA</option>
<option>1-20 boxes</option>
<option>20-50 boxes</option>
<option>50-100 boxes</option>
<option>100+ boxes</option>
</select> </div>
</div> <button id="next3" class="btn-block btn-primary mt-3 mb-1 next mt-4" onclick="validate2(0)">SUBMIT REQUEST<span class="fa fa-long-arrow-right"></span></button> <button class="btn-block btn-secondary mt-3 mb-1 prev"><span class="fa fa-long-arrow-left"></span>PREVIOUS</button>
</div>
</fieldset>
<fieldset>
<div class="form-card">
<h5 class="sub-heading mb-4">Success!</h5>
<p class="message">Thank You for choosing our website.<br>Quotation will be sent to your Email ID and Contact Number.</p>
<div class="check"> <img class="fit-image check-img" src="https://i.imgur.com/QH6Zd6Y.gif"> </div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
body {
color: #000;
overflow-x: hidden;
height: 100%;
background: linear-gradient(-45deg, #2196F3 50%, #EEEEEE 50%);
background-repeat: no-repeat
}
.card {
background-color: #FFF;
border-radius: 25px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
padding: 40px;
z-index: 0
}
.heading {
font-weight: normal
}
.desc {
font-size: 14px
}
#progressbar {
margin-bottom: 30px;
overflow: hidden;
color: lightgrey;
padding-left: 0px
}
#progressbar .active {
color: #673AB7
}
#progressbar li {
list-style-type: none;
font-size: 15px;
width: 25%;
float: left;
position: relative;
font-weight: 400
}
#progressbar .step0:before {
content: ""
}
#progressbar li:before {
width: 40px;
height: 40px;
line-height: 45px;
display: block;
font-size: 20px;
background: #E0E0E0;
border-radius: 50%;
margin: auto;
padding: 2px
}
#progressbar li:after {
content: '';
width: 100%;
height: 10px;
background: #E0E0E0;
position: absolute;
left: 0;
top: 17px;
z-index: -1
}
#progressbar li:last-child:after {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px
}
#progressbar li:first-child:after {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px
}
#progressbar li.active:before,
#progressbar li.active:after {
background: #F9A825
}
.sub-heading {
font-weight: 500
}
.yellow-text {
color: #F9A825
}
fieldset.show {
display: block
}
fieldset {
display: none
}
.radio {
display: inline-block;
border-radius: 0;
box-sizing: border-box;
cursor: pointer;
color: #BDBDBD;
font-weight: 500;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%)
}
.radio:hover {
box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1)
}
.radio.selected {
border: 1px solid #F9A825;
box-shadow: 0px 8px 16px 0px #EEEEEE;
color: #29B6F6 !important;
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-o-filter: grayscale(0%);
-ms-filter: grayscale(0%);
filter: grayscale(0%)
}
.card-block {
border: 1px solid #CFD8DC;
width: 45%;
margin: 2.5%;
padding: 20px 25px 15px 25px
}
@media screen and (max-width: 768px) {
.card-block {
padding: 20px 20px 0px 20px;
height: 250px
}
}
.icon {
width: 85px;
height: 100px
}
.image-icon {
width: 85px;
height: 100px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px
}
select,
input,
textarea,
button {
padding: 8px 15px 8px 15px;
border-radius: 0px;
margin-bottom: 25px;
margin-top: 2px;
width: 100%;
box-sizing: border-box;
color: #2C3E50;
background-color: #ECEFF1;
border: 1px solid #ccc;
font-size: 16px;
letter-spacing: 1px
}
select:focus,
input:focus,
textarea:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: 1px solid skyblue !important;
outline-width: 0
}
button:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
outline-width: 0
}
textarea {
height: 100px
}
button {
width: 120px;
letter-spacing: 2px
}
.fit-image {
width: 100%;
object-fit: cover
}
.btn-block {
border-radius: 5px;
height: 50px;
font-weight: 500;
cursor: pointer
}
.fa-long-arrow-right {
float: right;
margin-top: 4px
}
.fa-long-arrow-left {
float: left;
margin-top: 4px
}
function validate1(val) {
v1 = document.getElementById("fname");
v2 = document.getElementById("lname");
v3 = document.getElementById("email");
v4 = document.getElementById("mob");
flag1 = true;
flag2 = true;
flag3 = true;
flag4 = true;
if(val>=1 || val==0) {
if(v1.value == "") {
v1.style.borderColor = "red";
flag1 = false;
}
else {
v1.style.borderColor = "green";
flag1 = true;
}
}
if(val>=2 || val==0) {
if(v2.value == "") {
v2.style.borderColor = "red";
flag2 = false;
}
else {
v2.style.borderColor = "green";
flag2 = true;
}
}
if(val>=3 || val==0) {
if(v3.value == "") {
v3.style.borderColor = "red";
flag3 = false;
}
else {
v3.style.borderColor = "green";
flag3 = true;
}
}
if(val>=4 || val==0) {
if(v4.value == "") {
v4.style.borderColor = "red";
flag4 = false;
}
else {
v4.style.borderColor = "green";
flag4 = true;
}
}
flag = flag1 && flag2 && flag3 && flag4;
return flag;
}
function validate2(val) {
v1 = document.getElementById("cname");
v2 = document.getElementById("zip");
v3 = document.getElementById("state");
v4 = document.getElementById("city");
flag1 = true;
flag2 = true;
flag3 = true;
flag4 = true;
if(val>=1 || val==0) {
if(v1.value == "") {
v1.style.borderColor = "red";
flag1 = false;
}
else {
v1.style.borderColor = "green";
flag1 = true;
}
}
if(val>=2 || val==0) {
if(v2.value == "") {
v2.style.borderColor = "red";
flag2 = false;
}
else {
v2.style.borderColor = "green";
flag2 = true;
}
}
if(val>=3 || val==0) {
if(v3.value == "") {
v3.style.borderColor = "red";
flag3 = false;
}
else {
v3.style.borderColor = "green";
flag3 = true;
}
}
if(val>=4 || val==0) {
if(v4.value == "") {
v4.style.borderColor = "red";
flag4 = false;
}
else {
v4.style.borderColor = "green";
flag4 = true;
}
}
flag = flag1 && flag2 && flag3 && flag4;
return flag;
}
$(document).ready(function(){
var current_fs, next_fs, previous_fs;
$(".next").click(function(){
str1 = "next1";
str2 = "next2";
str3 = "next3";
if(!str2.localeCompare($(this).attr('id')) && validate1(0) == true) {
val2 = true;
}
else {
val2 = false;
}
if(!str3.localeCompare($(this).attr('id')) && validate2(0) == true) {
val3 = true;
}
else {
val3 = false;
}
if(!str1.localeCompare($(this).attr('id')) || (!str2.localeCompare($(this).attr('id')) && val2 == true) || (!str3.localeCompare($(this).attr('id')) && val3 == true)) {
current_fs = $(this).parent().parent();
next_fs = $(this).parent().parent().next();
$(current_fs).removeClass("show");
$(next_fs).addClass("show");
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
current_fs.animate({}, {
step: function() {
current_fs.css({
'display': 'none',
'position': 'relative'
});
next_fs.css({
'display': 'block'
});
}
});
}
});
$(".prev").click(function(){
current_fs = $(this).parent().parent();
previous_fs = $(this).parent().parent().prev();
$(current_fs).removeClass("show");
$(previous_fs).addClass("show");
$("#progressbar li").eq($("fieldset").index(next_fs)).removeClass("active");
current_fs.animate({}, {
step: function() {
current_fs.css({
'display': 'none',
'position': 'relative'
});
previous_fs.css({
'display': 'block'
});
}
});
});
$('.radio-group .radio').click(function(){
$(this).toggleClass('selected');
});
});