"ORDER FORM"
Bootstrap 3.3.0 Snippet by ntd187

<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 id="main-wrap"> <div class="container" style="width:640px!important;max-width:100%!important;"> <div id="wsite-content" class="wsite-selements wsite-not-footer"> <div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center"> <a href="https://docs.google.com/forms/d/1mHVKEsHU582GXpz4uti8alJsRFu67Gb643YX-1w0rik/viewform" target="_blank"><img src="https://googledrive.com/host/0BxpJzj8xk6bieWd5TV9RVktHZmc/order-online-btn-frontpage.jpg" alt="mua effortless english online" style="width:auto;max-width:100%"></a> <div style="display:block;font-size:90%">Quý khách vui lòng điền đầy đủ thông tin bên dưới, các thông tin màu đỏ là bắt buộc:</div> </div> <div id="302604206391460689" align="left" style="width: 100%; overflow-y: hidden;" class="wcustomhtml"> <style type="text/css"> .required { border-color: #FF9D9D; } .bg-primary { background-color: #DB2828; margin: 0 15px; max-width: 942px; } .row h2 { margin: 7px 0; } .help-block { font-size: 0.8em; } .input-group-addon.primary { color: rgb(255, 255, 255); background-color: rgb(50, 118, 177); border-color: rgb(40, 94, 142); } .input-group-addon.success { color: rgb(255, 255, 255); background-color: rgb(92, 184, 92); border-color: rgb(76, 174, 76); } .input-group-addon.info { color: rgb(255, 255, 255); background-color: rgb(57, 179, 215); border-color: rgb(38, 154, 188); } .input-group-addon.warning { color: rgb(255, 255, 255); background-color: rgb(240, 173, 78); border-color: rgb(238, 162, 54); } .input-group-addon.danger { color: rgb(255, 255, 255); background-color: rgb(217, 83, 79); border-color: rgb(212, 63, 58); } .btn.eefc span.glyphicon { opacity: 0.1; } .btn.active.eefc span.glyphicon { opacity: 1; } .price { min-width:110px!important; } .input-group .name { display: inline-block; min-width: 150px; text-align: left; margin-left: 5px; } .input-group .bonus { display: inline-block; min-width: 150px; text-align: left; margin-left: 5px; } </style> <script type="text/javascript"> var unsaved = false; $(":input").change(function() { unsaved = true; }); function unloadPage() { if (unsaved) { return "Nếu bạn thoát khỏi trang này bạn sẽ mất hết những thông tin mà bạn đã nhập"; } } window.onbeforeunload = unloadPage; var submitted = false; function sendForum() { if (submitted) { $('#ss-form').find('button[type=submit]').button('loading').prop('disabled', true); setTimeout(function(){ window.parent.location.href = 'http://www.effortlessenglishclub.vn/thank-you.html'; }, 5000); } } </script> <iframe name="hidden_iframe" id="hidden_iframe" style="width:100%;height:1px;display:none;" onload="sendForum()"></iframe> <form role="form" class="form-horizontal" action="https://docs.google.com/forms/d/1G1keY3YbKDX2kZevaciAJYCj4FzpxtvWyGpx9jJUeMo/formResponse" method="POST" id="ss-form" target="hidden_iframe" onsubmit="submitted=true;" style="margin:0 auto;overflow:hidden;width:100%;max-width:942px;padding:0;"> <fieldset> <legend style="display:none">Form Name</legend> <div class="form-group"> <div class="row"> <h2 id="step1" class="text-center">Bước 1: Chọn mua sản phẩm</h2> </div> </div> <div class="form-group"> <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1"> <div class="input-group spinner"> <div class="input-group-btn"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default eefc" for="dvdcourse"> <input style="" type="checkbox" name="entry.662069527" id="dvdcourse" value="DVD COURSE" class="effortlessenglish"> <span class="glyphicon glyphicon-ok"></span> <strong class="name">DVD COURSES</strong> </label> </div> </div> <input type="text" name="entry.662069527" class="form-control dvdcourse" value="0" min="0" max="3" style="text-align: center;"disabled> <div class="input-group-btn-vertical"> <button class="btn btn-default dvdcourse" type="button" disabled><i class="fa fa-caret-up"></i></button> <button class="btn btn-default dvdcourse" type="button" disabled><i class="fa fa-caret-down"></i></button> </div> <span class="input-group-addon default price"> <strong>250.000 VNĐ</strong> </span> </div> <span class="help-block" style="display:block;">Đĩa DVD nguyên bản nội dung gồm audio-video-ebook và không bao gồm sách <a href="http://www.effortlessenglishclub.vn/shop.html" target="_blank"> <span class="glyphicon glyphicon-new-window"></span> </a> </span> <div class="input-group spinner"> <div class="input-group-btn"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-warning eefc" for="onlinecourse"> <input style="" type="checkbox" name="entry.1143022861" id="onlinecourse" value="ONLINE COURSE" class="effortlessenglish"> <span class="glyphicon glyphicon-ok"></span> <strong class="name">ONLINE COURSE</strong> </label> </div> </div> <input type="text" name="entry.1143022861" class="form-control onlinecourse" value="0" min="0" max="3"style="text-align: center;" disabled> <div class="input-group-btn-vertical"> <button class="btn btn-default onlinecourse" type="button" disabled><i class="fa fa-caret-up"></i></button> <button class="btn btn-default onlinecourse" type="button" disabled><i class="fa fa-caret-down"></i></button> </div> <span class="input-group-addon default price"> <strong>480.000 VNĐ</strong> </span> </div> <span class="help-block" style="display:block;">Học trực tuyến trên website, dễ dàng, nhanh chóng, tiện dụng, mọi lúc, mọi nơi <a href="http://www.effortlessenglishclub.vn/shop.html" target="_blank"> <span class="glyphicon glyphicon-new-window"></span> </a> </span> <div class="input-group spinner"> <div class="input-group-btn"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary eefc" for="studentcourse"> <input style="" type="checkbox" name="entry.662069527" id="studentcourse" value="STUDENT COURSE" class="effortlessenglish"> <span class="glyphicon glyphicon-ok"></span> <strong class="name">STUDENT COURSE</strong> </label> </div> </div> <input type="text" name="entry.662069527" class="form-control studentcourse" value="0" min="0" max="3" style="text-align: center;" disabled> <div class="input-group-btn-vertical"> <button class="btn btn-default studentcourse" type="button" disabled><i class="fa fa-caret-up"></i></button> <button class="btn btn-default studentcourse" type="button" disabled><i class="fa fa-caret-down"></i></button> </div> <span class="input-group-addon default price"> <strong>370.000 VNĐ</strong> </span> </div> <span class="help-block" style="display:block;">Chương trình học 06 tháng: 40 topics + 5 bonus (đã bao gồm sách & đĩa) <a href="http://www.effortlessenglishclub.vn/shop.html" target="_blank"> <span class="glyphicon glyphicon-new-window"></span> </a> </span> <div class="input-group spinner"> <div class="input-group-btn"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-danger eefc" for="mastercourse"> <input style="" type="checkbox" name="entry.662069527" id="mastercourse" value="MASTER COURSE" class="effortlessenglish"> <span class="glyphicon glyphicon-ok"></span> <strong class="name">MASTER COURSE</strong> </label> </div> </div> <input type="text" name="entry.662069527" class="form-control mastercourse" value="0" min="0" max="3" style="text-align: center;" disabled> <div class="input-group-btn-vertical"> <button class="btn btn-default mastercourse" type="button" disabled><i class="fa fa-caret-up"></i></button> <button class="btn btn-default mastercourse" type="button" disabled><i class="fa fa-caret-down"></i></button> </div> <span class="input-group-addon default price"> <strong>590.000 VNĐ</strong> </span> </div> <span class="help-block" style="display:block;">Chương trình học 24 tháng: 100 topics + 10 bonus (đã bao gồm sách & đĩa) <a href="http://www.effortlessenglishclub.vn/shop.html" target="_blank"> <span class="glyphicon glyphicon-new-window"></span> </a> </span> <div class="input-group spinner"> <div class="input-group-btn"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-success eefc" for="studybook"> <input style="" type="checkbox" name="entry.1143022861" id="studybook" value="STUDY BOOK" class="effortlessenglish"> <span class="glyphicon glyphicon-ok"></span> <strong class="name">SÁCH LUYỆN NÓI</strong> </label> </div> </div> <input type="text" name="entry.1143022861" class="form-control studybook" value="0" min="0" max="3" style="text-align: center;" disabled> <div class="input-group-btn-vertical"> <button class="btn btn-default studybook" type="button" disabled><i class="fa fa-caret-up"></i></button> <button class="btn btn-default studybook" type="button" disabled><i class="fa fa-caret-down"></i></button> </div> <span class="input-group-addon default price"> <strong>90.000 VNĐ</strong> </span> </div> <span class="help-block" style="display:block;">Sách tham khảo hướng dẫn học Effortless English bằng tiếng Việt. <a href="http://www.effortlessenglishclub.vn/study-book.html" target="_blank"> <span class="glyphicon glyphicon-new-window"></span> </a> </span> </div> </div> <script> /*$(document).ready(function() { $('input[type=radio][name=\'entry.662069527\']').click(function() { console.log($(this).val()); var related_class = $(this).attr('id'); $('.' + related_class).prop('disabled', true); $('.' + related_class).prop('checked', false); $('input:checked[type=radio][name=\'entry.662069527\']').each(function() { var other_class = $(this).attr('id'); $('.' + other_class).prop('disabled', false); }); }); });*/ $(function(){ $('.spinner .btn:first-of-type').on('click', function() { var btn = $(this); var input = btn.closest('.spinner').find('input.form-control'); if (input.attr('max') == undefined || parseInt(input.val()) < parseInt(input.attr('max'))) { input.val(parseInt(input.val(), 10) + 1); } else { btn.next("disabled", true); } }); $('.spinner .btn:last-of-type').on('click', function() { var btn = $(this); var input = btn.closest('.spinner').find('input.form-control'); if (input.attr('min') == undefined || parseInt(input.val()) > parseInt(input.attr('min'))) { input.val(parseInt(input.val(), 10) - 1); } else { btn.prev("disabled", true); } }); }) $(document).ready(function() { $('input[type=checkbox].effortlessenglish').change(function() { var related_class = $(this).attr('id'); $('input[type=text].' + related_class).prop('disabled', true); $('button.' + related_class).prop('disabled', true); $('input[type=text].' + related_class).val('0'); $('input:checked[type=checkbox].effortlessenglish').each(function() { var other_class = $(this).attr('id'); $('input[type=text].' + other_class).prop('disabled', false); $('button.' + related_class).prop('disabled', false); $('input[type=text].' + other_class).val('1'); }); }); }); </script> <div class="form-group"> <h4 class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 text-center text-uppercase" style="margin-bottom:10px;">Chương trình miễn phí</h4> <div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2"> <div class="input-group input-group-sm"> <select id="entry.1143022861-1" name="entry.1143022861" class="form-control" style="margin-bottom:5px;"> <option></option> <option value="QT1">Tặng kèm Pimsleur English khi mua “DVD Course”</option> <option value="QT2">Tặng kèm 5 Extra Bonus khi mua “Student Course”</option> <option value="QT3">Tặng kèm 10 Extra Bonus khi mua “Master Course”</option> <option value="QT4">Tặng kèm 10 Extra Bonus khi mua “Online Course”</option> </select> <span class="help-block"><strong>Lưu ý:</strong> Các chương trình hỗ trợ miễn phí này đã được tích hợp sẵn trong dvd áp dụng đến hết 31/12/2015</span> </div> </div> </div> <div class="form-group"> <h4 class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 text-center text-uppercase" style="margin-bottom:10px;">Chương trình khuyến mãi</h4> <div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2"> <div class="input-group input-group-sm"> <select id="entry.1143022861-2" name="entry.1143022861" class="form-control" style="margin-bottom:5px;"> <option></option> <option value="KN1">Khuyến mãi 1</option> <option value="KN2">Khuyến mãi 2</option> <option value="KN3">Khuyến mãi 3</option> <option value="KN4">Khuyến mãi 4</option> </select> <span class="help-block" style="margin-top:5px;"><strong>Lưu ý:</strong> Các gói khuyến mãi dưới đây chỉ áp dụng khi mua từ 2 sản phẩm chính trở lên và được áp dụng từ 18/09/2015 và không có thời hạn kết thúc.</span> <span class="help-block"> <strong>Khuyến mãi 1:</strong> Giảm giá 5% khi mua từ 2 COURSE trở lên.</span> <span class="help-block"> <strong>Khuyến mãi 2:</strong> Giảm giá 10% khi mua từ 3 COURSE chính trở lên.</span> <span class="help-block"> <strong>Khuyến mãi 3:</strong> Tặng kèm “Sách Luyện Nói Tiếng Anh Như Người Bản Ngữ”, khi mua sản phẩm “Student Course” và “Master Course” cùng một lúc. </span> <span class="help-block"> <strong>Khuyến mãi 4:</strong> Tặng kèm “Sách Luyện Nói Tiếng Anh Như Người Bản Ngữ”, khi mua sản phẩm “DVD Course” và “Online Course” cùng một lúc. </span> </div> </div> </div> <div class="form-group"> <div class="row"> <h2 id="step2" class="text-center">Bước 2: Thông tin khách hàng</h2> </div> </div> <div class="form-group"> <label class="col-md-3 col-md-offset-1 col-sm-3 col-sm-offset-1 control-label" for="entry.name">Họ tên</label> <div class="col-md-6 col-sm-6"> <div class="input-group input-group-sm"> <input id="entry.name" name="entry.1681390735" type="text" placeholder="" class="form-control input-md" required="" playholder=""> <span class="input-group-addon danger checker"> <span class="glyphicon glyphicon-remove"></span> </span> </div> </div> </div> <div class="form-group"> <label class="col-md-3 col-md-offset-1 col-sm-3 col-sm-offset-1 control-label" for="entry.birth">Năm sinh</label> <div class="col-md-3 col-sm-3"> <div class="input-group input-group-sm"> <input id="entry.birth" name="entry.843970683" type="text" placeholder="" class="form-control input-md" maxlength="4" required=""> <span class="input-group-addon danger checker"> <span class="glyphicon glyphicon-remove"></span> </span> </div> </div> </div> <div class="form-group"> <label class="col-md-3 col-md-offset-1 col-sm-3 col-sm-offset-1 control-label" for="myjob">Nghề nghiệp</label> <div class="col-md-6 col-sm-6"> <div class="input-group input-group-sm"> <select id="myjob" name="entry.489823770" class="form-control" required> <option></option> <option value="Sinh viên / Học sinh">Sinh viên / Học sinh</option> <option value="Nhân viên văn phòng">Nhân viên văn phòng</option> <option value="Công nhân xí nghiệp">Công nhân xí nghiệp</option> <option value="Cán bộ / công chức">Cán bộ công chức</option> <option value="Chuyên viên / Kỹ sư">Chuyên viên / Kỹ sư</option> <option value="Xây dựng / Kiến trúc">Xây dựng / Kiến trúc</option> <option value="Sư phạm / Giáo viên / Giảng viên">Sư phạm / Giáo viên / Giảng viên</option> <option value="Du lịch / Nhà hàng / Khách sạn">Du lịch / Nhà hàng / Khách sạn</option> <option value="Chăm sóc sức khỏe / Dịch vụ y tế">Chăm sóc sức khỏe / Thẩm mỹ</option> <option value="Biên dịch / Thông dịch">Biên dịch / Thông dịch</option> <option value="Quảng cáo / Truyền thông">Quảng cáo / Truyền thông</option> <option value="Chứng khoán / Bất động sản">Chứng khoán / Bất động sản</option> <option value="Tài chính / Ngân hàng">Tài chính / Ngân hàng</option> <option value="Kế toán / Kiểm toán">Kế toán / Kiểm toán</option> <option value="Luật sư">Tư vấn / Luật sư</option> <option value="Giám đốc / Chủ doanh nghiệp">Giám đốc / Chủ doanh nghiệp</option> <option value="Kinh doanh tự do">Kinh doanh tự do</option> </select> <span class="input-group-addon danger checker"> <span class="glyphicon glyphicon-remove"></span> </span> </div> </div> </div> <div class="form-group"> <label class="col-md-3 col-md-offset-1 col-sm-3 col-sm-offset-1 control-label" for="entry.company">Công ty</label> <div class="col-md-6 col-sm-6"> <div class="input-group input-group-sm"> <input id="entry.company" name="entry.1192396706" type="text" placeholder="" class="form-control input-md"> <span class="input-group-addon info"> <span class="glyphicon glyphicon-asterisk"></span> </span> </div> </div> </div> <div class="form-group"> <label class="col-md-3 col-md-offset-1 col-sm-3 col-sm-offset-1 control-label" for="entry.email">E-mail</label> <div class="col-md-6 col-sm-6"> <div class="input-group input-group-sm"> <span class="input-group-addon"> <strong>@</strong> </span> <input id="entry.email" name="entry.778309582" type="text" placeholder="" class="form-control input-md" required=""> <span class="input-group-addon danger checker"> <span class="glyphicon glyphicon-remove"></span> </span> </div> </div> </div> <div class="form-group"> <label class="col-md-3 col-md-offset-1 col-sm-3 col-sm-offset-1 control-label" for="entry.mobilephone">Điện thoại</label> <div class="col-md-6 col-sm-6"> <div class="input-group input-group-sm"> <span class="input-group-addon"> <span class="glyphicon glyphicon-phone"></span> </span> <input id="entry.mobilephone" name="entry.632133000" type="text" placeholder="số di động chính" class="form-control input-md" required="" maxlength="15"> <span class="input-group-addon danger checker"> <span class="glyphicon glyphicon-remove"></span> </span> </div> </div> </div> <div class="form-group"> <label class="col-md-3 col-md-offset-1 col-sm-3 col-sm-offset-1 control-label" for="entry.mobilephone2">Điện thoại</label> <div class="col-md-6 col-sm-6"> <div class="input-group input-group-sm"> <span class="input-group-addon"> <span class="glyphicon glyphicon-phone"></span> </span> <input id="entry.mobilephone2" name="entry.632133000" type="text" placeholder="số di động khác" class="form-control input-md" maxlength="15"> <span class="input-group-addon info checker"> <span class="glyphicon glyphicon-asterisk"></span> </span> </div> </div> </div> <div class="form-group"> <label class="col-md-3 col-md-offset-1 col-sm-3 col-sm-offset-1 control-label" for="entry.telephone">Điện thoại</label> <div class="col-md-6 col-sm-6"> <div class="input-group input-group-sm"> <span class="input-group-addon"> <span class="glyphicon glyphicon-phone-alt"></span> </span> <input id="entry.telephone" name="entry.632133000" type="text" placeholder="số máy bàn" class="form-control input-md" maxlength="15"> <span class="input-group-addon info checker"> <span class="glyphicon glyphicon-asterisk"></span> </span> </div> </div> </div> <div class="form-group"> <div class="row"> <h2 id="step3" class="text-center">Bước 3: Hình thức giao hàng</h2> </div> <div class="col-md-12"> <span class="help-block"></span> </div> </div> <div class="form-group"> <label class="col-md-3 col-md-offset-1 col-sm-3 col-sm-offset-1 control-label" for="entry.provinces">Tỉnh / Thành</label> <div class="col-md-6 col-sm-6"> <div class="input-group input-group-sm"> <select id="entry.provinces" name="entry.35251422" class="form-control" required> <option></option> <option value="Hồ Chí Minh">Hồ Chí Minh</option> <option value="Hà Nội">Hà Nội</option> <option value="An Giang">An Giang</option> <option value="Bà Rịa - Vũng Tàu">Bà Rịa - Vũng Tàu</option> <option value="Bạc Liêu">Bạc Liêu</option> <option value="Bắc Giang">Bắc Giang</option> <option value="Bắc Kạn">Bắc Kạn</option> <option value="Bắc Ninh">Bắc Ninh</option> <option value="Bến Tre">Bến Tre</option> <option value="Bình Dương">Bình Dương</option> <option value="Bình Định">Bình Định</option> <option value="Bình Phước">Bình Phước</option> <option value="Bình Thuận">Bình Thuận</option> <option value="Cà Mau">Cà Mau</option> <option value="Cao Bằng">Cao Bằng</option> <option value="Cần Thơ">Cần Thơ</option> <option value="Đà Nẵng">Đà Nẵng</option> <option value="Đắk Lắk">Đắk Lắk</option> <option value="Đắk Nông">Đắk Nông</option> <option value="Điện Biên">Điện Biên</option> <option value="Đồng Nai">Đồng Nai</option> <option value="Đồng Tháp">Đồng Tháp</option> <option value="Gia Lai">Gia Lai</option> <option value="Hà Giang">Hà Giang</option> <option value="Hà Nam">Hà Nam</option> <option value="Hà Tĩnh">Hà Tĩnh</option> <option value="Hải Dương">Hải Dương</option> <option value="Hải Phòng">Hải Phòng</option> <option value="Hậu Giang">Hậu Giang</option> <option value="Hòa Bình">Hòa Bình</option> <option value="Hưng Yên">Hưng Yên</option> <option value="Khánh Hòa">Khánh Hòa</option> <option value="Kiên Giang">Kiên Giang</option> <option value="Kon Tum">Kon Tum</option> <option value="Lai Châu">Lai Châu</option> <option value="Lạng Sơn">Lạng Sơn</option> <option value="Lào Cai">Lào Cai</option> <option value="Lâm Đồng">Lâm Đồng</option> <option value="Long An">Long An</option> <option value="Nam Định">Nam Định</option> <option value="Nghệ An">Nghệ An</option> <option value="Ninh Bình">Ninh Bình</option> <option value="Ninh Thuận">Ninh Thuận</option> <option value="Phú Thọ">Phú Thọ</option> <option value="Phú Yên">Phú Yên</option> <option value="Quảng Bình">Quảng Bình</option> <option value="Quảng Nam">Quảng Nam</option> <option value="Quảng Ngãi">Quảng Ngãi</option> <option value="Quảng Ninh">Quảng Ninh</option> <option value="Quảng Trị">Quảng Trị</option> <option value="Sóc Trăng">Sóc Trăng</option> <option value="Sơn La">Sơn La</option> <option value="Tây Ninh">Tây Ninh</option> <option value="Thái Bình">Thái Bình</option> <option value="Thái Nguyên">Thái Nguyên</option> <option value="Thanh Hóa">Thanh Hóa</option> <option value="Thừa Thiên Huế">Thừa Thiên Huế</option> <option value="Tiền Giang">Tiền Giang</option> <option value="Trà Vinh">Trà Vinh</option> <option value="Tuyên Quang">Tuyên Quang</option> <option value="Vĩnh Long">Vĩnh Long</option> <option value="Vĩnh Phúc">Vĩnh Phúc</option> <option value="Yên Bái">Yên Bái</option> </select> <span class="input-group-addon danger checker"> <span class="glyphicon glyphicon-remove"></span> </span> </div> </div> </div> <div class="form-group"> <label class="col-md-3 col-md-offset-1 col-sm-3 col-sm-offset-1 control-label" for="entry.homeaddress">Địa chỉ nhà riêng</label> <div class="col-md-6 col-sm-6"> <div class="input-group input-group-sm"> <textarea class="form-control" id="entry.homeaddress" name="entry.408760683" rows="5" placeholder="nhận hàng tại nhà riêng" style="height:80px;"></textarea> <span class="input-group-addon info checker"> <span class="glyphicon glyphicon-asterisk"></span> </span> </div> <span class="help-block">Trường hợp bạn hay đi vắng, hãy nhập thêm họ tên và số điện thoại của người nhận hộ (bạn bè, người thân).</span> </div> </div> <div class="form-group"> <label class="col-md-3 col-md-offset-1 col-sm-3 col-sm-offset-1 control-label" for="entry.workingaddress">Địa chỉ công tác</label> <div class="col-md-6 col-sm-6"> <div class="input-group input-group-sm"> <textarea class="form-control" id="entry.workingaddress" name="entry.408760683" rows="5" placeholder="nhận hàng tại nơi công tác" style="height:80px;"></textarea> <span class="input-group-addon info checker"> <span class="glyphicon glyphicon-asterisk"></span> </span> </div> <span class="help-block">Trường hợp bạn hay đi vắng, hãy nhập thêm họ tên và số điện thoại của người nhận hộ (bạn bè, đồng nghiệp).</span> </div> </div> <div class="form-group"> <label class="col-md-3 col-md-offset-1 col-sm-3 col-sm-offset-1 control-label" for="entry.shipping">Giao hàng miễn phí</label> <div class="col-md-6 col-sm-6"> <div class="input-group input-group-sm"> <select id="entry.shipping" name="entry.886174939" class="form-control" required> <option></option> <option value="GHTP">Tp.HCM: giao nhanh trong ngày hoặc ngày hôm sau</option> <option value="VNPT">Khu vực khác: Thanh toán khi nhận hàng (3-7 ngày)</option> <option value="BANK">Khu vực khác: Chuyển khoản trước nhận hàng sau (1-2 ngày)</option> </select> <span class="input-group-addon danger checker"> <span class="glyphicon glyphicon-remove"></span> </span> </div> </div> </div> <div class="form-group"> <label class="col-md-3 col-md-offset-1 col-sm-3 col-sm-offset-1 control-label">Thời gian giao hàng</label> <div class="col-md-6 col-sm-6"> <div class="input-group input-group-sm"> <p class="form-control-static">Khu vực Tp.HCM giao từ 10h-20h hằng ngày. Khu vực khác giao từ 8h-18h hằng ngày. Thứ 7, chủ nhật và ngày lễ nghỉ có thể không báo trước.</p> </div> </div> </div> <div class="form-group"> <div class="row"> <h2 id="step4" class="text-center">Bước 4: Hoàn tất đăng ký</h2> </div> <div class="col-md-12"> <span class="help-block"></span> </div> </div> <div class="form-group"> <label class="col-md-3 col-md-offset-1 col-sm-3 col-sm-offset-1 control-label" for="entry.where">Bạn tìm thấy trang web chúng tôi từ đâu?</label> <div class="col-md-6 col-sm-6"> <div class="input-group input-group-sm"> <select id="entry.where" name="entry.185133696" class="form-control" required> <option></option> <option value="Trang tìm kiếm">Trang tìm kiếm</option> <option value="Mạng xã hội">Mạng xã hội</option> <option value="Diễn đàn / Bình luận">Diễn đàn / Bình luận</option> <option value="Báo điện tử">Báo điện tử</option> <option value="Kênh truyền hình">Kênh truyền hình</option> <option value="Bạn bè giới thiệu">Bạn bè giới thiệu</option> <option value="Trang web khác">Trang web khác</option> </select> <span class="input-group-addon danger checker"> <span class="glyphicon glyphicon-remove"></span> </span> </div> </div> </div> <div class="form-group"> <label class="col-md-3 col-md-offset-1 col-sm-3 col-sm-offset-1 control-label" for="entry.when">Bạn tìm hiểu effortless english từ khi nào?</label> <div class="ol-md-6 col-sm-6"> <div class="input-group input-group-sm"> <select id="entry.when" name="entry.333473941" class="form-control" required> <option></option> <option value="Mới hôm nay">Mới hôm nay</option> <option value="Mấy hôm trước">Mấy hôm trước</option> <option value="Hơn 1 tuần">Hơn 1 tuần</option> <option value="Hơn 1 tháng">Hơn 1 tháng</option> <option value="Hơn 1 năm">Hơn 1 năm</option> <option value="Từ rất lâu">Từ rất lâu</option> </select> <span class="input-group-addon danger checker"> <span class="glyphicon glyphicon-remove"></span> </span> </div> </div> </div> <div class="form-group"> <label class="col-md-3 col-md-offset-1 col-sm-3 col-sm-offset-1 control-label" for="entry.phoneconfirmation">Số điện thoại người đặt hàng</label> <div class="ol-md-6 col-sm-6"> <div class="input-group input-group-sm"> <span class="input-group-addon"> <span class="glyphicon glyphicon-phone"></span> </span> <input id="entry.phoneconfirmation" name="entry.632133000" type="text" placeholder="" class="form-control input-md" required=""> <span class="input-group-addon danger checker"> <span class="glyphicon glyphicon-remove"></span> </span> </div> <span class="help-block">Xác nhận lại số điện thoại của người gửi đơn hàng này</span> </div> </div> <div class="form-group"> <div class="col-md-11 col-md-offset-1"> <div class="checkbox"> <label for="entry.status"> <input style="margin-left:0;left:0" type="checkbox" name="entry.1990496676" id="entry.status" value="đồng ý mua sản phẩm" required=""> Tôi đã tìm hiểu kỹ thông tin khóa học và đồng ý mua các gói chương trình mà tôi đã chọn. </label> <label for="entry.status.2"> <input style="margin-left:0;left:0" type="checkbox" name="entry.1990496676" id="entry.status.2" value="chịu mọi chi phí phát sinh" required=""> Tôi chịu mọi phí vận chuyển phát sinh nếu tôi hủy hoặc hoãn đơn hàng mà không báo trước. </label> <label for="entry.status.4"> <input style="margin-left:0;left:0" type="checkbox" name="entry.1990496676" id="entry.status.4" value="đã xin phép và hỏi ý kiến cha mẹ"> Tôi dưới 18 tuổi hoặc còn đang đi học, tôi đã hỏi ý kiến và xin phép của cha mẹ trước đi đăng ký. </label> <label for="entry.status.3"> <input style="margin-left:0;left:0" type="checkbox" name="entry.1990496676" id="entry.status.3" value="đăng ký trên website duy nhất"> Tôi đăng ký trên website này là duy nhất, ngoài ra tôi chưa đăng ký trên website nào khác. </label> </div> </div> </div> <div class="form-group"> <div class="col-md-12"> <div class="input-group input-group-sm"> <button id="submit" type="submit" name="submit" class="btn btn-success btn-lg" data-loading-text="Đang xử lý..."> <span class="glyphicon glyphicon-send"></span> GỬI ĐƠN ĐẶT HÀNG </button> </div> <span class="help-block">Sau khi bạn bấm “GỬI ĐƠN ĐẶT HÀNG” bạn sẽ được chuyển đến trang thông báo đăng ký thành công. Trường hợp bạn vẫn dừng ở trang này, bạn đã đặt hàng không thành công hoặc đã gặp lỗi trong quá trình đặt hàng. Bạn vui lòng kiểm tra các thông tin BẮT BUỘC màu đỏ. Ngoài ra bạn có thể đặt mua nhanh bằng cách bấm nút <a href="https://docs.google.com/forms/d/1mHVKEsHU582GXpz4uti8alJsRFu67Gb643YX-1w0rik/viewform" target="_blank">Fast Order</a> bên dưới. </span> </div> </div> </fieldset> </form> <script type="text/javascript"> $(document).ready(function() { $('.input-group input[required], .input-group textarea[required], .input-group select[required]').on('keyup change', function() { var $form = $(this).closest('form'), $group = $(this).closest('.input-group'), $addon = $group.find('.checker'), $icon = $addon.find('span'), state = false; if (!$group.data('validate')) { state = $(this).val() ? true : false; } else if ($group.data('validate') == "email") { state = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test($(this).val()) } else if ($group.data('validate') == 'phone') { state = /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/.test($(this).val()) } else if ($group.data('validate') == "length") { state = $(this).val().length >= $group.data('length') ? true : false; } else if ($group.data('validate') == "number") { state = !isNaN(parseFloat($(this).val())) && isFinite($(this).val()); } if (state) { $addon.removeClass('danger'); $addon.addClass('success'); $icon.attr('class', 'glyphicon glyphicon-ok'); } else { $addon.removeClass('success'); $addon.addClass('danger'); $icon.attr('class', 'glyphicon glyphicon-remove'); } /*if ($form.find('.input-group-addon.danger').length == 0) { $form.find('[type="submit"]').prop('disabled', false); }else{ $form.find('[type="submit"]').prop('disabled', true); }*/ }); $('.input-group input[required], .input-group textarea[required], .input-group select[required]').trigger('change'); }); </script> </div> </div> </div> </div> <noscript> <iframe src=http://www.googletagmanager.com/ns.html?id=GTM-W4QXCK height=0 width=0 style=display:none;visibility:hidden></iframe> </noscript> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-W4QXCK');</script>
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css); .spinner input { text-align: right; } .input-group-btn-vertical { position: relative; white-space: nowrap; width: 2%; vertical-align: middle; display: table-cell; } .input-group-btn-vertical > .btn { display: block; float: none; width: 100%; max-width: 100%; padding: 8px; margin-left: -1px; position: relative; border-radius: 0; } .input-group-btn-vertical > .btn:first-child { border-top-right-radius: 0; } .input-group-btn-vertical > .btn:last-child { margin-top: -2px; border-bottom-right-radius: 0; } .input-group-btn-vertical i { position: absolute; top: 0; left: 4px; }

Related: See More


Questions / Comments: