"Email shop form PL "
Bootstrap 3.0.3 Snippet by polo195pl

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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"> <div class="col-md-12"> <form> <div class="container" id="forWho"> <div class="row"> <div class="col-md-5"> <lebel>Dla kogo kołdra?</lebel> </div> <div class="col-md-7"> <lebel for="forChild">Dla dziecka</lebel> <input type="radio" name="whoKoldra" id="forChild" class="input For child"> <lebel for="forAdult">Dla dorosłych</lebel> <input type="radio" name="whoKoldra" id="forAdult" class="input For adult"> </div> <p class="alert-warning hidden" id="firtWarning">Wybierz dla kogo kołdra ma być przeznaczona</p> </div> </div> <div class="container" id="firstStep"> <div class="row"> <div class="col-md-12"> <button type="button" class="btn btn-success" id="step1" value="Dalej" onclick="stepFirst()">Dalej</button> </div> </div> </div> <div class="container hidden" id="forChildren"> <div class="row"> <div class="col-md-5"> <lebel class="lebel" for="heightChild">Wzrost dziecka</lebel> <lebel class="lebel" for="massChild">Waga dziecka</lebel> <lebel class="lebel" for="illChild">Schorzenie</lebel> </div> <div class="col-md-7"> <input type="number" id="heightChild" value="Wzrost dziecka" class="input age" minlength="40" maxlength="220" placeholder="120" required> <input type="number" id="massChild" value="Waga dziecka" class="input mass" minlength="0.1" maxlength="120" placeholder="45" required> <select id="illChild" value="Jaki rodzaj schorzenia ma dziecko?" class="select ill"> <option id="illChild1">Schorzenie 1</option> <option id="illChild2">Schorzenie 2</option> <option id="illChild3">Schorzenie 3</option> <option id="illChild4">Schorzenie 4</option> <option id="illChild5">Inne</option> </select> </div> </div> </div> <div class="container hidden" id="stepSecond"> <div class="row"> <div class="col-md-6"> <button type="button" onclick="stepSecondBack()" class="btn btn-primary">Wstecz</button> </div> <div class="col-md-6"> <button type="button" class="btn btn-success" onclick="stepSecondNext()">Dalej</button> </div> </div> </div> <div class="container hidden" id="forAdults"> <div class="row"> <div class="col-md-5"> <lebel class="lebel" for="heightAdult">Wzrost dorosłego</lebel> <lebel class="lebel" for="massAdult">Waga dorsłego</lebel> <lebel class="lebel" for="illAdult">Schorzenie</lebel> </div> <div class="col-md-7"> <input type="number" id="heightAdult" value="Wzrost dorosłego" class="input height" minlength="120" maxlength="350" placeholder="160" required> <input type="number" id="massAdult" value="Waga dorosłego" class="input mass" minlength="40" maxlength="200" placeholder="65" required /> <select id="illAdult" value="Jaki rodzaj schorzenia ma dziecko?" class="select ill"> <option id="illAdult1">Schorzenie 1</option> <option id="illAdult2">Schorzenie 2</option> <option id="illAdult3">Schorzenie 3</option> <option id="illAdult4">Schorzenie 4</option> <option id="illAdult5">Inne</option> </select> </div> </div> </div> <div class="container hidden" id="forWhatMain"> <div class="row"> <div class="col-md-5"> <lebel>Do czego chcesz stosować kołdrę?</lebel> </div> <div class="col-md-7"> <lebel for="forTerapy">Do terapii</lebel> <input type="radio" name="forWhat" id="forTerapy" value="Do terapii" class="input For child"> <lebel for="forDream">Do snu</lebel> <input type="radio" name="forWhat" id="forDream" value="Do snu" class="input For adult"> </div> </div> </div> <div class="container hidden" id="forWhatButton"> <div class="row"> <div class="col-md-6"> <button type="button" class="btn btn-primary" value="Wstecz" id="forWhatBackButton" onclick="forwhatBack()">Wstecz</button> </div> <div class="col-md-6"> <button class="btn btn-success" id="forWhatNextButton" onclick="forwhatNext()" value="Dalej">Dalej</button> </div> </div> </div> <div class="container hidden" id="sendWhere"> <div class="row"> <div class="col-md-12"> <p>Informacje do wysyłki</p> </div> </div> </div> <div class="container hidden" id="sendWhereButton"> <div class="row"> <div class="col-md-6"> <button type="button" class="btn btn-primary" id="sendWhereButtonBack" onclick="sendWhereBack()">Wstecz</button> </div> <div class="col-md-6"> <button type="button" class="btn btn-success" id="sendWhereButtonNext" onclick="sendWhereNext()">Dalej</button> </div> </div> </div> <div class="container hidden" id="sendWhereMain"> <div class="row"> <div class="col-md-6"> <lebel>Imię</lebel> <input type="text" placeholder="Jan" required class="input name" id="name"> </div> <div class="col-md-6"> <lebeL>Nazwisko</lebeL> <input type="text" placeholder="Kowalski" required class="input surname" id="surname"> </div> </div> </div> <div class="container hidden" id="sendWhereMainButton"> <div class="row"> <div class="col-md-6"> <button type="button" class="btn btn-primary" id="sendWhereMainButtonBack" onclick="sendWhereMainBack()">Wstecz</button> </div> <div class="col-md-6"> <button type="button" class="btn btn-success" id="sendWhereMainButtonNext" onclick="sendWhereMainNext()">Dalej</button> </div> </div> </div> <div class="container hidden" id="sendWhereMain2"> <div class="row"> <div class="col-md-6"> <lebel>Ulica</lebel> <input type="text" placeholder="al. Kowalska 5" required class="input street" id="street"> </div> <div class="col-md-6"> <lebel>Nr mieszkania</lebel> <input type="text" placeholder="5" class="input flatnumber" id="flatnumber"> </div> </div> </div> <div class="container hidden" id="sendWhereMain2Button"> <div class="row"> <div class="col-md-6"> <button type="button" class="btn btn-primary" id="sendWhereMain2ButtonBack" onclick="sendWhereMain2Back()">Wstecz</button> </div> <div class="col-md-6"> <button type="button" class="btn btn-success" id="sendWhereMain2ButtonNext" onclick="sendWhereMain2Next()">Dalej</button> </div> </div> </div> <div class="container hidden" id="sendWhereMain3"> <div class="row"> <div class="col-md-6"> <lebel>Kod pocztowy</lebel> <input type="number" minlength="5" maxlength="5" placeholder="20576" required="" class="input streetCode" id="streetCode"> </div> <div class="col-md-6"> <lebel>Kraj</lebel> <input type="text" required placeholder="Polska" class="input country" id="country"> </div> </div> </div> <div class="container hidden" id="sendWhereMain3Button"> <div class="row"> <div class="col-md-6"> <button type="button" class="btn btn-primary" id="sendWhereMain3ButtonBack" onclick="sendWhereMain3Back()">Wstecz</button> </div> <div class="col-md-6"> <button type="button" class="btn btn-success" id="sendWhereMain3ButtonNext" onclick="sendWhereMain3Next()">Dalej</button> </div> </div> </div> <div class="container hidden" id="invoiceQuestion"> <div class="row"> <div class="col-md-5"> <lebel>Czy chcesz otrzymać fakturę?</lebel> </div> <div class="col-md-7"> <lebel for="invoiceYes">Tak</lebel> <input type="radio" name="invoice" class="input invoice" id="invoiceYes"> <lebel for="invoiceNo">Nie</lebel> <input type="radio" name="invoice" class="input invoice" id="invoiceNo"> </div> </div> </div> <div class="container hidden" id="invoiceQusetionButton"> <div class="row"> <div class="col-md-6"> <button type="button" class="btn btn-primary" id="invoiceQusetionButtonBack" onclick="invoiceQusetionBack()">Wstecz</button> </div> <div class="col-md-6"> <button type="button" class="btn btn-success" id="invoiceQusetionButtonNext" onclick="invoiceQusetionNext()">Dalej</button> </div> </div> </div> <div class="container hidden" id="invoiceData"> <div class="row"> <div class="col-md-6"> <lebel>Nazwa firmy</lebel> <input type="text" class="input ltd" id="ltd" placeholder="Double Sp. z o.o."> </div> <div class="col-md-6"> <lebel>Numer NIP</lebel> <input type="number" class="input vat" id="vat" minlength="11" maxlength="11"> </div> </div> </div> <div class="container hidden" id="invoiceDataButton"> <div class="row"> <div class="col-md-6"> <button type="button" class="btn btn-primary" id="invoiceDataButtonBack" onclick="invoiceDataBack()">Wstecz</button> </div> <div class="col-md-6"> <button type="button" class="btn btn-success" id="invoiceDataButtonNext" onclick="invoiceDataNext()">Dalej</button> </div> </div> </div> <div class="container hidden" id="invoiceAdressQuestion"> <div class="row"> <div class="col-md-5"> <lebel>Czy adres rozliczeniowy jest taki sam jak adres dostawy?</lebel> </div> <div class="col-md-7"> <lebel for="invoiceMatchYes">Tak</lebel> <input type="radio" class="input invoiceMatch" id="invoiceMatchYes" name="invoiceMatch"> <lebel for="invoiceMatchNo">Nie</lebel> <input type="radio" class="input invoiceMatch" id="invoiceMatchNo" name="invoiceMatch"> </div> </div> </div> <div class="container hidden" id="invoiceAdressQuestionButton"> <div class="row"> <div class="col-md-6"> <button type="button" class="btn btn-primary" id="invoiceAdressQuestionButtonBack" onclick="invoiceAdressQuestionBack()">Wstecz</button> </div> <div class="col-md-6"> <button type="button" class="btn btn-success" id="invoiceAdressQuestionButtonNext" onclick="invoiceAdressQuestionNext()">Dalej</button> </div> </div> </div> <div class="container hidden" id="invoiceAdressData"> <div class="row"> <div class="col-md-6"> <lebel>Ulica</lebel> <input type="text" placeholder="al. Kowalska 5" required class="input street" id="street2"> </div> <div class="col-md-6"> <lebel>Nr mieszkania</lebel> <input type="text" placeholder="5" class="input flatnumber" id="flatnumber2"> </div> </div> </div> <div class="container hidden" id="InvocieAdressDataButton"> <div class="row"> <div class="col-md-6"> <button type="button" class="btn btn-primary" id="InvocieAdressDataButtonBack" onclick="InvocieAdressDataBack()">Wstecz</button> </div> <div class="col-md-6"> <button type="button" class="btn btn-success" id="InvocieAdressDataButtonNext" onclick="InvocieAdressDataNext()">Dalej</button> </div> </div> </div> <div class="container hidden" id="invoiceAdressData2"> <div class="row"> <div class="col-md-6"> <lebel>Kod pocztowy</lebel> <input type="number" minlength="5" maxlength="5" placeholder="20576" required="" class="input streetCode" id="streetCode2"> </div> <div class="col-md-6"> <lebel>Kraj</lebel> <input type="text" required placeholder="Polska" class="input country" id="country2"> </div> </div> </div> <div class="container hidden" id="InvocieAdressData2Button"> <div class="row"> <div class="col-md-6"> <button type="button" class="btn btn-primary" id="InvocieAdressData2ButtonBack" onclick="InvocieAdressData2Back()">Wstecz</button> </div> <div class="col-md-6"> <button type="button" class="btn btn-success" id="InvocieAdressData2ButtonNext" onclick="InvocieAdressData2Next()">Dalej</button> </div> </div> </div> </form> </div>
body { font-color: black; font-size: 16px; } .lebel { display: block; margin-top: 10px; } .age, .mass, .height { display: block; } .container:nth-child(1){ margin-top: 20px; } .input { margin-top: 5px; margin-bottom: 5px; } #dalej { margin-top: 20px; margin-left: 25%; } #dalej1 { width: 200px !important; }
function stepFirst() { var whoKoldra = document.getElementsByName("whoKoldra"); var ischecked_method = false; for (var i = 0; i < whoKoldra.length; i++) { if (whoKoldra[i].checked) { ischecked_method = true; break; } } if (!ischecked_method) { //Dla kogo musi byc wybrane var element = document.getElementById("firtWarning"); element.classList.remove("hidden"); } if (document.getElementById('forChild').checked) { var element = document.getElementById("forChildren"); element.classList.remove("hidden"); var element = document.getElementById("forWho"); element.classList.add("hidden"); var element = document.getElementById("firstStep"); element.classList.add("hidden"); var element = document.getElementById("stepSecond"); element.classList.remove("hidden"); //Dla dziecka } else if (document.getElementById('forAdult').checked) { var element = document.getElementById("forAdults"); element.classList.remove("hidden"); var element = document.getElementById("forWho"); element.classList.add("hidden"); //Dla doroslych var element = document.getElementById("firstStep"); element.classList.add("hidden"); var element = document.getElementById("stepSecond"); element.classList.remove("hidden"); } } function stepSecondBack() { var element = document.getElementById("forWho"); element.classList.remove("hidden"); var element = document.getElementById("firstStep"); element.classList.remove("hidden"); var element = document.getElementById("forChildren"); element.classList.add("hidden"); var element = document.getElementById("stepSecond"); element.classList.add("hidden"); }

Related: See More


Questions / Comments: