"Payment Form Design"
Bootstrap 2.3.2 Snippet by Deepakbisht

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Flat Payment Form</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class='container'> <div class='info'> <span></span> </div> <form class='modal'> <header class='header'> <h1>Payment Form Design</h1> <div class='card-type'> <a class='card active' href='#' id="one"> <img src='http://image.flaticon.com/icons/png/128/297/297559.png' width="64"/> <p>Account Information</p> </a> <a class='card' href='#' id="two"> <img src='http://image.flaticon.com/icons/png/128/236/236832.png' width="64"/> <p>Personal Information</p> </a> <a class='card' href='#' id="three"> <img src='http://image.flaticon.com/icons/png/128/297/297563.png' width="64"/> <p>Payment Information</p> </a> <a class='card' href='#' id="four"> <img src='http://image.flaticon.com/icons/png/128/297/297557.png' width="64"/> <p>Confirm Your Details</p> </a> </div> </header> <div class='content' id="one-inner"> <div class='form'> <div class='form-row'> <div class='input-group'> <label for=''>Username</label> <input placeholder='Username' type='text'> </div> </div> <div class='form-row'> <div class='input-group'> <label for=''>Email</label> <input placeholder='Email' type='text'> </div> </div> <div class='form-row'> <div class='input-group'> <label for=''>Password</label> <input placeholder='Password' type='text'> </div> </div> <div class='form-row'> <div class='input-group'> <label for=''>Confirm password</label> <input placeholder='Confirm password' type='text'> </div> </div> </div> <footer class='footer'> <button class='button' id="one-button"> Next Step</button> </footer> </div><!--one--> <div class='content' id="two-inner"> <div class='form'> <div class='form-row content_two'> <div class='input-group'> <label for=''>Salutation</label> <select name="salut" class="dropdown-select"> <option value="1">Mr</option> <option value="2">Mrs</option> </select> </div> </div> <div class='form-row content_two'> <div class='input-group'> <label for=''>Gender</label> <select name="gender" class="dropdown-select" style="margin-left:2%;"> <option value="1">Male</option> <option value="2">Female</option> </select> </div> </div> <div class="clear"></div> <div class='form-row content_two'> <div class='input-group'> <label for=''>First Name</label> <input placeholder='First Name' type='text'> </div> </div> <div class='form-row content_two' style="margin-left:2%;"> <div class='input-group'> <label for=''>Last Name</label> <input placeholder='Last Name' type='text'> </div> </div> <div class="clear"></div> <div class='form-row'> <div class='input-group'> <label for=''>Email</label> <input placeholder='Email' type='text'> </div> </div> <div class='form-row'> <div class='input-group'> <label for=''>Phone</label> <input placeholder='Phone' type='number'> </div> </div> <div class="clear"></div> <div class='form-row content_two'> <div class='input-group'> <label for=''>Zip Code</label> <input placeholder='Zip Code' type='number'> </div> </div> <div class='form-row content_two' style="margin-left:2%;"> <div class='input-group'> <label for=''>Select State</label> <select name="state" class="dropdown-select"> <option value="1">Texas</option> <option value="2">New York</option> </select> </div> </div> <div class="clear"></div> <div class='form-row'> <div class='input-group'> <label for=''>Home address</label> <input placeholder='Address' type='text'> </div> </div> <div class='form-row'> <div class='input-group'> <label for=''>Select Country</label> <select name="country" class="dropdown-select"> <option value="1">USA</option> <option value="2">Canada</option> <option value="2">UK</option> </select> </div> </div> </div> <footer class='footer'> <button class='button' id="two-button"> Next Step</button> </footer> </div><!--two--> <div class='content' id="three-inner"> <div class='form'> <div class='form-row'> <div class='input-group'> <label for=''>Card Type</label> <select name="card-type" class="dropdown-select"> <option value="1">Visa</option> <option value="2">Master Card</option> </select> </div> </div> <div class='form-row content_two'> <div class='input-group'> <label for=''>Card Number</label> <input placeholder='Number' type='text'> </div> </div> <div class='form-row content_two' style="margin-left:2%;"> <div class='input-group'> <label for=''>CVC</label> <input placeholder='CVC' type='text'> </div> </div> <div class="clear"></div> <div class='form-row'> <div class='input-group'> <label for=''>Card Holder Name</label> <input placeholder='Card Holder Name' type='text'> </div> </div> <div class="clear"></div> <div class='form-row content_two'> <div class='input-group'> <label for=''>Expiry Month</label> <select name="month" class="dropdown-select"> <option value="1">01</option> <option value="2">02</option> <option value="3">03</option> <option value="4">04</option> <option value="5">05</option> <option value="6">06</option> <option value="7">07</option> <option value="8">08</option> <option value="9">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> </div> </div> <div class='form-row content_two' style="margin-left:2%;"> <div class='input-group'> <label for=''>Expiry Year</label> <select name="year" class="dropdown-select"> <option value="1">2014</option> <option value="2">2015</option> <option value="3">2016</option> <option value="4">2017</option> </select> </div> </div> </div> <footer class='footer'> <button class='button' id="three-button"> Next Step</button> </footer> </div><!--three--> <div class='content' id="four-inner"> <div class='form'> <div class="data-container"> <dl> <dt>Username :-</dt> <dd>John_503in</dd> </dl> <dl> <dt>Email ID :-</dt> <dd>john_doe@gmail.com</dd> </dl> <dl> <dt>Full Name :-</dt> <dd>John Doe</dd> </dl> <dl> <dt>Gender :-</dt> <dd>Male</dd> </dl> <dl> <dt>Telephone NO :-</dt> <dd>325-555-1234</dd> </dl> <dl> <dt>Address :-</dt> <dd>111 W.App Ave. Suite 123, Sunway, CA</dd> </dl> <dl> <dt>Zip Code :-</dt> <dd>94086</dd> </dl> <dl> <dt>Country :-</dt> <dd>USA</dd> </dl> <dl> <dt>Card Type :-</dt> <dd>Visa</dd> </dl> <dl> <dt>Card NO :-</dt> <dd>4519-1235-9869-4321</dd> </dl> </div> <div class="clear"></div> </div> <footer class='footer'> <button class='button' id="four-button" > Submit</button> </footer> </div><!--four--> </form> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script> </body> </html>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i'); body { background:url(http://www.incube-8.com/wp-content/uploads/2013/11/incube8-background-ONLINE-PAYMENT.jpg); background-size:cover; font-size: 14px; font-family: 'Open Sans', sans-serif; line-height: 1; } .container { font-family: 'Open Sans', sans-serif; display: block; max-width: 480px; margin: 40px auto; } .modal { font-family: 'Open Sans', sans-serif; box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07); background: #FFF; -webkit-border-radius: 4px; -webkit-background-clip: padding-box; -moz-border-radius: 4px; -moz-background-clip: padding; border-radius: 4px; background-clip: padding-box; overflow: hidden; } .modal .form .form-row { font-family: 'Open Sans', sans-serif; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; margin: 0 0 30px; } .modal .form .form-row:last-child { font-family: 'Open Sans', sans-serif; margin: 0; } /*.modal .form .form-row:last-child .input-group { width: 75%; margin: 0 15px 0 0; } .modal .form .form-row:last-child .input-group:last-child { width: 25%; margin: 0 0 0 15px; }*/ .modal .form .input-group { width: 100%; } .modal .form label { font-family: 'Open Sans', sans-serif; display: block; width: 100%; margin: 0 0 10px; color: #00A6EA; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .modal .form input { padding: 0px 10px !important; height: 42px; font-family: 'Open Sans', sans-serif; outline: none; display: block; background: rgba(0, 0, 0, 0.1); width: 100%; margin: 0; border: 0; -webkit-border-radius: 3px; -webkit-background-clip: padding-box; -moz-border-radius: 3px; -moz-background-clip: padding; border-radius: 3px; background-clip: padding-box; padding: 15px; color: #999; font-size: 12px; font-weight: 700; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .modal .form select { padding: 0px 10px !important; height: 42px; font-family: 'Open Sans', sans-serif; outline: none; display: block; background: rgba(0, 0, 0, 0.1); width:100%; margin: 0; border: 0; -webkit-border-radius: 3px; -webkit-background-clip: padding-box; -moz-border-radius: 3px; -moz-background-clip: padding; border-radius: 3px; background-clip: padding-box; padding: 15px; color: #999; font-size: 12px; font-weight: 700; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .modal .header {font-family: 'Open Sans', sans-serif; background: #00A6EA; padding: 30px; text-align: center; } .modal .header h1 {font-family: 'Open Sans', sans-serif; margin: 0 0 15px; color: #FFF; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .modal .header .card-type {font-family: 'Open Sans', sans-serif; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .modal .header .card-type .card {font-family: 'Open Sans', sans-serif; position: relative; width: 25%; min-width: 54px; text-align: center; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); } .modal .header .card-type .card.active {font-family: 'Open Sans', sans-serif; -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -ms-filter: grayscale(0); filter: grayscale(0); } .modal .header .card-type .card.active:after {font-family: 'Open Sans', sans-serif; display: block; bottom: -30px; } .modal .header .card-type .card:after {font-family: 'Open Sans', sans-serif; content: ''; position: absolute; bottom: -60px; left: 50%; margin: 0 0 0 -10px; border-right: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 10px solid #FFF; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; } .modal .header .card-type .card img {font-family: 'Open Sans', sans-serif; display: inline-block; } .modal .header .card-type li {font-family: 'Open Sans', sans-serif; display: inline-block; margin: 0 10px; } .modal .content {font-family: 'Open Sans', sans-serif; padding: 30px; overflow-y: scroll !important; height: 150px !important; } .modal .footer .button { font-family: 'Open Sans', sans-serif; margin-top:25px; outline: none; display: block; background: #6772e5; box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08); border-radius: 4px; width: 100%; border: 0; padding: 20px 30px; color: #FFF; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: all .15s ease; } .modal .footer .button:hover {font-family: 'Open Sans', sans-serif; color: #FFF; transform: translateY(-5px); box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08); } .info {font-family: 'Open Sans', sans-serif; width: 300px; margin: 50px auto; text-align: center; } .info h1 {font-family: 'Open Sans', sans-serif; margin: 0 0 15px; padding: 0; font-size: 24px; font-weight: 400; color: #333; } .info span {font-family: 'Open Sans', sans-serif; color: #666; font-size: 12px; } .info span a { color: #000; text-decoration: none; } .info span .fa {font-family: 'Open Sans', sans-serif; color: #00A6EA; } lesshat-selector { -lh-property: 0; } @-webkit-keyframes active{ 0%{ bottom: -60px; opacity: 0; } 100%{ bottom: -30px; opacity: 1 }} @-moz-keyframes active{ 0%{ bottom: -60px; opacity: 0; } 100%{ bottom: -30px; opacity: 1 }} @-o-keyframes active{ 0%{ bottom: -60px; opacity: 0; } 100%{ bottom: -30px; opacity: 1 }} @keyframes active{ 0%{ bottom: -60px; opacity: 0; } 100%{ bottom: -30px; opacity: 1 }} [not-existing] { zoom: 1; } .card-type a{ font-family: 'Open Sans', sans-serif; text-decoration: none; list-style: none;} .card-type p{font-family: 'Open Sans', sans-serif; font-size: 11px; color: #FFF; font-weight: 600;} .content_two{width:49% !important; float:left;font-family: 'Open Sans', sans-serif;} .clear{clear: both;} .data-container dd {font-family: 'Open Sans', sans-serif; width: 50%; float: left; line-height: 29px; font-weight: bold; font-size: 13px; color: #9e9e9e;font-family: 'Open Sans', sans-serif; } .data-container dt {font-family: 'Open Sans', sans-serif; width: 48%; float: left; line-height: 29px; font-weight: bold; font-size: 13px; }
$('.card').on('click', function() { $('.card').removeClass('active'); $(this).addClass('active'); $('.form').stop().slideUp(); $('.form').delay(300).slideDown(); }); $('#one-button').on('click', function() { $('.card').removeClass('active'); $('#two').addClass('active'); $('.form').stop().slideUp(); $('.form').delay(300).slideDown(); }); $('#two-button').on('click', function() { $('.card').removeClass('active'); $('#three').addClass('active'); $('.form').stop().slideUp(); $('.form').delay(300).slideDown(); }); $('#three-button').on('click', function() { $('.card').removeClass('active'); $('#four').addClass('active'); $('.form').stop().slideUp(); $('.form').delay(300).slideDown(); }); $('#four-button').on('click', function() { $('.card').removeClass('active'); $('#one').addClass('active'); $('.form').stop().slideUp(); $('.form').delay(300).slideDown(); }); $(document).ready(function(){ $("#one-button").click(function(){ $("#one-inner").hide(); }); $("#one-button").click(function(){ $("#two-inner").show(); }); $("#two-button").click(function(){ $("#two-inner").hide(); }); $("#two-button").click(function(){ $("#three-inner").show(); }); $("#three-button").click(function(){ $("#three-inner").hide(); }); $("#three-button").click(function(){ $("#four-inner").show(); }); $("#four-button").click(function(){ $("#four-inner").hide(); }); $("#four-button").click(function(){ $("#one-inner").show(); }); $("#two-inner").hide(); $("#three-inner").hide(); $("#four-inner").hide(); $("#one").click(function(){ $("#two-inner").hide(); $("#three-inner").hide(); $("#four-inner").hide(); }); $("#one").click(function(){ $("#one-inner").show(); }); $("#two").click(function(){ $("#one-inner").hide(); $("#three-inner").hide(); $("#four-inner").hide(); }); $("#two").click(function(){ $("#two-inner").show(); }); $("#three").click(function(){ $("#one-inner").hide(); $("#two-inner").hide(); $("#four-inner").hide(); }); $("#three").click(function(){ $("#three-inner").show(); }); $("#four").click(function(){ $("#one-inner").hide(); $("#two-inner").hide(); $("#three-inner").hide(); }); $("#four").click(function(){ $("#four-inner").show(); }); });

Related: See More


Questions / Comments: