{"id":2836,"date":"2026-07-31T00:16:14","date_gmt":"2026-07-30T16:16:14","guid":{"rendered":"http:\/\/temp.hkwheelchairtaxi.com\/?page_id=2836"},"modified":"2026-07-31T00:34:32","modified_gmt":"2026-07-30T16:34:32","slug":"%e7%b7%9a%e4%b8%8awhatsapp%e9%a0%90%e7%b4%84%e7%b3%bb%e7%b5%b1-online-whatsapp-booking","status":"publish","type":"page","link":"https:\/\/temp.hkwheelchairtaxi.com\/index.php\/%e7%b7%9a%e4%b8%8awhatsapp%e9%a0%90%e7%b4%84%e7%b3%bb%e7%b5%b1-online-whatsapp-booking\/","title":{"rendered":"\u7dda\u4e0aWHATSAPP\u9810\u7d04\u7cfb\u7d71\/Online Whatsapp Booking"},"content":{"rendered":"<div class=\"et_pb_section_0 et_pb_section et_section_regular et_flex_section\" id=\"booking-form\">\n<div class=\"et_pb_row_0 et_pb_row et_flex_row\">\n<div class=\"et_pb_column_0 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_code_0 et_pb_code et_pb_module\"><div class=\"et_pb_code_inner\"><style>\n\/* 1. \u5168\u9801\u5e73\u6ed1\u6ed1\u52d5\u6548\u679c *\/\nhtml {\n  scroll-behavior: smooth;\n}\n\n\/* 2. \u5fb7\u5065\u8f2a\u6905\u7684\u58eb \u2014 \u5361\u7247\u8868\u55ae\u5c08\u7528 CSS *\/\n.wa-card-form { font-family: inherit; color: #333; }\n\n\/* \u9802\u90e8\u5927\u6a19\u984c\u6a23\u5f0f *\/\n.form-main-title {\n  text-align: center;\n  margin-bottom: 24px;\n  padding-bottom: 16px;\n  border-bottom: 2px dashed #e0e0e0;\n}\n.form-main-title h2 {\n  font-size: 22px;\n  font-weight: bold;\n  color: #25D366; \/* WhatsApp \u54c1\u724c\u7da0\u8272 *\/\n  margin: 0 0 6px 0;\n  line-height: 1.3;\n}\n.form-main-title span {\n  font-size: 15px;\n  color: #666;\n  font-weight: 500;\n  display: block;\n}\n\n\/* \u9032\u5ea6\u689d\u6a23\u5f0f *\/\n.step-bar-bg { width: 100%; height: 8px; background: #e0e0e0; border-radius: 4px; margin-bottom: 10px; overflow: hidden; }\n.step-bar-fill { height: 100%; width: 33.33%; background: #25D366; transition: width 0.3s ease; }\n.step-count { font-size: 13px; color: #666; text-align: right; margin-bottom: 20px; font-weight: bold; }\n\n\/* \u5206\u9801\u52d5\u756b *\/\n.form-step { display: none; }\n.form-step.active { display: block; animation: stepFade 0.3s ease-in-out; }\n@keyframes stepFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }\n\n\/* \u6b65\u9a5f\u5c0f\u6a19\u984c *\/\n.form-step h3 { font-size: 18px; font-weight: bold; margin-bottom: 18px; color: #0073aa; }\n\n\/* \u6b04\u4f4d\u8207\u8f38\u5165\u6846\u9593\u8ddd *\/\n.field-box { margin-bottom: 18px; }\n.field-box label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: #444; }\n.field-box input, .field-box select, .field-box textarea { \n  width: 100%; \n  padding: 12px 14px; \n  border: 1px solid #ccc; \n  border-radius: 8px; \n  font-size: 15px; \n  box-sizing: border-box; \n  outline: none; \n  background: #fff; \n}\n.field-box input:focus, .field-box select:focus, .field-box textarea:focus { border-color: #25D366; }\n\n\/* \u6309\u9215\u6a23\u5f0f *\/\n.btn-row { display: flex; gap: 10px; margin-top: 24px; }\n.btn-next, .btn-prev, .btn-wa { width: 100%; padding: 14px; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; text-align: center; }\n.btn-next { background: #0073aa; color: #fff; }\n.btn-prev { background: #eee; color: #444; }\n.btn-wa { background: #25D366; color: #fff; }\n.btn-wa:hover { background: #1eb956; }\n<\/style>\n\n<div class=\"wa-card-form\">\n  <!-- \u9802\u90e8\u5927\u6a19\u984c -->\n  <div class=\"form-main-title\">\n    <h2>\u7dda\u4e0a WhatsApp \u9810\u7d04\u7cfb\u7d71<\/h2>\n    <span>Online WhatsApp Booking<\/span>\n  <\/div>\n\n  <!-- \u9032\u5ea6\u689d -->\n  <div class=\"step-bar-bg\"><div class=\"step-bar-fill\" id=\"step-bar\"><\/div><\/div>\n  <div class=\"step-count\">Step <span id=\"step-num\">1<\/span> \/ 3<\/div>\n\n  <form id=\"hk-taxi-form\">\n    <!-- Step 1: \u884c\u7a0b\u5730\u9ede -->\n    <div class=\"form-step active\" data-step=\"1\">\n      <h3>\u7b2c\u4e00\u6b65\uff1a\u884c\u7a0b\u5730\u9ede \/ Step 1: Locations<\/h3>\n      <div class=\"field-box\">\n        <label>\u4e0a\u8eca\u5730\u9ede \/ Pickup Location *<\/label>\n        <input type=\"text\" id=\"pickup\" placeholder=\"\u4f8b\u5982\uff1a\u65fa\u89d2\u8b77\u7406\u4e2d\u5fc3 \/ MongKok Nursing Home\" required>\n      <\/div>\n      <div class=\"field-box\">\n        <label>\u843d\u8eca\u5730\u9ede \/ Dropoff Location *<\/label>\n        <input type=\"text\" id=\"dropoff\" placeholder=\"\u4f8b\u5982\uff1a\u5c6f\u9580\u91ab\u9662 \/ Tuen Mun Hospital\" required>\n      <\/div>\n      <div class=\"btn-row\">\n        <button type=\"button\" class=\"btn-next\" onclick=\"goNext(1)\">\u4e0b\u4e00\u6b65 \/ Next<\/button>\n      <\/div>\n    <\/div>\n\n    <!-- Step 2: \u6642\u9593\u8207\u4eba\u6578 -->\n    <div class=\"form-step\" data-step=\"2\">\n      <h3>\u7b2c\u4e8c\u6b65\uff1a\u7528\u8eca\u6642\u9593\u8207\u4eba\u6578 \/ Step 2: Time & Details<\/h3>\n      <div class=\"field-box\">\n        <label>\u7528\u8eca\u65e5\u671f\u53ca\u6642\u9593 \/ Date & Time *<\/label>\n        <input type=\"datetime-local\" id=\"datetime\" required>\n      <\/div>\n      <div class=\"field-box\">\n        <label>\u4e58\u5750\u4eba\u6578 \/ Number of passengers *<\/label>\n        <select id=\"passengers\" required>\n          <option value=\"1\u8f2a\u6905\u4e58\u5ba2+1\u966a\u540c\u4eba \/ 1 wheelchair + 1 person\">1\u8f2a\u6905\u4e58\u5ba2+1\u966a\u540c\u4eba \/ 1 wheelchair + 1 person<\/option>\n          <option value=\"1\u8f2a\u6905\u4e58\u5ba2+2\u966a\u540c\u4eba \/ 1 wheelchair + 2 persons\">1\u8f2a\u6905\u4e58\u5ba2+2\u966a\u540c\u4eba \/ 1 wheelchair + 2 persons<\/option>\n          <option value=\"1\u8f2a\u6905\u4e58\u5ba2+3\u966a\u540c\u4eba \/ 1 wheelchair + 3 persons\">1\u8f2a\u6905\u4e58\u5ba2+3\u966a\u540c\u4eba \/ 1 wheelchair + 3 persons<\/option>\n          <option value=\"1\u8f2a\u6905\u4e58\u5ba2+4\u966a\u540c\u4eba \/ 1 wheelchair + 4 persons\">1\u8f2a\u6905\u4e58\u5ba2+4\u966a\u540c\u4eba \/ 1 wheelchair + 4 persons<\/option>\n        <\/select>\n      <\/div>\n      <div class=\"field-box\">\n        <label>\u9700\u8981\u56de\u7a0b? \/ Need a return trip? *<\/label>\n        <select id=\"return_trip\" required>\n          <option value=\"\u9700\u8981 \/ YES\" selected>\u9700\u8981 \/ YES<\/option>\n          <option value=\"\u4e0d\u9700\u8981 \/ NO\">\u4e0d\u9700\u8981 \/ NO<\/option>\n        <\/select>\n      <\/div>\n      <div class=\"btn-row\">\n        <button type=\"button\" class=\"btn-prev\" onclick=\"goPrev(2)\">\u4e0a\u4e00\u6b65 \/ Back<\/button>\n        <button type=\"button\" class=\"btn-next\" onclick=\"goNext(2)\">\u4e0b\u4e00\u6b65 \/ Next<\/button>\n      <\/div>\n    <\/div>\n\n    <!-- Step 3: \u806f\u7d61\u8cc7\u6599 -->\n    <div class=\"form-step\" data-step=\"3\">\n      <h3>\u7b2c\u4e09\u6b65\uff1a\u806f\u7d61\u8cc7\u6599 \/ Step 3: Contact Info<\/h3>\n      <div class=\"field-box\">\n        <label>\u7a31\u547c \/ Name *<\/label>\n        <input type=\"text\" id=\"cust_name\" placeholder=\"\u4f8b\u5982\uff1a\u9673\u5148\u751f \/ Mr. Chan\" required>\n      <\/div>\n      <div class=\"field-box\">\n        <label>\u806f\u7d61\u96fb\u8a71 \/ Phone Number *<\/label>\n        <input type=\"tel\" id=\"phone\" placeholder=\"\u4f8b\u5982\uff1a91234567\" required>\n      <\/div>\n      <div class=\"field-box\">\n        <label>\u7279\u5225\u5099\u8a3b \/ Special Notes<\/label>\n        <textarea id=\"notes\" rows=\"3\" placeholder=\"\u4f8b\u5982\uff1a\u5927\u578b\u96fb\u52d5\u8f2a\u6905\/Big electrical wheelchair\"><\/textarea>\n      <\/div>\n      <div class=\"btn-row\">\n        <button type=\"button\" class=\"btn-prev\" onclick=\"goPrev(3)\">\u4e0a\u4e00\u6b65 \/ Back<\/button>\n        <button type=\"button\" class=\"btn-wa\" onclick=\"submitToWhatsApp()\">\u958b\u555f WhatsApp \u9810\u7d04<\/button>\n      <\/div>\n    <\/div>\n  <\/form>\n<\/div>\n\n<script>\n\/\/ \u5df2\u8a2d\u5b9a\u70ba\u5fb7\u5065\u8f2a\u6905\u7684\u58eb WhatsApp \u865f\u78bc (+852 62908987)\nconst myWhatsAppNumber = \"85262908987\";\n\nfunction goNext(current) {\n  const container = document.querySelector(`.form-step[data-step=\"${current}\"]`);\n  const inputs = container.querySelectorAll(\"input[required], select[required]\");\n  for (let input of inputs) {\n    if (!input.value.trim()) {\n      alert(\"\u8acb\u586b\u5beb\u5fc5\u8981\u6b04\u4f4d\uff01 \/ Please fill in required fields!\");\n      input.focus();\n      return;\n    }\n  }\n  document.querySelector(`.form-step[data-step=\"${current}\"]`).classList.remove(\"active\");\n  const next = current + 1;\n  document.querySelector(`.form-step[data-step=\"${next}\"]`).classList.add(\"active\");\n  updateBar(next);\n}\n\nfunction goPrev(current) {\n  document.querySelector(`.form-step[data-step=\"${current}\"]`).classList.remove(\"active\");\n  const prev = current - 1;\n  document.querySelector(`.form-step[data-step=\"${prev}\"]`).classList.add(\"active\");\n  updateBar(prev);\n}\n\nfunction updateBar(step) {\n  document.getElementById(\"step-num\").innerText = step;\n  const bar = document.getElementById(\"step-bar\");\n  if (step === 1) bar.style.width = \"33.33%\";\n  if (step === 2) bar.style.width = \"66.66%\";\n  if (step === 3) bar.style.width = \"100%\";\n}\n\nfunction submitToWhatsApp() {\n  const pickup = document.getElementById(\"pickup\").value;\n  const dropoff = document.getElementById(\"dropoff\").value;\n  const rawDatetime = document.getElementById(\"datetime\").value;\n  const passengers = document.getElementById(\"passengers\").value;\n  const return_trip = document.getElementById(\"return_trip\").value;\n  const cust_name = document.getElementById(\"cust_name\").value;\n  const phone = document.getElementById(\"phone\").value;\n  const notes = document.getElementById(\"notes\").value || \"\u7121 \/ None\";\n\n  if (!cust_name.trim()) {\n    alert(\"\u8acb\u8f38\u5165\u60a8\u7684\u7a31\u547c\uff01 \/ Please enter your name!\");\n    document.getElementById(\"cust_name\").focus();\n    return;\n  }\n\n  if (!phone.trim()) {\n    alert(\"\u8acb\u8f38\u5165\u806f\u7d61\u96fb\u8a71\uff01 \/ Please enter your phone number!\");\n    document.getElementById(\"phone\").focus();\n    return;\n  }\n\n  \/\/ \u5c07\u539f\u751f datetime \u7684 \"T\" \u66ff\u63db\u6210\u7a7a\u683c (\u4f8b\u5982: 2026-07-31 00:29)\n  const formattedDatetime = rawDatetime ? rawDatetime.replace(\"T\", \" \") : \"\u672a\u586b\u5beb \/ Not provided\";\n\n  \/\/ \u69cb\u5efa\u5b8c\u6574\u9810\u7d04\u8a0a\u606f\u6587\u5b57\n  const rawMsg = `\ud83d\udc4b \u5fb7\u5065\u8f2a\u6905\u7684\u58eb \u2014 \u65b0\u9810\u7d04\u67e5\u8a62\\n\\n` +\n                 `\ud83d\udc64 \u7a31\u547c \/ Name: ${cust_name}\\n` +\n                 `\ud83d\udcde \u806f\u7d61\u96fb\u8a71 \/ Phone: ${phone}\\n` +\n                 `\ud83d\udccd \u4e0a\u8eca\u5730\u9ede \/ Pickup: ${pickup}\\n` +\n                 `\ud83c\udfc1 \u843d\u8eca\u5730\u9ede \/ Dropoff: ${dropoff}\\n` +\n                 `\u23f0 \u7528\u8eca\u6642\u9593 \/ Date & Time: ${formattedDatetime}\\n` +\n                 `\ud83d\udc65 \u4e58\u5750\u4eba\u6578 \/ Passengers: ${passengers}\\n` +\n                 `\ud83d\udd04 \u9700\u8981\u56de\u7a0b? \/ Need return?: ${return_trip}\\n` +\n                 `\ud83d\udcdd \u5099\u8a3b \/ Remarks: ${notes}`;\n\n  \/\/ \u6574\u6bb5\u505a\u5b89\u5168 URL \u7de8\u78bc\uff0c\u9632\u6b62\u4efb\u4f55\u5b57\u5143\u622a\u65b7\u7db2\u5740\n  const encodedMsg = encodeURIComponent(rawMsg);\n\n  window.open(`https:\/\/api.whatsapp.com\/send?phone=${myWhatsAppNumber}&text=${encodedMsg}`, '_blank');\n}\n<\/script><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2836","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/temp.hkwheelchairtaxi.com\/index.php\/wp-json\/wp\/v2\/pages\/2836","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/temp.hkwheelchairtaxi.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/temp.hkwheelchairtaxi.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/temp.hkwheelchairtaxi.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/temp.hkwheelchairtaxi.com\/index.php\/wp-json\/wp\/v2\/comments?post=2836"}],"version-history":[{"count":4,"href":"https:\/\/temp.hkwheelchairtaxi.com\/index.php\/wp-json\/wp\/v2\/pages\/2836\/revisions"}],"predecessor-version":[{"id":2854,"href":"https:\/\/temp.hkwheelchairtaxi.com\/index.php\/wp-json\/wp\/v2\/pages\/2836\/revisions\/2854"}],"wp:attachment":[{"href":"https:\/\/temp.hkwheelchairtaxi.com\/index.php\/wp-json\/wp\/v2\/media?parent=2836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}