Reservation Form Page EN - 聯絡我們

<div style="color: #fff; font-size: 30px; padding-top: 1%; padding-left: 1%; font-weight: 900;"> Please complete the following appointment form</div>

<style> form[name="orderForm"] { font-weight: 900; } form[name="orderForm"] input{ width: 100%; text-align-last: center; } form[name="orderForm"] select{ width: 100%; text-align-last: center; }  ::-webkit-input-placeholder { text-align: center; } :-moz-placeholder { /* Firefox 18- */ text-align: center;  } ::-moz-placeholder { /* Firefox 19+ */ text-align: center;  } :-ms-input-placeholder {  text-align: center;  } .choose-file-label{ text-align: center; width: 100%; border: #bbb solid 1px; background: #cdcccc; height: 33px; line-height: 28px; color: #ffffff; }   .account-detail-button{ width: 100%; background-color: #fffffe; cursor: pointer; } .bankTransferButton{ width: 100%; background-color: #fffffe; cursor: pointer; } .creditCardButton{ width: 100%; background-color: #fffffe; cursor: pointer; } .creditCardButton.active{ background-color:#faa636; } .bankTransferButton.active{ background-color:#faa636; } .bankTransfer{ /*position: absolute; left: 50.5%; bottom: 7%; top: 308px;*/ display: none;  } .bankTransfer.active{ display: block; } .accountDetail{ position: absolute; top: 0; left: 42% } .accountDetail .account-detail-img{ position: absolute; max-width: 400px; right: -35%; display:none; } .accountDetail .account-detail-img.active{  display:block; z-index: 1000; } .title-row{ padding-top: 1%; } .g-recaptcha{ } form[name="orderForm"] .submitButton{ margin-top: 20px; font-size: 18px; color: #ffffff; background-color: #ff2eA0; padding: 10px 20px 10px 20px; border-radius: 30px; font-family: 'sakura_custom_font'; display: none; } form[name="orderForm"] .submitButton.active{ display:block; } .displayNone { display: none; }</style> <form method="post" name="orderForm" action="/system/pre_order" enctype="multipart/form-data"> <div class="row form-row"> <div class="col-md-6"> <label>Name*</label> </div> <div class="col-md-6"> <label>Phone*</label> </div> </div> <div class="row form-row"> <div class="col-md-3"> <input class="input req-notEmpty " type="text" name="name" placeholder="What should we call you?" maxlength="70"/> </div> <div class="col-md-3"> <select class="input text-align-center " name="title" title="MR/MS/MISS" style="width: 100%;height: 34px;"> <option value="mr">MR.</option> <option value="ms">MS.</option> <option value="miss">MISS.</option> </select>  </div> <div class="col-md-6"> <input class="input req-notEmpty" type="text" name="contactNo" placeholder="Please provide a phone number for WhatsApp。" maxlength="70"/> </div> </div> <div class="row form-row title-row"> <div class="col-md-6"> Company </div> <div class="col-md-6"> Email* </div> </div> <div class="row form-row"> <div class="col-md-6"> <input class="input" type="text" name="companyName" placeholder="Please provide your company name" maxlength="70"/> </div> <div class="col-md-6"> <input class="input req-notEmpty" type="text" name="email" placeholder="Please provide your email address." maxlength="70"/> </div> </div> <div class="row form-row title-row"> <div class="col-md-6"> Construction date* </div> <div class="col-md-6"> Construction address* </div> </div> <div class="row form-row"> <div class="col-md-3"> <input class="input datepicker req-notEmpty" type="text" name="workDate" autocomplete="off" placeholder="Please select the construction date"/> </div> <div class="col-md-3"> <input class="input timepicker req-notEmpty" type="text" name="workTime" placeholder="Please choose the construction time"/> </div> <div class="col-md-1"> <select name="area" class="input text-align-center" placeholder="Area" style="width: 100%;height: 34px;"> <option value="" disabled selected>Area</option> <option value="新界">New Territories</option> <option value="九龍">Kowloon</option> <option value="香港島">Hong Kong Island</option> </select>  </div> <div class="col-md-1"> <select name="region" class="input text-align-center" placeholder="Region" style="width: 100%;height: 34px;"> <option value="" disabled selected>Region</option> </select>  </div> <div class="col-md-4"> <input class="input req-notEmpty" type="text" name="address" placeholder="Address" maxlength="70"/> </div> </div> <div class="row form-row title-row"> <div class="col-md-2"> Floor quotation* </div> <div class="col-md-4" style="font-weight: 100;font-size:12px;line-height: 29px;"> 經濟實惠之選 / 高效家庭安心之選 / 全方位家庭強效之選 </div> <div class="col-md-6"> Payment Method* </div> </div> <div class="row form-row"> <div class="col-md-6 form-row"> <div class="col-md-3"> <input class="input req-notEmpty" type="text" name="floorArea" placeholder="Floor practical number" maxlength="70"/> </div> <div class="col-md-6"> <select class="input text-align-center" name="package" placeholder="Please select a package" style="width: 100%;height: 34px;" > <option value="" selected>Choose a package</option> <option value="經濟實惠之選" >經濟實惠之選</option> <option value="高效家庭安心之選">高效家庭安心之選</option> <option value="全方位家庭強效之選">全方位家庭強效之選</option> </select> </div> <div class="col-md-3"> <input class="input req-notEmpty" type="text" name="floorQuote" placeholder="Floor Quote" readonly/> </div> </div> <div class="col-md-3 ml-2 "> <button type="button" class="bankTransferButton"> Bank transfer </button> </div> <div class="col-md-3">  <button type="button" class="creditCardButton"> Credit card payment </button> </div> </div> <div class="row form-row title-row"> <div class="col-md-2"> Other service </div> <div class="col-md-4" style="font-weight: 100;font-size:12px;line-height: 29px;"> 深層傢俬清潔 / 裝修後清潔 </div> <div class="col-md-6 form-row bankTransfer"> <div class="col-md-5"> <label for="bankReceipt" class="choose-file-label">Upload image</label> <input type="file" class="image_uploads" name="bankReceipt" style="visibility: hidden; display:none" id="bankReceipt" accept="image/*">  </div>  <div class="col-md-5 accountDetail"> <button type="button" class="account-detail-button desktop"> Account information </button> <img class="account-detail-img desktop" src="/wp-content/uploads/2018/11/Account-detail-01.png" /> </div> </div> </div> <div class="row form-row" style="padding-bottom: 3%;"> <div class="col-md-6"> <select class="input text-align-center" name="otherService" placeholder="Need to add other services" style="width: 100%;height: 34px;" > <option value="" selected>Need to add other services</option> <option value="深層傢俬清潔" >深層傢俬清潔</option> <option value="裝修後清潔">裝修後清潔</option> </select>  </div> <div class="col-md-6"> <output class="result desktop"> </output> </div> </div> <hr style="border-top: dashed 3px #faa636;" />  <div style="font-weight: 900; padding-bottom: 3%;"> <span> 有關收集及使用個人資料聲明<br/>櫻花家居服務有限公司，（下稱：櫻花）收集個人資料為用作服務查詢及與閣下通訊之用途。除作上述用途外，所有個人資料絕對保密，並會嚴格遵照法律規定處理，不會轉讓給其他機構或團體。 </span> </div> <div style="font-weight: 900; padding-bottom: 3%;"> <span> 有關使用個人資料作推廣用途<br/>櫻花希望日後根據你以上所提供的聯絡方法（包括姓名，電郵地址等），透過電郵途徑，向你提供櫻花的推廣資訊。 </span> </div> <div style="font-weight: 900; padding-bottom: 3%;"> <span> 即使現在你同意接收櫻花的推廣資訊，但假若你日後改變主意，只須將你的姓名及電郵地址，以電郵通知本公司，本公司便會停止向你發放推廣資訊。 </span> </div> <div style="font-weight: 900; padding-bottom: 3%;"> <span style="color: #ff2ea0;"> 有關櫻花家居服務的聯絡資料，請瀏覽本會網頁。 </span> </div> <div style="font-weight: 900; padding-bottom: 3%;" class="d-flex flex-row align-items-center"> <div> 請在以下列合適之空格內填上 </div> <div style="width: 15px;"><input type="checkbox" disabled=""></div> <div>號表示同意</div> </div> <div style="" class="d-flex flex-row align-items-center"> <div style="width: 15px;"><input type="checkbox" name="agree1"></div> <div> 本人已閱讀、明白及同意上述「有關收集及使用個人資料聲明」的內容。</div> </div> <div style="" class="d-flex flex-row align-items-center"> <div style="width: 15px;"><input type="checkbox" name="agree2"></div> <div> 本人已閱讀、明白及同意上述「有關使用個人資料作推廣用途」的內容及同意接收家計會的推廣資訊。</div> </div> <div class="g-recaptcha" data-sitekey="6Lc3IHoUAAAAAK4tDrNHPY4w2Qpn81EgfI4_fI4I"></div> <button class="submitButton" type="button" style="cursor: pointer;"> Submit </button> <input type="hidden" name="stripeToken" /> </form><script src="https://checkout.stripe.com/checkout.js"></script><script> var handler = StripeCheckout.configure({ key: 'pk_test_DjI7Nl2GfPdWiAzHKnUVTJF8', image: 'https://stripe.com/img/documentation/checkout/marketplace.png', locale: 'auto', token: function(token) { // You can access the token ID with `token.id`. // Get the token ID to your server-side code for use. console.log(token) $('input[name="stripeToken"]').val(token.id); $('form').attr('action','/system/charge'); $('form[name="orderForm"]').submit(); } }); // document.getElementById('customButton').addEventListener('click', function(e) { // // Open Checkout with further options:  // }); // Close Checkout on page navigation: window.addEventListener('popstate', function() { handler.close(); });</script><script type="text/javascript"> var areaJson = [{ "zh":{ "香港島": [ "中西區", "灣仔", "南區", "東區" ], "九龍":[ "油尖旺", "深水埗", "九龍城", "黃大仙", "觀塘" ], "新界":[ "葵青", "荃灣", "屯門", "元朗", "北區", "大埔", "沙田", "西貢", "離島", ] }, "en":{ "Hong Kong Island":[ "Central & Western", "Wan Chai", "Eastern", "Southern",  ], "Kowloon":[ "Yau Tsim Mong", "Sham Shui Po", "Kowloon City", "Wong Tai Sin", "Kwun Tong", ], "NT":[ "Kwai Tsing", "Tsuen Wan", "Tuen Mun", "Yuen Long", "North", "Tai Po", "Sha Tin", "Sai Kung", "Islands" ] }}] var priceJson = [ { 'from' : '0', 'to' : '399', '經濟實惠之選' : '2,600', '高效家庭安心之選' : '3,200', '全方位家庭強效之選' : '5,200' },  { 'from' : '400', 'to' : '599', '經濟實惠之選' : '3,200', '高效家庭安心之選' : '3,800', '全方位家庭強效之選' : '6,400' },  { 'from' : '600', 'to' : '799', '經濟實惠之選' : '3,800', '高效家庭安心之選' : '4,600', '全方位家庭強效之選' : '7,600' },  { 'from' : '800', 'to' : '999', '經濟實惠之選' : '4,300', '高效家庭安心之選' : '5,200', '全方位家庭強效之選' : '8,600' },  { 'from' : '1000', 'to' : '1299', '經濟實惠之選' : '4,900', '高效家庭安心之選' : '6,000', '全方位家庭強效之選' : '9,800' },  { 'from' : '1300', 'to' : '1499', '經濟實惠之選' : '5,700', '高效家庭安心之選' : '6,800', '全方位家庭強效之選' : '11,400' },  { 'from' : '1500', 'to' : '100000000000', '經濟實惠之選' : '另作報價', '高效家庭安心之選' : '另作報價', '全方位家庭強效之選' : '另作報價' }, ]   $( document ).ready( function() { $('form[name="orderForm"]').find('.account-detail-btn').on('click', function(){ if ($('form[name="orderForm"]').find('img.account-detail').hasClass('active')){ $('form[name="orderForm"]').find('img.account-detail').removeClass('active') } else { $('form[name="orderForm"]').find('img.account-detail').addClass('active') }  }); $('form[name="orderForm"]').find('input[name="floorArea"]').on('keyup', function(){ var package = $('form[name="orderForm"]').find('select[name="package"]').val();  var data = ''  if (package != '' && $(this).val() != ''){ data = getPrice($(this).val()); } $('input[name="floorQuote"]').val(data[0][package]); }); $('form[name="orderForm"]').find('select[name="package"]').on('change', function(){ var area = $('form[name="orderForm"]').find('input[name="floorArea"]').val(); var data = '' ; if (area != '' && $(this).val() != ''){ data = getPrice(area); $('input[name="floorQuote"]').val(data[0][$(this).val()]); } }); $('select[name="area"]').on('change', function(){ var area = $(this).val(); $('select[name="region"]').empty(); areaJson[0]['en'][area].forEach(function(item){ $('select[name="region"]').append('<option value="'+item+'">'+item+'</option>'); }); }); $( ".datepicker" ).datepicker({ 'minDate': 0, }); $('.timepicker').timepicker({ 'minTime': '8:00am', 'maxTime': '8:00pm', }); $('form[name="orderForm"]').find('.submitButton').on('click', function(){ var form = $('form[name="orderForm"]'); var formHasErorr = false; if ($('form[name="orderForm"]').find('.g-recaptcha-response').val() == '' ){ formHasErorr = true; } else if ($('form[name="orderForm"]').find('.g-recaptcha-response').val() == null){ formHasErorr = true; } $('form[name="orderForm"]').find('.req-notEmpty').each(function(){ $(this).removeClass('hasError'); if ($(this).attr('type') == 'file'){ $(this).parents('.custom-file').removeClass('hasError'); } if ($(this).val() == null){ $(this).addClass('hasError') if ($(this).attr('type') == 'file'){ $(this).parents('.custom-file').addClass('hasError'); } formHasErorr = true; } else if ($(this).val() == ''){ $(this).addClass('hasError') if ($(this).attr('type') == 'file'){ $(this).parents('.custom-file').addClass('hasError'); } formHasErorr = true; } else if (typeof $(this).val() == 'undefined'){ $(this).addClass('hasError') if ($(this).attr('type') == 'file'){ $(this).parents('.custom-file').addClass('hasError'); } formHasErorr = true; if (form.find($('.creditCardButton')).hasClass('active')){ formHasErorr = false; } } }) if (!formHasErorr){ if (form.find($('.creditCardButton')).hasClass('active')){ handler.open({ name: 'Sakura', description: $('select[name="package"]').val(), amount: Number($('input[name="floorQuote"]').val().replace(/[^0-9.-]+/g,"")) * 100, currency: 'HKD', }); } else if (form.find($('.bankTransferButton')).hasClass('active')) {  var fileSize = form.find('#bankReceipt')[0].files[0].size; if (fileSize / 1024 / 1024 > 2){ alert('File size exceeds 2 MB') } else { form.submit(); }  }  } else { alert('Please fill in the form correctly') } }); $('.bankTransferButton').on('click', function(){ $('.bankTransfer').toggleClass('active') $(this).addClass('active'); $('.creditCardButton').removeClass('active'); }); $('.creditCardButton').on('click', function(){ $(this).addClass('active'); $('.bankTransferButton').removeClass('active'); $('.bankTransfer').removeClass('active') $('.mobileBankTransfer').removeClass('active'); $('input[type="file"]').val(''); $('.result.desktop').empty(); $('.result.mobile').empty(); }); $('input[name="agree1"]').on('change', function(){ if (this.checked){ $('.submitButton').addClass('active'); } else { $('.submitButton').removeClass('active'); } }); $('.account-detail-button.desktop').on('click',function(){ $('.account-detail-img').toggleClass('active')  }); if (window.File && window.FileList && window.FileReader) { $(document).on('change', '.image_uploads', function(e) { console.log('desktop') console.log($(this)) var $inputFile = $(this)[0]; var $output = $('.result.desktop').first();  $output.empty(); var fileSize = 0; var files = $inputFile.files; $output.css('display', '') for (var i = 0; i < $inputFile.files.length; i++) { fileSize = fileSize+files[i].size;  if(fileSize > 10485760) { alert('File size must not be more than 10 MB'); $inputFile.val(""); $output.html(""); break; } var fileReader = new FileReader(); fileReader.onload = (function(e) { var file = e.target; var preview = document.createElement("div"); preview.setAttribute( "class", 'preview_image previewImageWrap'); preview.innerHTML = "<img style='max-height: 300px;' class='imageThumb imgThumbnail' src='" + e.target.result + "' />"; $output.prepend(preview); }); fileReader.readAsDataURL(files[i]); } }); } else { alert("Your browser doesn't support to File API") } }); function getPrice(area){ var filteredArray = priceJson; if ((area != NaN) && (area != null)){ filteredArray = priceJson.filter((val => parseInt(val.from) <= area && parseInt(val.to) >= area)); } return filteredArray;}</script>

<div style="color: #fff; font-size: 30px; padding-top: 1%; padding-left: 1%; font-weight: 900;"> Please complete the following appointment form</div>

<style> form[name="mobileOrderForm"] { font-weight: 900; } form[name="mobileOrderForm"] input{ width: 100%; text-align-last: center; } form[name="mobileOrderForm"] select{ width: 100%; text-align-last: center; }  ::-webkit-input-placeholder { text-align: center; } :-moz-placeholder { /* Firefox 18- */ text-align: center;  } ::-moz-placeholder { /* Firefox 19+ */ text-align: center;  } :-ms-input-placeholder {  text-align: center;  } .choose-file-label{ text-align: center; width: 100%; border: #bbb solid 1px; background: #cdcccc; height: 33px; line-height: 28px; color: #ffffff; }  .creditCardButton{ width: 100%; background-color: #fffffe; cursor: pointer; } .mobileBankTransfer{ display: none; } .mobileBankTransfer.active{ display: block; } .mobileAccountDetail{ } .mobileAccountDetail .account-detail-img{ position: absolute; max-width: 400px; right: -35%; display:none; } .mobileAccountDetail .account-detail-img.active{ display:block; } .title-row{ padding-top: 1%; } .g-recaptcha{ } form[name="mobileOrderForm"] .submitButton{ margin-top: 20px; font-size: 18px; color: #ffffff; background-color: #ff2eA0; padding: 10px 20px 10px 20px; border-radius: 30px; font-family: 'sakura_custom_font'; display: none; } form[name="mobileOrderForm"] .submitButton.active{ display:block; }</style> <form method="post" name="mobileOrderForm" action="/system/pre_order" enctype="multipart/form-data"> <div class="row form-row"> <div class="col-md-6"> <label>Name*</label> </div>  <div class="col-md-3"> <input class="input left req-notEmpty " type="text" name="name" placeholder="What should we call you?" maxlength="70"/> </div> <div class="col-md-3"> <select class="input text-align-center " name="title" title="MR/MS/MISS" style="width: 100%;height: 34px;"> <option value="mr">MR.</option> <option value="ms">MS.</option> <option value="miss">MISS.</option> </select>  </div>  </div> <div class="row form-row"> <div class="col-md-6"> <label>Phone*</label> </div> <div class="col-md-6"> <input class="input req-notEmpty" type="text" name="contactNo" placeholder="Please provide a phone number for WhatsApp。" maxlength="70"/> </div> </div> <div class="row form-row"> <div class="col-md-6"> Company </div> <div class="col-md-6"> <input class="input" type="text" name="companyName" placeholder="Please provide your company name" maxlength="70"/> </div> </div> <div class="row form-row"> <div class="col-md-6"> Email* </div> <div class="col-md-6"> <input class="input req-notEmpty" type="text" name="email" placeholder="Please provide your email address." maxlength="70"/> </div> </div> <div class="row form-row"> <div class="col-md-6"> Construction date* </div> <div class="col-md-3"> <input class="input datepicker req-notEmpty" type="text" name="workDate" placeholder="Please select the construction date"/> </div> <div class="col-md-3"> <input class="input timepicker req-notEmpty" type="text" name="workTime" placeholder="Please choose the construction time"/> </div> </div> <div class="row form-row">  <div class="col-md-6"> Construction address* </div> <div class="col-md-1"> <select name="area" class="input text-align-center" placeholder="Area" style="width: 100%;height: 34px;"> <option value="" disabled selected>Area</option> <option value="新界">New Territories</option> <option value="九龍">Kowloon</option> <option value="香港島">Hong Kong Island</option> </select>  </div> <div class="col-md-1"> <select name="area" class="input text-align-center" title="Region" style="width: 100%;height: 34px;"> <option value="" disabled selected>Region</option> </select>  </div> <div class="col-md-4"> <input class="input req-notEmpty" type="text" name="address" placeholder="Address" maxlength="70"/> </div> </div> <div class="row form-row"> <div class="col-md-2"> Floor quotation* </div> <div class="col-md-4" style="font-weight: 100;font-size:12px;line-height: 29px;"> 經濟實惠之選 / 高效家庭安心之選 / 全方位家庭強效之選 </div> <div class="col-md-6 form-row"> <div class="col-md-3"> <input class="input req-notEmpty" type="text" name="floorArea" placeholder="Floor practical number" maxlength="70"/> </div> <div class="col-md-6"> <select class="input text-align-center" name="package" placeholder="Please select a package" style="width: 100%;height: 34px;" > <option value="" selected>Choose a package</option> <option value="經濟實惠之選" >經濟實惠之選</option> <option value="高效家庭安心之選">高效家庭安心之選</option> <option value="全方位家庭強效之選">全方位家庭強效之選</option> </select> </div> <div class="col-md-3"> <input class="input req-notEmpty" type="text" name="floorQuote" placeholder="Floor Quote" readonly/> </div> </div>  </div> <div class="row form-row"> <div class="col-md-6"> Payment Method* </div> <div class="col-md-3"> <button type="button" class=" mobileBankTransferButton bankTransferButton"> Bank transfer </button> </div> <div class="col-md-6 mobileBankTransfer"> <label for="bankReceipt_mobile" class="choose-file-label">上傳圖片</label> <input type="file" class="image_uploads_mobile" name="bankReceipt" style="visibility: hidden; display:none" id="bankReceipt_mobile"> </div>  <div class="col-md-6 mobileAccountDetail mobileBankTransfer"> <button type="button" class=" account-detail-button mobile"> Account information </button> <img class="account-detail-img" src="/wp-content/uploads/2018/11/Account-detail-01.png" /> </div> <div class="col-md-3"> <button type="button" class="creditCardButton"> Credit card payment </button> <output class="result mobile"> </output> </div> </div> <div class="row form-row"> <div class="col-md-2"> Other service </div> <div class="col-md-4" style="font-weight: 100;font-size:12px;line-height: 29px;"> 深層傢俬清潔 / 裝修後清潔 </div>  </div> <div class="row form-row" style="padding-bottom: 3%;"> <div class="col-md-6"> <select class="input text-align-center" name="otherService" placeholder="Need to add other services" style="width: 100%;height: 34px;" > <option value="" selected>Need to add other services</option> <option value="深層傢俬清潔" >深層傢俬清潔</option> <option value="裝修後清潔">裝修後清潔</option> </select> </div> </div> <hr style="border-top: dashed 3px #faa636;" />  <div style="font-weight: 900; padding-bottom: 3%;"> <span> 有關收集及使用個人資料聲明<br/>櫻花家居服務有限公司，（下稱：櫻花）收集個人資料為用作服務查詢及與閣下通訊之用途。除作上述用途外，所有個人資料絕對保密，並會嚴格遵照法律規定處理，不會轉讓給其他機構或團體。 </span> </div> <div style="font-weight: 900; padding-bottom: 3%;"> <span> 有關使用個人資料作推廣用途<br/>櫻花希望日後根據你以上所提供的聯絡方法（包括姓名，電郵地址等），透過電郵途徑，向你提供櫻花的推廣資訊。 </span> </div> <div style="font-weight: 900; padding-bottom: 3%;"> <span> 即使現在你同意接收櫻花的推廣資訊，但假若你日後改變主意，只須將你的姓名及電郵地址，以電郵通知本公司，本公司便會停止向你發放推廣資訊。 </span> </div> <div style="font-weight: 900; padding-bottom: 3%;"> <span style="color: #ff2ea0;"> 有關櫻花家居服務的聯絡資料，請瀏覽本會網頁。 </span> </div> <div style="font-weight: 900; padding-bottom: 3%;" class="d-flex flex-row align-items-center"> <div> 請在以下列合適之空格內填上 </div> <div style="width: 15px;"><input type="checkbox" disabled=""></div> <div>號表示同意</div> </div> <div style="" class="d-flex flex-row align-items-center"> <div style="width: 15px;"><input type="checkbox" name="agree1"></div> <div> 本人已閱讀、明白及同意上述「有關收集及使用個人資料聲明」的內容。</div> </div> <div style="" class="d-flex flex-row align-items-center"> <div style="width: 15px;"><input type="checkbox" name="agree2"></div> <div> 本人已閱讀、明白及同意上述「有關使用個人資料作推廣用途」的內容及同意接收家計會的推廣資訊。</div> </div> <div class="g-recaptcha" data-sitekey="6Lc3IHoUAAAAAK4tDrNHPY4w2Qpn81EgfI4_fI4I"></div> <button class="submitButton" type="button" style="cursor: pointer;"> Submit </button> <input type="hidden" name="stripeToken" /> </form><script> var mobileHandler = StripeCheckout.configure({ key: 'pk_test_DjI7Nl2GfPdWiAzHKnUVTJF8', image: 'https://stripe.com/img/documentation/checkout/marketplace.png', locale: 'auto', token: function(token) { // You can access the token ID with `token.id`. // Get the token ID to your server-side code for use. console.log(token) $('input[name="stripeToken"]').val(token.id); $('form').attr('action','/system/charge'); $('form[name="mobileOrderForm"]').submit(); } }); // document.getElementById('customButton').addEventListener('click', function(e) { // // Open Checkout with further options:  // }); // Close Checkout on page navigation: window.addEventListener('popstate', function() { handler.close(); });</script><script type="text/javascript"> var priceJson = [ { 'from' : '0', 'to' : '399', '經濟實惠之選' : '2,600', '高效家庭安心之選' : '3,200', '全方位家庭強效之選' : '5,200' },  { 'from' : '400', 'to' : '599', '經濟實惠之選' : '3,200', '高效家庭安心之選' : '3,800', '全方位家庭強效之選' : '6,400' },  { 'from' : '600', 'to' : '799', '經濟實惠之選' : '3,800', '高效家庭安心之選' : '4,600', '全方位家庭強效之選' : '7,600' },  { 'from' : '800', 'to' : '999', '經濟實惠之選' : '4,300', '高效家庭安心之選' : '5,200', '全方位家庭強效之選' : '8,600' },  { 'from' : '1000', 'to' : '1299', '經濟實惠之選' : '4,900', '高效家庭安心之選' : '6,000', '全方位家庭強效之選' : '9,800' },  { 'from' : '1300', 'to' : '1499', '經濟實惠之選' : '5,700', '高效家庭安心之選' : '6,800', '全方位家庭強效之選' : '11,400' },  { 'from' : '1500', 'to' : '100000000000', '經濟實惠之選' : '另作報價', '高效家庭安心之選' : '另作報價', '全方位家庭強效之選' : '另作報價' }, ] $( document ).ready( function() { $('form[name="mobileOrderForm"]').find('.account-detail-btn').on('click', function(){ if ($('form[name="mobileOrderForm"]').find('img.account-detail').hasClass('active')){ $('form[name="mobileOrderForm"]').find('img.account-detail').removeClass('active') } else { $('form[name="mobileOrderForm"]').find('img.account-detail').addClass('active') }  }); $('form[name="mobileOrderForm"]').find('input[name="floorArea"]').on('keyup', function(){ var package = $('form[name="mobileOrderForm"]').find('select[name="package"]').val();  var data = ''  if (package != '' && $(this).val() != ''){ data = getPrice($(this).val()); } $('input[name="floorQuote"]').val(data[0][package]); }); $('form[name="mobileOrderForm"]').find('select[name="package"]').on('change', function(){ var area = $('form[name="mobileOrderForm"]').find('input[name="floorArea"]').val(); var data = '' ; if (area != '' && $(this).val() != ''){ data = getPrice(area); $('input[name="floorQuote"]').val(data[0][$(this).val()]); } }); $( ".datepicker" ).datepicker(); $('.timepicker').timepicker({ 'minTime': '8:00am', 'maxTime': '8:00pm', }); $('form[name="mobileOrderForm"]').find('.submitButton').on('click', function(){ var form = $('form[name="mobileOrderForm"]'); var formHasErorr = false; if ($('form[name="mobileOrderForm"]').find('.g-recaptcha-response').val() == '' ){ formHasErorr = true; } else if ($('form[name="mobileOrderForm"]').find('.g-recaptcha-response').val() == null){ formHasErorr = true; } $('form[name="mobileOrderForm"]').find('.req-notEmpty').each(function(){ $(this).removeClass('hasError'); if ($(this).attr('type') == 'file'){ $(this).parents('.custom-file').removeClass('hasError'); } if ($(this).val() == null){ $(this).addClass('hasError') if ($(this).attr('type') == 'file'){ $(this).parents('.custom-file').addClass('hasError'); } formHasErorr = true; } else if ($(this).val() == ''){ $(this).addClass('hasError') if ($(this).attr('type') == 'file'){ $(this).parents('.custom-file').addClass('hasError'); } formHasErorr = true; } else if (typeof $(this).val() == 'undefined'){ $(this).addClass('hasError') if ($(this).attr('type') == 'file'){ $(this).parents('.custom-file').addClass('hasError'); } formHasErorr = true; if (form.find($('.creditCardButton')).hasClass('active')){ formHasErorr = false; } } }) if (!formHasErorr){ if (form.find($('.creditCardButton')).hasClass('active')){ console.log('submut with creditCardButton'); mobileHandler.open({ name: 'Sakura', description: $('select[name="package"]').val(), amount: Number($('input[name="floorQuote"]').val().replace(/[^0-9.-]+/g,"")) * 100, currency: 'HKD', }); } else if (form.find($('.bankTransferButton')).hasClass('active')) { var fileSize = form.find('#bankReceipt')[0].files[0].size; if (fileSize / 1024 / 1024 > 2){ alert('File size exceeds 2 MB') } else { form.submit(); } } } else { alert('Please fill in the form correctly') } }); $('.mobileBankTransferButton').on('click', function(){ $('.mobileBankTransfer').toggleClass('active') }); $('.creditCardButton').on('click', function(){ $('.mobileBankTransfer').removeClass('active'); }); $('input[name="agree1"]').on('change', function(){ if (this.checked){ $('.submitButton').addClass('active'); } else { $('.submitButton').removeClass('active'); } }); $('.account-detail-button.mobile').on('click',function(){ $('.account-detail-img').toggleClass('active') }); if (window.File && window.FileList && window.FileReader) { $(document).on('change', '.image_uploads_mobile', function(e) { var $inputFile = $(this)[0]; var $output = $('.result.mobile').first();  $output.empty(); var fileSize = 0; var files = $inputFile.files; $output.css('display', '') for (var i = 0; i < $inputFile.files.length; i++) { fileSize = fileSize+files[i].size;  if(fileSize > 10485760) { alert('File size must not be more than 10 MB'); $inputFile.val(""); $output.html(""); break; } var fileReader = new FileReader(); fileReader.onload = (function(e) { var file = e.target; var preview = document.createElement("div"); preview.setAttribute( "class", 'preview_image previewImageWrap'); preview.innerHTML = "<img style='max-height: 300px;' class='imageThumb imgThumbnail' src='" + e.target.result + "' />"; $output.prepend(preview); }); fileReader.readAsDataURL(files[i]); } }); } else { alert("Your browser doesn't support to File API") } });  function getPrice(area){ var filteredArray = priceJson; if ((area != NaN) && (area != null)){ filteredArray = priceJson.filter((val => parseInt(val.from) <= area && parseInt(val.to) >= area)); } return filteredArray;}</script>

Open chat

testing3