<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="form-steps">
<div class="container">
<div class="row">
<div class="col-xs-12">
<ul class="nav nav-pills nav-justified steps-nav">
<li class="active">
<a href="#step-1">
<h4 class="list-group-item-heading">Step 1</h4>
<p class="list-group-item-text">Download Now</p>
</a>
</li>
<li class="disabled">
<a href="#step-2">
<h4 class="list-group-item-heading">Step 2</h4>
<p class="list-group-item-text">Get Started</p>
</a>
</li>
<li class="disabled">
<a href="#step-3">
<h4 class="list-group-item-heading">Step 3</h4>
<p class="list-group-item-text">Submition</p>
</a>
</li>
</ul>
</div>
</div>
<div class="row steps-content" id="step-1">
<div class="col-xs-12">
<div class="steps-box">
<div class="text-center">
<label class="title">Download the Pitch Deck Template</label><br>
<button type="button" id="activate-step-2" class="btn">Download Now</button>
</div>
</div>
</div>
</div>
<div class="row steps-content" id="step-2">
<div class="col-xs-12">
<div class="steps-box">
<div class="text-center">
<label class="title">Ready to submit the Pitch</label><br>
<button type="button" id="activate-step-3" class="btn">Get Started</button>
</div>
</div>
</div>
</div>
<div class="row steps-content" id="step-3">
<div class="col-xs-12">
<div class="steps-box">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Add you Pitch Deck *</label>
<input type="file" class="form-control" required="">
</div>
<div class="form-group">
<label>Founder Name *</label>
<input type="text" class="form-control" required="">
</div>
<div class="form-group">
<label>Business Name *</label>
<input type="text" class="form-control" required="">
</div>
<div class="form-group">
<label>Telephone *</label>
<input type="text" class="form-control" required="">
</div>
<div class="form-group">
<label>Email *</label>
<input type="email" class="form-control" required="">
</div>
<div class="form-group">
<label>Country *</label>
<input type="text" class="form-control" required="">
</div>
<div class="form-group">
<label>Year Founded *</label>
<input type="text" class="form-control" required="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Business URL *</label>
<input type="text" class="form-control" required="">
</div>
<div class="form-group">
<label>Add any other Relevant Files</label>
<input type="file" class="form-control" required="">
</div>
<div class="form-group">
<label>Payment Turnaround Time</label>
<select class="form-control">
<option>Instant</option>
<option>Between 1-7 Days (1 Payment Cycle)</option>
<option>Between 8-14 Days (2 Payment Cycles)</option>
<option>Between 15-21 days (3 payment cycles)</option>
</select>
</div>
<div class="form-group">
<label>Current Monthly Revenue In excess of 1000 dollars?</label>
<select class="form-control">
<option>Yes</option>
<option>No</option>
</select>
</div>
<div class="form-group">
<label>Marketing Capital Required</label>
<select class="form-control">
<option>Under 1000 dollars </option>
<option>1000-3000 dollars</option>
<option>1000-3000 dollars</option>
<option>1000-3000 dollars</option>
</select>
</div>
<div class="form-group">
<label>Years/months in Operation Over 6 Months?</label>
<select class="form-control">
<option>Yes</option>
<option>No</option>
</select>
</div>
<div class="form-group">
<label>Average number of transactions (over 6 months) In excess of 1?</label>
<select class="form-control">
<option>Yes</option>
<option>No</option>
</select>
</div>
</div>
</div>
<div class="action-btn text-center">
<button type="submit" class="btn btn-border btn-rounded">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
/*CSS Already in Theme*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap');
body {font-family: 'Open Sans', sans-serif;}
/* Form Control */
.form-control {
height: 40px;
padding: 9px 16px;
border: 1px solid #e5e7e9;
color: inherit;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 24px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: background-color .3s ease, border .3s ease, color .3s ease;
-moz-transition: background-color .3s ease, border .3s ease, color .3s ease;
-ms-transition: background-color .3s ease, border .3s ease, color .3s ease;
-o-transition: background-color .3s ease, border .3s ease, color .3s ease;
transition: background-color .3s ease, border .3s ease, color .3s ease;
}
/* Button */
.btn {
border: 0 solid transparent;
border-radius: 0;
line-height: 20px;
color: #fff;
background-color: #2951d5;
padding: 16px 34px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.btn:focus:active,
.btn:focus,
.btn:active {
outline: none !important;
outline-offset: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn:hover,
.btn:focus {
color: #fff;
background-color: #1043cc;
}
.btn-rounded {
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.btn-border {
border: 2px solid #2951d5;
background-color: transparent !important;
color: #2951d5;
}
.btn.btn-border:hover,
.btn.btn-border:focus {
color: #2951d5;
}
/*CSS FOR USE*/
.form-steps {margin-top: 50px;}
.form-steps .steps-nav li {padding: 7.5px;}
.form-steps .steps-nav li:first-child {padding-left: 0;}
.form-steps .steps-nav li:last-child {padding-right: 0;}
.form-steps .steps-nav li a {
border: 2px solid #e5e7e9;
background: white;
color: #666;
}
.form-steps .steps-nav .list-group-item-heading {
font-size: 18px;
line-height: 24px;
font-weight: 500;
letter-spacing: 2px;
margin-right: -2px;
text-transform: uppercase;
}
.form-steps .steps-nav .list-group-item-text {
font-size: 14px;
font-weight: 400;
}
.form-steps .steps-nav li.active a {
border-color: #2951d5;
background: white;
color: #2951d5;
}
.form-steps .steps-nav li.active a .list-group-item-heading {font-weight: 600;}
.form-steps .steps-box {
padding: 50px;
border: 1px solid rgba(229, 231, 233, 0.5);
border-radius: 4px;
margin-top: 10px;
}
.form-steps .steps-box .title {
font-size: 32px;
line-height: 40px;
font-weight: 300;
margin-bottom: 30px;
color: #333;
}
.form-steps .action-btn {margin-top: 30px;}
@media (max-width: 767px) {
.form-steps .steps-box .title {
font-size: 26px;
line-height: normal;
}
}
@media (min-width: 551px) and (max-width: 767px) {
.form-steps .nav-justified>li {
display: table-cell;
width: 1%;
}
}
@media (max-width: 550px) {
.form-steps .steps-nav li {padding: 7.5px 0;}
.form-steps .steps-box {padding: 20px;}
.form-steps .steps-box .title {font-size: 20px;}
}
$(document).ready(function() {
var navListItems = $('.form-steps .steps-nav li a'),
allWells = $('.form-steps .steps-content');
allWells.hide();
navListItems.click(function(e)
{
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this).closest('li');
if (!$item.hasClass('disabled')) {
navListItems.closest('li').removeClass('active');
$item.addClass('active');
allWells.hide();
$target.show();
}
});
$('.form-steps .steps-nav li.active a').trigger('click');
// DEMO ONLY //
$('#activate-step-2').on('click', function(e) {
$('.form-steps .steps-nav li:eq(1)').removeClass('disabled');
$('.form-steps .steps-nav li a[href="#step-2"]').trigger('click');
$(this).remove();
});
$('#activate-step-3').on('click', function(e) {
$('.form-steps .steps-nav li:eq(2)').removeClass('disabled');
$('.form-steps .steps-nav li a[href="#step-3"]').trigger('click');
$(this).remove();
})
});
