{"id":2120,"date":"2026-04-04T11:00:22","date_gmt":"2026-04-04T11:00:22","guid":{"rendered":"https:\/\/websolution.skjworldservice.com\/?p=2120"},"modified":"2026-04-08T15:16:37","modified_gmt":"2026-04-08T15:16:37","slug":"book-professional-website","status":"publish","type":"post","link":"https:\/\/websolution.skjworldservice.com\/index.php\/2026\/04\/04\/book-professional-website\/","title":{"rendered":"Book Professional Website"},"content":{"rendered":"\n<!DOCTYPE html>\n<html>\n<head>\n                <style>#bmcw-widget,\n#bmcw-widget * {\n  box-sizing: border-box;\n}\n\n#bmcw-widget {\n  --bmcw-bg: #f4f7ff;\n  --bmcw-card: #f9fbff;\n  --bmcw-field: #eff3fb;\n  --bmcw-line: #d3dbec;\n  --bmcw-text: #0b1220;\n  --bmcw-muted: #6b7690;\n  --bmcw-primary: #3760f7;\n  --bmcw-primary-strong: #4a76ff;\n  --bmcw-danger: #d22d2d;\n  --bmcw-shadow: 0 22px 50px rgba(54, 87, 160, 0.14);\n  font-family: \"Poppins\", sans-serif;\n  color: var(--bmcw-text);\n  display: block;\n  width: 100%;\n}\n\n#bmcw-widget .bmcw-page {\n  width: 100%;\n  max-width: 1100px;\n  margin: 0 auto;\n  padding: 18px;\n}\n\n#bmcw-widget .bmcw-card {\n  background: var(--bmcw-card);\n  border-radius: 28px;\n  box-shadow: var(--bmcw-shadow);\n  padding: 28px 30px 32px;\n}\n\n#bmcw-widget .bmcw-header h1 {\n  margin: 0;\n  text-align: center;\n  font-size: clamp(1.8rem, 4vw, 3rem);\n  font-weight: 800;\n}\n\n#bmcw-widget .bmcw-progress {\n  display: flex;\n  justify-content: center;\n  gap: 8px;\n  margin: 16px 0 30px;\n}\n\n#bmcw-widget .bmcw-progress-dot {\n  width: 40px;\n  height: 6px;\n  border-radius: 999px;\n  background: #d8d8d8;\n}\n\n#bmcw-widget .bmcw-progress-dot.active,\n#bmcw-widget .bmcw-progress-dot.done {\n  background: linear-gradient(90deg, var(--bmcw-primary), var(--bmcw-primary-strong));\n}\n\n#bmcw-widget .bmcw-step {\n  display: none;\n}\n\n#bmcw-widget .bmcw-step.active {\n  display: block;\n}\n\n#bmcw-widget .bmcw-section-title {\n  margin-bottom: 16px;\n  text-align: center;\n  font-size: 1.2rem;\n  font-weight: 800;\n  text-transform: uppercase;\n}\n\n#bmcw-widget .bmcw-section-gap {\n  margin-top: 28px;\n}\n\n#bmcw-widget .bmcw-fields {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 18px;\n}\n\n#bmcw-widget .bmcw-fields-single {\n  grid-template-columns: 1fr;\n}\n\n#bmcw-widget .bmcw-field {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n#bmcw-widget .bmcw-field-full {\n  grid-column: 1 \/ -1;\n}\n\n#bmcw-widget .bmcw-field span {\n  color: var(--bmcw-primary);\n  font-size: 0.92rem;\n  font-weight: 700;\n  text-transform: uppercase;\n}\n\n#bmcw-widget .bmcw-field input,\n#bmcw-widget .bmcw-field textarea,\n#bmcw-widget .bmcw-field select {\n  width: 100%;\n  padding: 16px 14px;\n  border: 1px solid var(--bmcw-line);\n  border-radius: 8px;\n  background: var(--bmcw-field);\n  font: inherit;\n  color: var(--bmcw-text);\n}\n\n#bmcw-widget .bmcw-field input:focus,\n#bmcw-widget .bmcw-field textarea:focus,\n#bmcw-widget .bmcw-field select:focus {\n  outline: none;\n  border-color: var(--bmcw-primary);\n  box-shadow: 0 0 0 4px rgba(55, 96, 247, 0.12);\n}\n\n#bmcw-widget .bmcw-plans {\n  display: grid;\n  gap: 16px;\n}\n\n#bmcw-widget .bmcw-plans-three {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n\n#bmcw-widget .bmcw-plans-two {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n#bmcw-widget .bmcw-option-card {\n  display: block;\n  padding: 18px;\n  border: 1px solid var(--bmcw-line);\n  border-radius: 18px;\n  background: #fff;\n  cursor: pointer;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;\n}\n\n#bmcw-widget .bmcw-option-card:hover {\n  transform: translateY(-2px);\n}\n\n#bmcw-widget .bmcw-option-card input {\n  margin-bottom: 10px;\n}\n\n#bmcw-widget .bmcw-prepaid-modes {\n  margin-top: 10px;\n  padding-top: 10px;\n  border-top: 1px dashed rgba(55, 96, 247, 0.35);\n  display: grid;\n  gap: 8px;\n}\n\n#bmcw-widget .bmcw-mini-option {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  border: 1px solid var(--bmcw-line);\n  border-radius: 10px;\n  background: #f8faff;\n  font-size: 0.9rem;\n  color: var(--bmcw-text);\n}\n\n#bmcw-widget .bmcw-mini-option input {\n  margin: 0;\n}\n\n#bmcw-widget .bmcw-option-card strong {\n  display: block;\n  margin-bottom: 4px;\n  font-size: 1.05rem;\n}\n\n#bmcw-widget .bmcw-option-card .bmcw-price {\n  display: inline-block;\n  margin-bottom: 10px;\n  color: var(--bmcw-primary);\n  font-weight: 700;\n}\n\n#bmcw-widget .bmcw-option-card p {\n  margin: 0;\n  color: var(--bmcw-muted);\n  line-height: 1.5;\n}\n\n#bmcw-widget .bmcw-option-card.selected {\n  border-color: var(--bmcw-primary);\n  box-shadow: 0 14px 30px rgba(55, 96, 247, 0.12);\n}\n\n#bmcw-widget .bmcw-discount {\n  margin-top: 14px;\n  border: 1px solid rgba(55, 96, 247, 0.26);\n  background: linear-gradient(135deg, rgba(55, 96, 247, 0.08), rgba(74, 118, 255, 0.12));\n  border-radius: 14px;\n  padding: 12px 14px;\n}\n\n#bmcw-widget .bmcw-discount-title {\n  margin: 0;\n  font-size: 0.9rem;\n  font-weight: 800;\n  color: var(--bmcw-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n}\n\n#bmcw-widget .bmcw-discount-level {\n  margin: 6px 0 2px;\n  font-size: 1rem;\n  font-weight: 700;\n  color: var(--bmcw-text);\n}\n\n#bmcw-widget .bmcw-discount-price {\n  margin: 0;\n  font-size: 0.9rem;\n  color: var(--bmcw-muted);\n}\n\n#bmcw-widget .bmcw-message {\n  min-height: 24px;\n  margin: 16px 0 0;\n  text-align: center;\n  color: var(--bmcw-danger);\n}\n\n#bmcw-widget .bmcw-actions {\n  display: flex;\n  gap: 12px;\n  margin-top: 22px;\n}\n\n#bmcw-widget .bmcw-btn {\n  border: 0;\n  border-radius: 999px;\n  padding: 16px 24px;\n  font: inherit;\n  font-weight: 700;\n  text-transform: uppercase;\n  cursor: pointer;\n}\n\n#bmcw-widget .bmcw-btn-primary {\n  flex: 1;\n  color: #fff;\n  background: linear-gradient(90deg, var(--bmcw-primary), var(--bmcw-primary-strong));\n}\n\n#bmcw-widget .bmcw-btn-muted {\n  color: #4f5a74;\n  background: #e8edf8;\n}\n\n#bmcw-widget .bmcw-hidden {\n  display: none;\n}\n\n@media (max-width: 760px) {\n  #bmcw-widget .bmcw-page {\n    padding: 10px;\n  }\n\n  #bmcw-widget .bmcw-card {\n    padding: 22px 16px 24px;\n    border-radius: 22px;\n  }\n\n  #bmcw-widget .bmcw-fields,\n  #bmcw-widget .bmcw-plans-three,\n  #bmcw-widget .bmcw-plans-two {\n    grid-template-columns: 1fr;\n  }\n\n  #bmcw-widget .bmcw-actions {\n    flex-direction: column;\n  }\n\n  #bmcw-widget .bmcw-btn {\n    width: 100%;\n  }\n}\n\n@media (max-width: 560px) {\n  #bmcw-widget .bmcw-page {\n    padding: 8px;\n  }\n\n  #bmcw-widget .bmcw-card {\n    padding: 18px 14px 20px;\n    border-radius: 18px;\n  }\n\n  #bmcw-widget .bmcw-header h1 {\n    font-size: 1.9rem;\n    line-height: 1.2;\n  }\n\n  #bmcw-widget .bmcw-progress {\n    margin: 14px 0 22px;\n  }\n\n  #bmcw-widget .bmcw-progress-dot {\n    width: 34px;\n    height: 5px;\n  }\n\n  #bmcw-widget .bmcw-section-title {\n    font-size: 1.05rem;\n    margin-bottom: 14px;\n  }\n\n  #bmcw-widget .bmcw-section-gap {\n    margin-top: 22px;\n  }\n\n  #bmcw-widget .bmcw-fields {\n    gap: 14px;\n  }\n\n  #bmcw-widget .bmcw-field span {\n    font-size: 0.82rem;\n  }\n\n  #bmcw-widget .bmcw-field input,\n  #bmcw-widget .bmcw-field textarea,\n  #bmcw-widget .bmcw-field select {\n    padding: 14px 12px;\n    font-size: 0.95rem;\n  }\n\n  #bmcw-widget .bmcw-option-card {\n    padding: 15px;\n    border-radius: 14px;\n  }\n\n  #bmcw-widget .bmcw-option-card strong {\n    font-size: 0.98rem;\n  }\n\n  #bmcw-widget .bmcw-option-card .bmcw-price {\n    font-size: 0.95rem;\n  }\n\n  #bmcw-widget .bmcw-option-card p {\n    font-size: 0.9rem;\n  }\n\n  #bmcw-widget .bmcw-mini-option {\n    font-size: 0.84rem;\n    padding: 7px 8px;\n  }\n\n  #bmcw-widget .bmcw-discount {\n    padding: 10px 12px;\n  }\n\n  #bmcw-widget .bmcw-discount-level {\n    font-size: 0.92rem;\n  }\n\n  #bmcw-widget .bmcw-discount-price {\n    font-size: 0.85rem;\n  }\n\n  #bmcw-widget .bmcw-actions {\n    gap: 10px;\n    margin-top: 18px;\n  }\n\n  #bmcw-widget .bmcw-btn {\n    padding: 14px 18px;\n    font-size: 0.95rem;\n  }\n\n  #bmcw-widget .bmcw-message {\n    font-size: 0.9rem;\n  }\n}\n\n@media (max-width: 380px) {\n  #bmcw-widget .bmcw-header h1 {\n    font-size: 1.6rem;\n  }\n\n  #bmcw-widget .bmcw-progress-dot {\n    width: 28px;\n  }\n\n  #bmcw-widget .bmcw-card {\n    padding: 16px 12px 18px;\n  }\n\n  #bmcw-widget .bmcw-btn {\n    font-size: 0.9rem;\n  }\n}\n<\/style>\n            <\/head>\n            <body>\n                \n\n\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Book My Custom Website<\/title>\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700;800&amp;display=swap\" rel=\"stylesheet\">\n  <link rel=\"stylesheet\" href=\"styles.css\">\n\n\n  <main id=\"bmcw-widget\" class=\"bmcw-widget\">\n    <section class=\"bmcw-page\">\n      <section class=\"bmcw-card\">\n        <header class=\"bmcw-header\">\n          <h1>BOOK MY CUSTOM WEBSITE<\/h1>\n          <div class=\"bmcw-progress\" aria-label=\"Form progress\">\n            <span class=\"bmcw-progress-dot active\" data-step=\"1\"><\/span>\n            <span class=\"bmcw-progress-dot\" data-step=\"2\"><\/span>\n            <span class=\"bmcw-progress-dot\" data-step=\"3\"><\/span>\n          <\/div>\n        <\/header>\n\n        <form id=\"bmcwWebsiteForm\" novalidate=\"\">\n          <section class=\"bmcw-step active\" data-step=\"1\">\n            <div class=\"bmcw-fields bmcw-fields-single\">\n              <label class=\"bmcw-field\">\n                <span>Name<\/span>\n                <input type=\"text\" name=\"leadName\" placeholder=\"Enter your name\" required=\"\">\n              <\/label>\n\n              <label class=\"bmcw-field\">\n                <span>WhatsApp Number<\/span>\n                <input type=\"tel\" name=\"leadWhatsapp\" placeholder=\"Enter WhatsApp number\" required=\"\">\n              <\/label>\n            <\/div>\n          <\/section>\n\n          <section class=\"bmcw-step\" data-step=\"2\">\n            <div class=\"bmcw-section-title\">Choose Website Plan<\/div>\n            <div class=\"bmcw-plans bmcw-plans-three\">\n              <label class=\"bmcw-option-card\">\n                <input type=\"radio\" name=\"plan\" value=\"Basic Plan\" required=\"\">\n                <strong>Basic Plan<\/strong>\n                <span class=\"bmcw-price\">Rs 5999<\/span>\n                <p>Simple website package.<\/p>\n              <\/label>\n\n              <label class=\"bmcw-option-card\">\n                <input type=\"radio\" name=\"plan\" value=\"Standard Plan\" required=\"\">\n                <strong>Standard Plan<\/strong>\n                <span class=\"bmcw-price\">Rs 7999<\/span>\n                <p>Business-ready standard package.<\/p>\n              <\/label>\n\n              <label class=\"bmcw-option-card\">\n                <input type=\"radio\" name=\"plan\" value=\"Premium Plan with WhatsApp Orders\" required=\"\">\n                <strong>Premium Plan<\/strong>\n                <span class=\"bmcw-price\">Rs 19999<\/span>\n                <p>Premium package with WhatsApp orders.<\/p>\n              <\/label>\n            <\/div>\n\n            <div class=\"bmcw-section-title bmcw-section-gap\">Choose Payment Option<\/div>\n            <div class=\"bmcw-plans bmcw-plans-two\">\n              <label class=\"bmcw-option-card\" id=\"bmcwPrepaidCard\">\n                <input type=\"radio\" name=\"paymentOption\" value=\"PrePaid - Token - Rs 500 - 7 Days\" required=\"\">\n                <strong>PrePaid<\/strong>\n                <span class=\"bmcw-price\" id=\"bmcwPrepaidPrice\">Rs 500<\/span>\n                <p id=\"bmcwPrepaidText\">Token Rs 500 selected. Full advance option par plan-wise discount milega. Delivery time 7 Days.<\/p>\n\n                <div class=\"bmcw-prepaid-modes\" id=\"bmcwPrepaidModes\">\n                  <label class=\"bmcw-mini-option\">\n                    <input type=\"radio\" name=\"prepaidMode\" value=\"Token Rs 500\" checked=\"\">\n                    <span>Token Advance Payment: Rs 500<\/span>\n                  <\/label>\n                  <label class=\"bmcw-mini-option\">\n                    <input type=\"radio\" name=\"prepaidMode\" value=\"Full Advance\">\n                    <span>Full Advance Payment: Discount Apply<\/span>\n                  <\/label>\n                <\/div>\n              <\/label>\n\n              <label class=\"bmcw-option-card\" id=\"bmcwPostpaidCard\">\n                <input type=\"radio\" name=\"paymentOption\" value=\"PostPaid - Rs 5999 - 3 to 4 Weeks\" required=\"\">\n                <strong>PostPaid<\/strong>\n                <span class=\"bmcw-price\" id=\"bmcwPostpaidPrice\">Rs 5999<\/span>\n                <p id=\"bmcwPostpaidText\">No discount for Basic Plan. Delivery time 3 to 4 Weeks.<\/p>\n              <\/label>\n            <\/div>\n\n            <div class=\"bmcw-discount bmcw-hidden\" id=\"bmcwPrepaidDiscount\" aria-live=\"polite\">\n              <p class=\"bmcw-discount-title\">PrePaid Discount Active<\/p>\n              <p class=\"bmcw-discount-level\" id=\"bmcwDiscountLevel\">Basic Plan: 5% OFF<\/p>\n              <p class=\"bmcw-discount-price\" id=\"bmcwDiscountPrice\">Base Rs 5999 -&gt; Discount Rs 300 -&gt; Final Rs 5699 | Delivery 7 Days<\/p>\n            <\/div>\n          <\/section>\n\n          <section class=\"bmcw-step\" data-step=\"3\">\n            <div class=\"bmcw-fields\">\n              <label class=\"bmcw-field\">\n                <span>Full Name<\/span>\n                <input type=\"text\" name=\"fullName\" placeholder=\"Enter full name\" required=\"\">\n              <\/label>\n\n              <label class=\"bmcw-field\">\n                <span>Email ID<\/span>\n                <input type=\"email\" name=\"email\" placeholder=\"Enter email ID\" required=\"\">\n              <\/label>\n\n              <label class=\"bmcw-field\">\n                <span>WhatsApp Number<\/span>\n                <input type=\"tel\" name=\"whatsapp\" placeholder=\"Enter WhatsApp number\" required=\"\">\n              <\/label>\n\n              <label class=\"bmcw-field\">\n                <span>Business Name<\/span>\n                <input type=\"text\" name=\"businessName\" placeholder=\"Enter business name\" required=\"\">\n              <\/label>\n\n              <label class=\"bmcw-field\">\n                <span>City<\/span>\n                <input type=\"text\" name=\"city\" placeholder=\"Enter city\" required=\"\">\n              <\/label>\n\n              <label class=\"bmcw-field\">\n                <span>State<\/span>\n                <input type=\"text\" name=\"state\" placeholder=\"Enter state\" required=\"\">\n              <\/label>\n\n              <label class=\"bmcw-field\">\n                <span>Pin Code<\/span>\n                <input type=\"text\" name=\"pinCode\" placeholder=\"Enter pin code\" required=\"\">\n              <\/label>\n\n              <label class=\"bmcw-field\">\n                <span>Industry \/ Business Type<\/span>\n                <input type=\"text\" name=\"industry\" placeholder=\"Enter business type\" required=\"\">\n              <\/label>\n\n              <label class=\"bmcw-field bmcw-field-full\">\n                <span>Business Address<\/span>\n                <textarea name=\"businessAddress\" rows=\"4\" placeholder=\"Enter business address\" required=\"\"><\/textarea>\n              <\/label>\n\n              <label class=\"bmcw-field\">\n                <span>Business Display Number<\/span>\n                <input type=\"tel\" name=\"businessDisplayNumber\" placeholder=\"Enter display number\" required=\"\">\n              <\/label>\n\n              <label class=\"bmcw-field\">\n                <span>Business Logo (if available)<\/span>\n                <select name=\"businessLogo\" required=\"\">\n                  <option value=\"\">Select option<\/option>\n                  <option value=\"Yes\">Yes<\/option>\n                  <option value=\"No\">No<\/option>\n                <\/select>\n              <\/label>\n            <\/div>\n          <\/section>\n\n          <p class=\"bmcw-message\" id=\"bmcwFormMessage\" aria-live=\"polite\"><\/p>\n\n          <div class=\"bmcw-actions\">\n            <button type=\"button\" class=\"bmcw-btn bmcw-btn-muted bmcw-hidden\" id=\"bmcwPrevBtn\">Back<\/button>\n            <button type=\"button\" class=\"bmcw-btn bmcw-btn-primary\" id=\"bmcwNextBtn\">Next Page<\/button>\n            <button type=\"submit\" class=\"bmcw-btn bmcw-btn-primary bmcw-hidden\" id=\"bmcwSubmitBtn\">Submit on WhatsApp<\/button>\n          <\/div>\n        <\/form>\n      <\/section>\n    <\/section>\n  <\/main>\n\n  <script src=\"script.js\"><\/script>\n\n\n\n                <script>const root = document.getElementById(\"bmcw-widget\");\n\nif (root) {\n  const form = root.querySelector(\"#bmcwWebsiteForm\");\n  const steps = [...root.querySelectorAll(\".bmcw-step\")];\n  const dots = [...root.querySelectorAll(\".bmcw-progress-dot\")];\n  const prevBtn = root.querySelector(\"#bmcwPrevBtn\");\n  const nextBtn = root.querySelector(\"#bmcwNextBtn\");\n  const submitBtn = root.querySelector(\"#bmcwSubmitBtn\");\n  const formMessage = root.querySelector(\"#bmcwFormMessage\");\n  const allCards = [...root.querySelectorAll(\".bmcw-option-card\")];\n  const planInputs = [...root.querySelectorAll('input[name=\"plan\"]')];\n  const paymentInputs = [...root.querySelectorAll('input[name=\"paymentOption\"]')];\n  const prepaidModeInputs = [...root.querySelectorAll('input[name=\"prepaidMode\"]')];\n  const prepaidPrice = root.querySelector(\"#bmcwPrepaidPrice\");\n  const prepaidText = root.querySelector(\"#bmcwPrepaidText\");\n  const postpaidPrice = root.querySelector(\"#bmcwPostpaidPrice\");\n  const postpaidText = root.querySelector(\"#bmcwPostpaidText\");\n  const prepaidDiscount = root.querySelector(\"#bmcwPrepaidDiscount\");\n  const discountLevel = root.querySelector(\"#bmcwDiscountLevel\");\n  const discountPrice = root.querySelector(\"#bmcwDiscountPrice\");\n\n  const whatsappNumber = \"9753023709\";\n  let currentStep = 1;\n\n  const planPrices = {\n    \"Basic Plan\": 5999,\n    \"Standard Plan\": 7999,\n    \"Premium Plan with WhatsApp Orders\": 19999\n  };\n\n  const prepaidDiscountPercents = {\n    \"Basic Plan\": 5,\n    \"Standard Plan\": 8,\n    \"Premium Plan with WhatsApp Orders\": 10\n  };\n\n  function showStep(stepNumber) {\n    steps.forEach((step) => {\n      step.classList.toggle(\"active\", Number(step.dataset.step) === stepNumber);\n    });\n\n    dots.forEach((dot) => {\n      const dotStep = Number(dot.dataset.step);\n      dot.classList.toggle(\"active\", dotStep === stepNumber);\n      dot.classList.toggle(\"done\", dotStep < stepNumber);\n    });\n\n    prevBtn.classList.toggle(\"bmcw-hidden\", stepNumber === 1);\n    nextBtn.classList.toggle(\"bmcw-hidden\", stepNumber === steps.length);\n    submitBtn.classList.toggle(\"bmcw-hidden\", stepNumber !== steps.length);\n    formMessage.textContent = \"\";\n  }\n\n  function fieldsForStep(stepNumber) {\n    const step = root.querySelector(`.bmcw-step[data-step=\"${stepNumber}\"]`);\n    return [...step.querySelectorAll(\"input, textarea, select\")];\n  }\n\n  function selectedPlanPrice() {\n    const chosenPlan = planInputs.find((input) => input.checked);\n    return chosenPlan ? planPrices[chosenPlan.value] : 5999;\n  }\n\n  function selectedPlanName() {\n    const chosenPlan = planInputs.find((input) => input.checked);\n    return chosenPlan ? chosenPlan.value : \"Basic Plan\";\n  }\n\n  function getPrepaidSummary() {\n    const planName = selectedPlanName();\n    const basePrice = selectedPlanPrice();\n    const discountPercent = prepaidDiscountPercents[planName] || 0;\n    const discountAmount = Math.round((basePrice * discountPercent) \/ 100);\n    const finalPrice = basePrice - discountAmount;\n\n    return {\n      planName,\n      basePrice,\n      discountPercent,\n      discountAmount,\n      finalPrice\n    };\n  }\n\n  function getPrepaidMode() {\n    const modeInput = prepaidModeInputs.find((input) => input.checked);\n    return modeInput ? modeInput.value : \"Token Rs 500\";\n  }\n\n  function getPrepaidDetails() {\n    const summary = getPrepaidSummary();\n    const mode = getPrepaidMode();\n\n    if (mode === \"Full Advance\") {\n      return {\n        mode,\n        discountActive: true,\n        amount: summary.finalPrice,\n        displayPrice: `Rs ${summary.finalPrice}`,\n        paymentValue: `PrePaid - Full Advance - Rs ${summary.finalPrice} - 7 Days`,\n        infoText: `Base Rs ${summary.basePrice}. ${summary.discountPercent}% discount for ${summary.planName}. Delivery time 7 Days.`,\n        summary\n      };\n    }\n\n    return {\n      mode,\n      discountActive: false,\n      amount: 500,\n      displayPrice: \"Rs 500\",\n      paymentValue: \"PrePaid - Token - Rs 500 - 7 Days\",\n      infoText: \"Token Rs 500 selected. Full advance option par plan-wise discount milega. Delivery time 7 Days.\",\n      summary\n    };\n  }\n\n  function updatePaymentPrices() {\n    const prepaidDetails = getPrepaidDetails();\n    const planName = selectedPlanName();\n    const postpaidBasePrice = selectedPlanPrice();\n    const prepaidInput = paymentInputs.find((input) => input.value.startsWith(\"PrePaid\"));\n    const postpaidInput = paymentInputs.find((input) => input.value.startsWith(\"PostPaid\"));\n    const postpaidDeliveryTime = \"3 to 4 Weeks\";\n\n    if (!prepaidInput || !postpaidInput) {\n      return;\n    }\n\n    prepaidInput.value = prepaidDetails.paymentValue;\n    prepaidPrice.textContent = prepaidDetails.displayPrice;\n    prepaidText.textContent = prepaidDetails.infoText;\n\n    postpaidInput.value = `PostPaid - Rs ${postpaidBasePrice} - ${postpaidDeliveryTime}`;\n    postpaidPrice.textContent = `Rs ${postpaidBasePrice}`;\n    postpaidText.textContent = `No discount for ${planName}. Delivery time ${postpaidDeliveryTime}.`;\n  }\n\n  function updatePrepaidDiscountView() {\n    const selectedPayment = paymentInputs.find((input) => input.checked);\n    const prepaidSelected = selectedPayment && selectedPayment.value.startsWith(\"PrePaid\");\n    const prepaidDetails = getPrepaidDetails();\n\n    if (!prepaidSelected || !prepaidDetails.discountActive) {\n      prepaidDiscount.classList.add(\"bmcw-hidden\");\n      return;\n    }\n\n    const summary = prepaidDetails.summary;\n    discountLevel.textContent = `${summary.planName}: ${summary.discountPercent}% OFF`;\n    discountPrice.textContent = `Base Rs ${summary.basePrice} -> Discount Rs ${summary.discountAmount} -> Final Rs ${summary.finalPrice} | Delivery 7 Days`;\n    prepaidDiscount.classList.remove(\"bmcw-hidden\");\n  }\n\n  function updateCardState() {\n    allCards.forEach((card) => {\n      const radio = card.querySelector('input[type=\"radio\"]');\n      card.classList.toggle(\"selected\", radio.checked);\n    });\n  }\n\n  function validateStep(stepNumber) {\n    const fields = fieldsForStep(stepNumber);\n\n    for (const field of fields) {\n      if (field.type === \"radio\") {\n        if (field.name === \"prepaidMode\") {\n          const selectedPayment = form.querySelector('input[name=\"paymentOption\"]:checked');\n          const prepaidSelected = selectedPayment && selectedPayment.value.startsWith(\"PrePaid\");\n\n          if (!prepaidSelected) {\n            continue;\n          }\n        }\n\n        const group = form.querySelectorAll(`input[name=\"${field.name}\"]`);\n        const checked = [...group].some((radio) => radio.checked);\n\n        if (!checked) {\n          formMessage.textContent = field.name === \"paymentOption\"\n            ? \"Please choose a payment option.\"\n            : field.name === \"prepaidMode\"\n              ? \"Please choose prepaid mode.\"\n            : \"Please choose a website plan.\";\n          return false;\n        }\n        continue;\n      }\n\n      if (!field.value.trim()) {\n        formMessage.textContent = \"Please fill all required fields.\";\n        field.focus();\n        return false;\n      }\n\n      if (field.name === \"email\" && !\/^\\S+@\\S+\\.\\S+$\/.test(field.value.trim())) {\n        formMessage.textContent = \"Please enter a valid email ID.\";\n        field.focus();\n        return false;\n      }\n\n      if ([\"leadWhatsapp\", \"whatsapp\", \"businessDisplayNumber\"].includes(field.name)) {\n        const number = field.value.replace(\/\\D\/g, \"\");\n        if (!\/^\\d{10}$\/.test(number)) {\n          formMessage.textContent = \"Please enter a valid 10 digit phone number.\";\n          field.focus();\n          return false;\n        }\n      }\n    }\n\n    formMessage.textContent = \"\";\n    return true;\n  }\n\n  function whatsappMessage(data) {\n    const prepaidDetails = getPrepaidDetails();\n    const summary = prepaidDetails.summary;\n    const selectedPayment = data.get(\"paymentOption\");\n    const prepaidNote = selectedPayment && String(selectedPayment).startsWith(\"PrePaid\")\n      ? prepaidDetails.discountActive\n        ? `PrePaid Mode: Full Advance | Discount: ${summary.discountPercent}% OFF (Final Rs ${summary.finalPrice}, Delivery 7 Days)`\n        : \"PrePaid Mode: Token Rs 500 | Discount: Not applied\"\n      : \"PrePaid Discount: Not selected\";\n\n    return [\n      \"Hello, I want to book my custom website.\",\n      \"\",\n      \"*Page 1*\",\n      `Name: ${data.get(\"leadName\")}`,\n      `WhatsApp Number: ${data.get(\"leadWhatsapp\")}`,\n      \"\",\n      \"*Page 2*\",\n      `Website Plan: ${data.get(\"plan\")} - Rs ${selectedPlanPrice()}`,\n      `Payment Option: ${data.get(\"paymentOption\")}`,\n      prepaidNote,\n      \"\",\n      \"*Last Page*\",\n      `Full Name: ${data.get(\"fullName\")}`,\n      `Email ID: ${data.get(\"email\")}`,\n      `WhatsApp Number: ${data.get(\"whatsapp\")}`,\n      `Business Name: ${data.get(\"businessName\")}`,\n      `City: ${data.get(\"city\")}`,\n      `State: ${data.get(\"state\")}`,\n      `Pin Code: ${data.get(\"pinCode\")}`,\n      `Industry \/ Business Type: ${data.get(\"industry\")}`,\n      `Business Address: ${data.get(\"businessAddress\")}`,\n      `Business Display Number: ${data.get(\"businessDisplayNumber\")}`,\n      `Business Logo Available: ${data.get(\"businessLogo\")}`,\n      \"\",\n      \"Looking forward to your response.\",\n      \"Thank you!\"\n    ].join(\"\\n\");\n  }\n\n  allCards.forEach((card) => {\n    card.addEventListener(\"click\", () => {\n      const radio = card.querySelector('input[type=\"radio\"]');\n      radio.checked = true;\n      updatePaymentPrices();\n      updatePrepaidDiscountView();\n\n      updateCardState();\n      formMessage.textContent = \"\";\n    });\n  });\n\n  planInputs.forEach((input) => {\n    input.addEventListener(\"change\", () => {\n      updatePaymentPrices();\n      updatePrepaidDiscountView();\n      updateCardState();\n    });\n  });\n\n  paymentInputs.forEach((input) => {\n    input.addEventListener(\"change\", () => {\n      updatePaymentPrices();\n      updatePrepaidDiscountView();\n      updateCardState();\n    });\n  });\n\n  prepaidModeInputs.forEach((input) => {\n    input.addEventListener(\"change\", () => {\n      const prepaidInput = paymentInputs.find((payment) => payment.value.startsWith(\"PrePaid\"));\n      if (prepaidInput) {\n        prepaidInput.checked = true;\n      }\n\n      updatePaymentPrices();\n      updatePrepaidDiscountView();\n      updateCardState();\n      formMessage.textContent = \"\";\n    });\n  });\n\n  prevBtn.addEventListener(\"click\", () => {\n    currentStep -= 1;\n    showStep(currentStep);\n  });\n\n  nextBtn.addEventListener(\"click\", () => {\n    if (!validateStep(currentStep)) {\n      return;\n    }\n\n    currentStep += 1;\n    showStep(currentStep);\n  });\n\n  form.addEventListener(\"submit\", (event) => {\n    event.preventDefault();\n\n    if (!validateStep(currentStep)) {\n      return;\n    }\n\n    const data = new FormData(form);\n    const url = `https:\/\/wa.me\/${whatsappNumber}?text=${encodeURIComponent(whatsappMessage(data))}`;\n    window.open(url, \"_blank\");\n  });\n\n  showStep(currentStep);\n  updatePaymentPrices();\n  updatePrepaidDiscountView();\n  updateCardState();\n}\n<\/script>\n            \n        \n    <\/body>\n","protected":false},"excerpt":{"rendered":"<p>Book My Custom Website BOOK MY CUSTOM WEBSITE Name WhatsApp Number Choose Website Plan Basic Plan Rs 5999 Simple website package. Standard Plan Rs 7999 Business-ready standard package. Premium Plan Rs 19999 Premium package with WhatsApp orders. Choose Payment Option PrePaid Rs 500 Token Rs 500 selected. Full advance option par plan-wise discount milega. Delivery [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"ub_ctt_via":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"disabled","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2120","post","type-post","status-publish","format-standard","hentry","category-blog"],"featured_image_src":null,"author_info":{"display_name":"SkjWorldService","author_link":"https:\/\/websolution.skjworldservice.com\/author\/skjworldservice\/"},"_links":{"self":[{"href":"https:\/\/websolution.skjworldservice.com\/index.php\/wp-json\/wp\/v2\/posts\/2120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/websolution.skjworldservice.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/websolution.skjworldservice.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/websolution.skjworldservice.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/websolution.skjworldservice.com\/index.php\/wp-json\/wp\/v2\/comments?post=2120"}],"version-history":[{"count":6,"href":"https:\/\/websolution.skjworldservice.com\/index.php\/wp-json\/wp\/v2\/posts\/2120\/revisions"}],"predecessor-version":[{"id":2190,"href":"https:\/\/websolution.skjworldservice.com\/index.php\/wp-json\/wp\/v2\/posts\/2120\/revisions\/2190"}],"wp:attachment":[{"href":"https:\/\/websolution.skjworldservice.com\/index.php\/wp-json\/wp\/v2\/media?parent=2120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/websolution.skjworldservice.com\/index.php\/wp-json\/wp\/v2\/categories?post=2120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/websolution.skjworldservice.com\/index.php\/wp-json\/wp\/v2\/tags?post=2120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}