"Form template multi-page"
Bootstrap 3.3.0 Snippet by xrozix

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <section> <div class="wizard"> <div class="wizard-inner"> <div class="connecting-line"></div> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"> <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1"> <span class="round-tab"> <i class="glyphicon glyphicon-folder-open"></i> </span> </a> </li> <li role="presentation" class="disabled"> <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2"> <span class="round-tab"> <i class="glyphicon glyphicon-pencil"></i> </span> </a> </li> <li role="presentation" class="disabled"> <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3"> <span class="round-tab"> <i class="glyphicon glyphicon-picture"></i> </span> </a> </li> <li role="presentation" class="disabled"> <a href="#step4" data-toggle="tab" aria-controls="step4" role="tab" title="Step 3"> <span class="round-tab"> <i class="glyphicon glyphicon-picture"></i> </span> </a> </li> <li role="presentation" class="disabled"> <a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete"> <span class="round-tab"> <i class="glyphicon glyphicon-ok"></i> </span> </a> </li> <li role="presentation" class="disabled"> <a href="#complete1" data-toggle="tab" aria-controls="complete" role="tab" title="Complete1"> <span class="round-tab"> <i class="glyphicon glyphicon-ok"></i> </span> </a> </li> </ul> </div> <form role="form"> <div class="tab-content"> <div class="tab-pane active" role="tabpanel" id="step1"> <div style="color:#fff; font-size:1.4em; margin-left:10px;"> <p>Thank you for enquiring about what services we could provide for you.</p> <p>To allow us to provide the services we offer at very competitive prices we look to make our client on-boarding process as efficient as possible. This form allows us to collect your basic requirements so that we can direct your enquiry to the right person within our client services team. Once we have your information we will review it and then contact you within 48hrs to discuss the services that you require in more detail. Once agreed, we can then issue you with a formal engagement letter.</p> <p>The form should not take more than 15 minutes to complete.</p> <p>We look forward to receiving your information and to contacting you in due course.</p> <p>Many thanks again</p> <p>The Lucrafts Client Services team</p> </div> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-primary next-step">Save and continue</button></li> </ul> </div> <div class="tab-pane" role="tabpanel" id="step2"> <div style="color:#fff; font-size:1.4em;"> <h1 class="text-center" font-size:1.8em;> Contact details</h1> <div class="form-group"> <div class="form-group col-sm-4"> <label class="control-label" for="Contact_FirstName">First name:</label> [type=email|name=Contact_FirstName|class=form-control] </div> <div class="form-group col-sm-4"> <label class="control-label" for="Contact_Surname">Surname:</label> [type=textbox|name=Contact_Surname|class=form-control] </div> <div class="form-group col-sm-4"> <label class="control-label" for="Contact_Email">Email:</label> [type=textbox|name=Contact_Email|class=form-control] </div> <div class="form-group col-sm-6"> <label class="control-label" for="Contact_phone">Contact number:</label> [type=number|name=Contact_phone|class=form-control] </div> <div class="form-group col-sm-6"> <label class="control-label" for="Contact_ReasonForContact">Your reason For contact:</label> [type=select|name=Contact_ReasonForContact|class=form-control|items=:I'm an existing client;I've been referred by a friend;I found you on the web;I found you via the Xero website;I was just walking past your office] </div> <div class="form-group col-sm-12"> <label class="control-label" for="Contact_EnquiryNature">Nature of your Enquiry:</label> [type=select|name=Contact_EnquiryNature|class=form-control|items=:I have an existing company and need a new accountant to provide accounting and/or advice services;I have just started a new company and need an accountant to provide accounting and/or advice services;I am a soletrader and need an accountant to provide accounting and/or advice services;I am an individual and need an accountant to provide accounting and/or advise services] </div> </div> </div> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-default prev-step">Previous</button></li> <li><button type="button" class="btn btn-primary next-step">Save and continue</button></li> </ul> </div> <div class="tab-pane" role="tabpanel" id="step3"> <div style="color:#fff; font-size:1.4em;"> <h1 class="text-center" font-size:1.8em;> Company details</h1> <div class="form-group col-sm-4"> <label class="control-label" for="Contact_CompanyName">Company Name:</label> [type=textbox|name=Contact_CompanyName|class=form-control col-xs-3] </div> <div class="form-group col-sm-4"> <label class="control-label" for="Contact_CompanyNumber">Company Number:</label> [type=textbox|name=Contact_CompanyNumber|class=form-control col-xs-3] </div> <div class="form-group col-sm-4"> <label class="control-label" for="Contact_Registered">would you like to be registered :</label> [type=Select|name=Contact_Registered|class=form-control|items=:Yes id like to register at your address; No, I'm happy where it is currently registered;Company not yet formed;Other] </div> <div class="form-group col-sm-3"> <label class="control-label" for="Contact_Registered">Company year end :</label> [type=Select|name=Contact_YearEnd|class=form-control|items=:January;February;March;April;May;June;July;August;September;October;November;December] </div> <div class="form-group col-sm-9"> <label class="control-label" for="Contact_CompanyFiled">have the accounts for your company's last year been filed at Companies House? :</label> [type=Select|name=Contact_CompanyFiled|class=form-control|items=:Yes; No;Other] </div> <div class="form-group col-sm-12"> <label class="control-label" for="Contact_Services">What services does your/will your company provide:</label> [type=textarea|name=Contact_Services|class=form-control] </div> <div class="form-group col-sm-6"> <label class="control-label" for="Contact_AnnualTurnover">What is your estimated annual turnover (sales) :</label> [type=Select|name=Contact_AnnualTurnover|class=form-control|items=:<£50,000pa net of VAT; £50,001 - £100,000pa net of VAT;£100,001 - £250,000pa net of VAT;£250,001 -£500,000pa net of VAT;£500,001 - £1,000,000pa net of VAT;£1,000,000 - £5,000,000pa net of VAT;>£5,000,000pa net of VAT] </div> <div class="form-group col-sm-6"> <label class="control-label" for="Contact_PrincpileSystem">What do you currently us to keep your books :</label> [type=Select|name=Contact_PrincpileSystem|class=form-control|items=:Xero; Quickbooks; Sage; Free agent; MYOB; Quicken; Kashflow; Maunual spreadsheets; I just keep paper copies of sales and purchase invoices, bank statements and expense receipts; Nothing yet I've only just started; Nothing yet I've only just started ; Other ] </div> <div class="form-group col-sm-6"> <label class="control-label" for="Contact_VATStatus">What is your company's VAT status :</label> [type=Select|name=Contact_VATStatus|class=form-control|items=:Not registered for VAT; Standard Rate VAT; Flat Rate VAT; I need to register for VAT; Other] </div> <div class="form-group col-sm-6"> <label class="control-label" for="Contact_Currency"> What currencies do you do buisness in :</label> [type=Select|name=Contact_Currency|class=form-control|items=: GBP (Sterling); USD (US dollars); EUR (Euros); Other] </div> <div class="form-group col-sm-6"> <label class="control-label" for="Contact_SalesInvoice"> How many sales invoices do you anticipate raising :</label> [type=Select|name=Contact_SalesInvoice|class=form-control|items=: <5 Per month; 6-30 Per month; 30+ Per month] </div> <div class="form-group col-sm-6"> <label class="control-label" for="Contact_PurchaseInvoice"> How many purchase invoices do you anticipate raising:</label> [type=Select|name=Contact_PurchaseInvoice|class=form-control|items=: <5 Per month; 6-30 Per month; 30+ Per month] </div> <div class="form-group col-sm-6"> <label class="control-label" for="Contact_ReceiptIs"> How many expense receipts do you anticipate raising :</label> [type=Select|name=Contact_ReceiptIs|class=form-control|items=: <5 Per month; 6-30 Per month; 30+ Per month] </div> <div class="form-group col-sm-6"> <label class="control-label" for="Contact_Bank"> Who do you bank/ intend to bank with :</label> [type=Select|name=Contact_Bank|class=form-control|items=: National Westminster; HSBC; Barclays; Royal Bank of Scotland; Lloyds Bank; Santandar; Co-Operative Bank; Bank of Scotland; TSB; Metro; Handlesbanken; Coutts; Bank Ireland; Citibank; Allied Irish; Other:] </div> <div class="form-group col-sm-12"> <label class="control-label" for="Contact_CurrentAccountants">If you have any, who are your current accountants:</label> [type=textarea|name=Contact_CurrentAccountants|class=form-control] </div> <!-- Text input Start--> </div> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-default prev-step">Previous</button></li> <li><button type="button" class="btn btn-primary btn-info-full next-step">continue</button></li> </ul> </div> <div class="tab-pane" role="tabpanel" id="step4"> <div style="color:#fff; font-size:1.4em;"> <h1 class="text-center" font-size:1.8em;> Sole Trader (Ignore if not applicable)</h1> <div class="form-group col-sm-4"> <label class="control-label" for="SoleTrader_CompanyName">Company Name:</label> [type=textbox|name=SoleTrader_CompanyName|class=form-control col-xs-3] </div> <div class="form-group col-sm-4"> <label class="control-label" for="SoleTrader_CompanyNumber">Company Number:</label> [type=textbox|name=SoleTrader_CompanyNumber|class=form-control col-xs-3] </div> <div class="form-group col-sm-4"> <label class="control-label" for="SoleTrader_Registered">would you like to be registered :</label> [type=Select|name=SoleTrader_Registered|class=form-control|items=:Yes id like to register at your address; No, I'm happy where it is currently registered;Company not yet formed;Other] </div> <div class="form-group col-sm-3"> <label class="control-label" for="SoleTrader_Registered">Company year end :</label> [type=Select|name=SoleTrader_YearEnd|class=form-control|items=:January;February;March;April;May;June;July;August;September;October;November;December] </div> <div class="form-group col-sm-9"> <label class="control-label" for="SoleTrader_CompanyFiled">have the accounts for your company's last year been filed at Companies House? :</label> [type=Select|name=SoleTrader_CompanyFiled|class=form-control|items=:Yes; No;Other] </div> <div class="form-group col-sm-12"> <label class="control-label" for="SoleTrader_Services">What services does your/will your company provide:</label> [type=textarea|name=SoleTrader_Services|class=form-control] </div> <div class="form-group col-sm-6"> <label class="control-label" for="SoleTrader_AnnualTurnover">What is your estimated annual turnover (sales) :</label> [type=Select|name=SoleTrader_AnnualTurnover|class=form-control|items=:<£50,000pa net of VAT; £50,001 - £100,000pa net of VAT;£100,001 - £250,000pa net of VAT;£250,001 -£500,000pa net of VAT;£500,001 - £1,000,000pa net of VAT;£1,000,000 - £5,000,000pa net of VAT;>£5,000,000pa net of VAT] </div> <div class="form-group col-sm-6"> <label class="control-label" for="SoleTrader_PrincpileSystem">What do you currently us to keep your books :</label> [type=Select|name=SoleTrader_PrincpileSystem|class=form-control|items=:Xero; Quickbooks; Sage; Free agent; MYOB; Quicken; Kashflow; Maunual spreadsheets; I just keep paper copies of sales and purchase invoices, bank statements and expense receipts; Nothing yet I've only just started; Nothing yet I've only just started ; Other ] </div> <div class="form-group col-sm-6"> <label class="control-label" for="SoleTrader_VATStatus">What is your company's VAT status :</label> [type=Select|name=SoleTrader_VATStatus|class=form-control|items=:Not registered for VAT; Standard Rate VAT; Flat Rate VAT; I need to register for VAT; Other] </div> <div class="form-group col-sm-6"> <label class="control-label" for="SoleTrader_Currency"> What currencies do you do buisness in :</label> [type=Select|name=SoleTrader_Currency|class=form-control|items=: GBP (Sterling); USD (US dollars); EUR (Euros); Other] </div> <div class="form-group col-sm-6"> <label class="control-label" for="SoleTrader_SalesInvoice"> How many sales invoices do you anticipate raising :</label> [type=Select|name=SoleTrader_SalesInvoice|class=form-control|items=: <5 Per month; 6-30 Per month; 30+ Per month] </div> <div class="form-group col-sm-6"> <label class="control-label" for="SoleTrader_PurchaseInvoice"> How many purchase invoices do you anticipate raising:</label> [type=Select|name=SoleTrader_PurchaseInvoice|class=form-control|items=: <5 Per month; 6-30 Per month; 30+ Per month] </div> <div class="form-group col-sm-6"> <label class="control-label" for="SoleTrader_ReceiptIs"> How many expense receipts do you anticipate raising :</label> [type=Select|name=SoleTrader_ReceiptIs|class=form-control|items=: <5 Per month; 6-30 Per month; 30+ Per month] </div> <div class="form-group col-sm-6"> <label class="control-label" for="SoleTrader_Bank"> Who do you bank/ intend to bank with :</label> [type=Select|name=SoleTrader_Bank|class=form-control|items=: National Westminster; HSBC; Barclays; Royal Bank of Scotland; Lloyds Bank; Santandar; Co-Operative Bank; Bank of Scotland; TSB; Metro; Handlesbanken; Coutts; Bank Ireland; Citibank; Allied Irish; Other:] </div> <div class="form-group col-sm-12"> <label class="control-label" for="SoleTrader_CurrentAccountants">If you have any, who are your current accountants:</label> [type=textarea|name=SoleTrader_CurrentAccountants|class=form-control] </div> </div> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-default prev-step">Previous</button></li> <li><button type="button" class="btn btn-default next-step">Skip</button></li> <li><button type="button" class="btn btn-primary btn-info-full next-step"> continue</button></li> </ul> </div> <div class="tab-pane" role="tabpanel" id="complete"> <div style="color:#fff; font-size:1.4em;"> <h1 class="text-center" font-size:1.8em;>Individual details</h1> <div class="form-group col-sm-12"> <label class="control-label" for="contact_CurrentPersonalCircumstances">What are your current personal circumstances: </label> [type=textarea|name=contact_CurrentPersonalCircumstances|class=form-control |watermark=e.g. married, kids, mortgage, employed] </div> <div class="form-group col-sm-12"> <label class="control-label" for="contact_incomeTypeReceive">What types of income do you receive: </label> [type=textarea|name=contact_incomeTypeReceive|class=form-control |watermark=e.g. Salary, dividend, royalties, trust, interest, rental, pension, income from overseas, investment income] </div> <div class="form-group col-sm-12"> <label class="control-label" for="contact_significantCapitalGains">Do you have any significant capital gains: </label> [type=textarea|name=contact_significantCapitalGains|class=form-control |watermark=e.g. from stocks and shares, sale of business assets, sale of property] </div> <div class="form-group col-sm-6"> <label class="control-label" for="contact_TaxFiled"> Tax return for the fiscal year end 5th April 2015 filed:</label> [type=Select|name=contact_TaxFiled|class=form-control|items=:Yes; No; Other;] </div> <div class="form-group col-sm-6"> <label class="control-label" for="contact_UkResident"> Are you UK resident:</label> [type=Select|name=contact_UkResident|class=form-control|items=:Yes; No; Other;] </div> </div> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-default prev-step">Previous</button></li> <li><button type="button" class="btn btn-default next-step">Skip</button></li> <li><button type="button" class="btn btn-primary btn-info-full next-step"></button>continue</button></li> </ul> </div> <div class="tab-pane" role="tabpanel" id="complete1"> <div style="color:#fff; font-size:1.4em; margin-left:10px;"> <h1 class="text-center" font-size:1.8em;>Services</h1> We have summarised below some important requirements for Companies, Sole Traders and Individuals. Please read through them as they relate to the Services that we can provide that are listed on the next page. COMPANY ACCOUNTS Every company is required to file a set of 'Statutory Accounts' within 9 months of it's year end. In addition it has to pay any Corporation Tax 9 months and 1 day after it's year end and file a Corporation Tax Return (CT600) within 12 months of it's year end. If a company does not trade during it's financial year then it can file Dormant company accounts. All companies require a Registered Office to which all official correspondence is sent. They also have to submit an Annual Return each year to Companies House to confirm such things as the directors, company secretary and shareholders of the company. All directors of a company have to complete an annual P11D form relating to their expenses and benefits (unless an Annual Dispensation is on place). This has to be filed by the 6th July each year. SOLE TRADER ACCOUNTS AND PERSONAL TAX RETURNS Any director, sole trader or individual earning untaxed income has to complete an Annual Tax Return (SA100) for the fiscal tax year - 6th April to 5th April. This return has to be completed by 31st January the following year. PAYROLL Under the new Real Time Information (RTI) system all companies that make employment payments to directors or employees need to report monthly on the payments made XERO and RECEIPT BANK Xero (xero.com) is a powerful but easy to use on-line accounting package that can also link directly to your bank account so that all your bank transactions are taken directly into it. It has a system for generating sales invoices easily and, with a little set up can automate a lot of the standard reconciliation required in accounting. If you have a high volume of purchase invoices and expense receipts we also recommend Receipt Bank (receipt-bank.com) as this system takes scanned invoices and receipts and can be set to automatically post them into Xero for you. The beauty of both of these systems is that they store the images of all of your sales invoices and purchase invoices digitally against every transaction so you no longer need to store paper. They are also both mobile friendly and by subscribing through Lucrafts we can offer you a significant discount to the price on-line. Please click "CONTINUE' to choose the Services that you would like to talk to us about. </div> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-default prev-step">Previous</button></li> <li><button type="submit" class="btn btn-primary btn-info-full"></button>Submit</button></li> </ul> </div> </div> <div class="clearfix"></div> </div> </form> </div> </section> </div> </div>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://data.fabcrm.com/agents/3130/files/138080871be1424381286fe344f5b2d3.zip"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- CDN option: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> --> <!-- Bootstrap theme --> <link href="css/bootstrap-theme.min.css" rel="stylesheet"> <!-- CDN option: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> --> <script src="js/holder.js"></script> <!-- CDN option: <script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.6.0/holder.min.js/"></script> --> <script src="js/jquery-1.11.2.js"></script> <!-- CDN option: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> --> <script src="js/bootstrap.min.js"></script> <!-- CDN option: <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> --> <!---swiper cdn-----> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.7/css/swiper.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.7/css/swiper.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.7/js/swiper.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.7/js/swiper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.7/js/swiper.jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.7/js/swiper.jquery.min.js"></script> <style> .margin-top-20{ margin-top: 20px; } #lhd-logo { text-transform: uppercase; margin-top:3%; font-size: 350%; line-height: 78%; position: relative; left: -3px; } .fgec { font-family: FranklinGothicExtraCondensed, sans-serif; color:#fff; } #toolbar { position: fixed; top: 0; left: 0; background-color: transparent; color: #fff; height: 30px; width: 100%; min-width: 600px; z-index: 100; } .swiper-container { width: 1000px; height: 400px; } body{ background:url('http://data.fabcrm.com/agents/3168/files/ef40e13a79b84070a1d21893919d8cce.jpg'); background-size:100% 100%; background-attachment: fixed; background-repeat:no-repeat; font-family: 'Open Sans', sans-serif; padding-bottom: 40px; } .auth h1{ color:#fff!important; font-weight:300; font-family: 'Open Sans', sans-serif; } .auth h1 span{ font-size:21px; display:block; padding-top: 20px; } .auth .auth-box legend{ color:#fff; border:none; font-weight:300; font-size:24px; } .auth .auth-box{ background-color:#f1f1f1; margin:0 auto; border:1px solid rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.3); background: rgba(63, 63, 63, 0.5); margin-top:40px; -webkit-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.32); -moz-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.32); box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.32); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-transition: background 1s ease-in-out; -moz-transition: background 1s ease-in-out; -ms-transition: background 1s ease-in-out; -o-transition: background 1s ease-in-out; transition: background 1s ease-in-out; } @media(max-width:460px){ .auth .auth-box{ margin:0 10px; } } .auth .auth-box input::-webkit-input-placeholder { /* WebKit browsers */ color: #fff; font-weight:300; } .auth .auth-box input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #fff; font-weight:300; } .auth .auth-box input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #fff; font-weight:300; } .auth .auth-box input:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #fff; font-weight:300; } .auth span.input-group-addon, .input-group-btn button{ border:none; background: #fff!important; color:#000!important; } .auth form{ font-weight:300!important; } .auth form input[type="text"], .auth form input[type="password"], .auth form input[type="email"], .auth form input[type="search"]{ border:none; padding:10px 0 10px 0; background-color: rgba(255, 255, 255, 0)!important; background: rgba(255, 255, 255, 0); color:#fff; font-size:16px; border-bottom:1px dotted #fff; border-radius:0; box-shadow:none!important; height:auto; } .auth textarea{ background-color: rgba(255, 255, 255, 0)!important; color:#fff!important; } .auth input[type="file"] { color:#fff; } .auth form label{ color:#fff; font-size:21px; font-weight:300; } /*for radios & checkbox labels*/ .auth .radio label, .auth label.radio-inline, .auth .checkbox label, .auth label.checkbox-inline{ font-size: 14px; } .auth form .help-block{ color:#fff; } .auth form select{ background-color: rgba(255, 255, 255, 0)!important; background: rgba(255, 255, 255, 0); color:#fff!important; border-bottom:1px solid #fff!important; border-radius:0; box-shadow:none; } .auth form select option{ color:#000; } /*multiple select*/ .auth select[multiple] option, .auth select[size] { color:#fff!important; } /*Form buttons*/ .auth form .btn{ background:none; -webkit-transition: background 0.2s ease-in-out; -moz-transition: background 0.2s ease-in-out; -ms-transition: background 0.2s ease-in-out; -o-transition: background 0.2s ease-in-out; transition: background 0.2s ease-in-out; } .auth form .btn-default{ color:#fff; border-color:#fff; } .auth form .btn-default:hover{ background:rgba(225, 225, 225, 0.3); color:#fff; border-color:#fff; } .auth form .btn-primary:hover{ background:rgba(66, 139, 202, 0.3); } .auth form .btn-success:hover{ background:rgba(92, 184, 92, 0.3); } .auth form .btn-info :hover{ background:rgba(91, 192, 222, 0.3); } .auth form .btn-warning:hover{ background:rgba(240, 173, 78, 0.3); } .auth form .btn-danger:hover{ background:rgba(217, 83, 79, 0.3); } .auth form .btn-link{ border:none; color:#fff; padding-left:0; } .auth form .btn-link:hover{ background:none; } .auth label.label-floatlabel { font-weight: 300; font-size: 11px; color:#fff; left:0!important; top: 1px!important; } .wizard { margin: 20px auto; border: 1px solid rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.3); background: rgba(63, 63, 63, 0.5); } .wizard .nav-tabs { position: relative; margin: 40px auto; margin-bottom: 0; border-bottom-color: #e0e0e0; } .wizard > div.wizard-inner { position: relative; } .connecting-line { height: 2px; background: #e0e0e0; position: absolute; width: 80%; margin: 0 auto; left: 0; right: 0; top: 50%; z-index: 1; } .wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus { color: #555555; cursor: default; border: 0; border-bottom-color: transparent; } span.round-tab { width: 70px; height: 70px; line-height: 70px; display: inline-block; border-radius: 100px; background: #fff; border: 2px solid #e0e0e0; z-index: 2; position: absolute; left: 0; text-align: center; font-size: 25px; } span.round-tab i{ color:#555555; } .wizard li.active span.round-tab { background: #fff; border: 2px solid #5bc0de; } .wizard li.active span.round-tab i{ color: #5bc0de; } span.round-tab:hover { color: #333; border: 2px solid #333; } .wizard .nav-tabs > li { width: 16%; } .wizard li:after { content: " "; position: absolute; left: 46%; opacity: 0; margin: 0 auto; bottom: 0px; border: 5px solid transparent; border-bottom-color: #5bc0de; transition: 0.1s ease-in-out; } .wizard li.active:after { content: " "; position: absolute; left: 46%; opacity: 1; margin: 0 auto; bottom: 0px; border: 10px solid transparent; border-bottom-color: #5bc0de; } .wizard .nav-tabs > li a { width: 70px; height: 70px; margin: 20px auto; border-radius: 100%; padding: 0; } .wizard .nav-tabs > li a:hover { background: transparent; } .wizard .tab-pane { position: relative; padding-top: 50px; } .wizard h3 { margin-top: 0; } @media( max-width : 585px ) { .wizard { width: 90%; height: auto !important; } span.round-tab { font-size: 16px; width: 50px; height: 50px; line-height: 50px; } .wizard .nav-tabs > li a { width: 50px; height: 50px; line-height: 50px; } .wizard li.active:after { content: " "; position: absolute; left: 35%; } }
$(document).ready(function () { //Initialize tooltips $('.nav-tabs > li a[title]').tooltip(); //Wizard $('a[data-toggle="tab"]').on('show.bs.tab', function (e) { var $target = $(e.target); if ($target.parent().hasClass('disabled')) { return false; } }); $(".next-step").click(function (e) { var $active = $('.wizard .nav-tabs li.active'); $active.next().removeClass('disabled'); nextTab($active); }); $(".prev-step").click(function (e) { var $active = $('.wizard .nav-tabs li.active'); prevTab($active); }); }); function nextTab(elem) { $(elem).next().find('a[data-toggle="tab"]').click(); } function prevTab(elem) { $(elem).prev().find('a[data-toggle="tab"]').click(); }

Related: See More


Questions / Comments: