"Form Steps"
Bootstrap 3.3.0 Snippet by RizwanAkram

<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(); }) });

Related: See More


Questions / Comments: