{"id":6882,"date":"2026-05-20T22:39:48","date_gmt":"2026-05-20T22:39:48","guid":{"rendered":"https:\/\/htmlbasket.com\/?page_id=6882"},"modified":"2026-07-06T02:10:18","modified_gmt":"2026-07-06T02:10:18","slug":"website-order","status":"publish","type":"page","link":"https:\/\/htmlbasket.com\/?page_id=6882","title":{"rendered":"Website Order"},"content":{"rendered":"        <div class=\"hbop\">\n          <main class=\"order-shell\">\n            <section class=\"order-main\" aria-labelledby=\"hbop-title\">\n              <div class=\"intro\"><p class=\"eyebrow\">Order now<\/p><h1 id=\"hbop-title\">Start a website development order<\/h1><p>Choose the service, pages, project details, and payment option. The order total updates as you go.<\/p><\/div>\n              <ol class=\"steps\" aria-label=\"Order progress\"><li class=\"step active\" data-step-indicator=\"1\"><span>1<\/span>Service<\/li><li class=\"step\" data-step-indicator=\"2\"><span>2<\/span>Pages<\/li><li class=\"step\" data-step-indicator=\"3\"><span>3<\/span>Details<\/li><li class=\"step\" data-step-indicator=\"4\"><span>4<\/span>Payment<\/li><\/ol>\n              <form id=\"hbopOrderForm\" enctype=\"multipart\/form-data\" novalidate>\n                <input type=\"hidden\" name=\"action\" value=\"hbop_submit_order\"><input type=\"hidden\" name=\"nonce\" value=\"\">\n                <section class=\"panel active\" data-step-panel=\"1\"><div class=\"panel-heading\"><span class=\"panel-kicker\">Step 1<\/span><h2>Select service<\/h2><\/div><div class=\"choice-grid service-grid\" role=\"radiogroup\" aria-label=\"Service\">\n                  <label class=\"choice-card\"><input type=\"radio\" name=\"service\" value=\"Any Design to Responsive HTML\" data-price=\"109\"  checked='checked'><span class=\"choice-icon\">HTML<\/span><strong>Any Design to Responsive HTML<\/strong><span class=\"service-price\">$109<\/span><small>Responsive, hand-coded front end from your design files.<\/small><\/label><label class=\"choice-card\"><input type=\"radio\" name=\"service\" value=\"WordPress Development\" data-price=\"149\" ><span class=\"choice-icon\">WP<\/span><strong>WordPress Development<\/strong><span class=\"service-price\">$149<\/span><small>Custom WordPress development from your approved design.<\/small><\/label><label class=\"choice-card\"><input type=\"radio\" name=\"service\" value=\"Figma to Webflow\" data-price=\"799\" ><span class=\"choice-icon\">WF<\/span><strong>Figma to Webflow<\/strong><span class=\"service-price\">$799<\/span><small>Responsive Webflow build with CMS-ready structure.<\/small><\/label><label class=\"choice-card\"><input type=\"radio\" name=\"service\" value=\"Shopify Development\" data-price=\"349\" ><span class=\"choice-icon\">SHOP<\/span><strong>Shopify Development<\/strong><span class=\"service-price\">$349<\/span><small>Product-ready storefront pages and theme sections.<\/small><\/label><label class=\"choice-card\"><input type=\"radio\" name=\"service\" value=\"Responsive Email Template\" data-price=\"109\" ><span class=\"choice-icon\">MAIL<\/span><strong>Responsive Email Template<\/strong><span class=\"service-price\">$109<\/span><small>Responsive HTML email tested for major clients.<\/small><\/label><label class=\"choice-card\"><input type=\"radio\" name=\"service\" value=\"Drupal Development\" data-price=\"799\" ><span class=\"choice-icon\">DRU<\/span><strong>Drupal Development<\/strong><span class=\"service-price\">$799<\/span><small>Drupal-ready build for structured content workflows.<\/small><\/label><label class=\"choice-card\"><input type=\"radio\" name=\"service\" value=\"HTML to WordPress\" data-price=\"109\" ><span class=\"choice-icon\">WP<\/span><strong>HTML to WordPress<\/strong><span class=\"service-price\">$109<\/span><small>Convert existing HTML into a WordPress-ready site.<\/small><\/label><label class=\"choice-card\"><input type=\"radio\" name=\"service\" value=\"Static HTML to Responsive Website\" data-price=\"109\" ><span class=\"choice-icon\">HTML<\/span><strong>Static HTML to Responsive Website<\/strong><span class=\"service-price\">$109<\/span><small>Make static HTML responsive across modern devices.<\/small><\/label>                <\/div><div class=\"form-actions\"><button type=\"button\" class=\"button primary next-step\">Continue<\/button><\/div><\/section>\n                <section class=\"panel\" data-step-panel=\"2\"><div class=\"panel-heading\"><span class=\"panel-kicker\">Step 2<\/span><h2>Number of pages<\/h2><\/div><div class=\"single-field\"><div class=\"field-block\"><label for=\"hbopPages\">Number of pages<\/label><div class=\"stepper\"><button type=\"button\" id=\"decreasePages\" aria-label=\"Decrease pages\">-<\/button><input id=\"hbopPages\" name=\"pages\" type=\"number\" min=\"1\" max=\"40\" value=\"1\"><button type=\"button\" id=\"increasePages\" aria-label=\"Increase pages\">+<\/button><\/div><small>Homepage is included. Extra pages are $75 each.<\/small><\/div><\/div><div class=\"form-actions\"><button type=\"button\" class=\"button ghost prev-step\">Back<\/button><button type=\"button\" class=\"button primary next-step\">Continue<\/button><\/div><\/section>\n                <section class=\"panel\" data-step-panel=\"3\"><div class=\"panel-heading\"><span class=\"panel-kicker\">Step 3<\/span><h2>Your details<\/h2><\/div><div class=\"form-grid\"><label class=\"field\"><span>Full name<\/span><input name=\"name\" required placeholder=\"Jane Cooper\"><\/label><label class=\"field\"><span>Email address<\/span><input name=\"email\" type=\"email\" required placeholder=\"jane@example.com\"><\/label><label class=\"field\"><span>Phone or WhatsApp<\/span><input name=\"phone\" required placeholder=\"+1 555 0199\"><\/label><label class=\"field\"><span>Company or agency<\/span><input name=\"company\" placeholder=\"Acme Studio\"><\/label><label class=\"field full\"><span>Project notes<\/span><textarea name=\"notes\" rows=\"5\" required placeholder=\"Share design links, CMS needs, animation notes, or deadline context.\"><\/textarea><\/label><label class=\"upload full\" for=\"hbopFiles\"><input id=\"hbopFiles\" name=\"files[]\" type=\"file\" multiple><span class=\"upload-icon\">UP<\/span><strong>Upload design files<\/strong><small id=\"fileList\">PDF, ZIP, PNG, JPG, WebP, DOC, or brief documents<\/small><\/label><label class=\"check-row full\"><input type=\"checkbox\" name=\"portfolio\" value=\"1\"><span>Yes, you may show this project in your portfolio for a $40 discount.<\/span><\/label><div class=\"coupon-row full\"><label for=\"coupon\">Coupon code<\/label><div><input id=\"coupon\" name=\"coupon\" placeholder=\"Try HB10\"><button type=\"button\" class=\"button secondary\" id=\"applyCoupon\">Apply<\/button><\/div><small id=\"couponMessage\" aria-live=\"polite\"><\/small><\/div><\/div><div class=\"form-actions\"><button type=\"button\" class=\"button ghost prev-step\">Back<\/button><button type=\"button\" class=\"button primary next-step\">Continue<\/button><\/div><\/section>\n                <section class=\"panel\" data-step-panel=\"4\"><div class=\"panel-heading\"><span class=\"panel-kicker\">Step 4<\/span><h2>Complete order<\/h2><\/div><div class=\"payment-methods\"><label><input type=\"radio\" name=\"payment\" value=\"Card\" checked><span><strong>Card<\/strong><small>Continue to card payment after submission<\/small><\/span><\/label><label><input type=\"radio\" name=\"payment\" value=\"PayPal\"><span><strong>PayPal<\/strong><small>Continue to PayPal after submission<\/small><\/span><\/label><label><input type=\"radio\" name=\"payment\" value=\"Bank Transfer\"><span><strong>Bank transfer<\/strong><small>Receive invoice details by email<\/small><\/span><\/label><\/div><label class=\"check-row terms-row\"><input type=\"checkbox\" name=\"terms\" value=\"1\" required><span>I agree to the Terms & Conditions.<\/span><\/label><div class=\"notice\" id=\"hbopNotice\" aria-live=\"polite\"><\/div><div class=\"form-actions\"><button type=\"button\" class=\"button ghost prev-step\">Back<\/button><button type=\"submit\" class=\"button primary\" id=\"placeOrder\">Place order<\/button><\/div><\/section>\n              <\/form>\n            <\/section>\n            <aside class=\"summary\"><div class=\"summary-card\"><h2>Order summary<\/h2><dl><div><dt>Service<\/dt><dd id=\"summaryService\">Any Design to Responsive HTML<\/dd><\/div><div><dt>Pages<\/dt><dd id=\"summaryPages\">1 page<\/dd><\/div><\/dl><div class=\"price-lines\"><div><span>Base price<\/span><strong id=\"summaryBase\">$109<\/strong><\/div><div><span>Extra pages<\/span><strong id=\"summaryExtraPages\">$0<\/strong><\/div><div><span>Portfolio discount<\/span><strong id=\"summaryPortfolio\">$0<\/strong><\/div><div><span>Coupon<\/span><strong id=\"summaryCoupon\">$0<\/strong><\/div><\/div><div class=\"total-row\"><span>Total<\/span><strong id=\"summaryTotal\">$109<\/strong><\/div><ul class=\"trust-list\"><li>Money-back guarantee<\/li><li>Secure payment handling<\/li><li>24\/7 support team<\/li><\/ul><\/div><\/aside>\n          <\/main>\n          <dialog id=\"confirmation\"><div class=\"modal-content\"><span class=\"success-mark\">OK<\/span><h2>Order submitted<\/h2><p id=\"confirmationCopy\">Your request has been prepared.<\/p><div class=\"receipt\" id=\"receipt\"><\/div><div class=\"modal-actions\"><button type=\"button\" class=\"button ghost\" id=\"downloadReceipt\">Download receipt<\/button><button type=\"button\" class=\"button primary\" id=\"newOrder\">Start new order<\/button><\/div><\/div><\/dialog>\n        <\/div>\n        \n<style>.hbop { --bg:#f6f7f9; --surface:#fff; --surface-strong:#f0f4f7; --text:#15202b; --muted:#667585; --line:#d9e0e7; --primary:#0e766e; --primary-dark:#0a5c56; --accent:#b43f2f; --shadow:0 20px 50px rgba(21,32,43,.12); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif; }\n.hbop * { box-sizing:border-box; }\n.hbop .order-shell { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:28px; width:min(1180px,100%); margin:36px auto 56px; align-items:start; }\n.hbop .intro { margin-bottom:24px; }\n.hbop .eyebrow,.hbop .panel-kicker { margin:0 0 8px; color:var(--primary); font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:0; }\n.hbop h1,.hbop h2,.hbop p { margin-top:0; }\n.hbop h1 { max-width:760px; margin-bottom:10px; font-size:clamp(2rem,4vw,3.35rem); line-height:1.05; color:var(--text); }\n.hbop .intro p:last-child { max-width:670px; margin-bottom:0; color:var(--muted); font-size:1.05rem; }\n.hbop .steps { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; padding:0; margin:0 0 18px; list-style:none; }\n.hbop .step { display:flex; align-items:center; gap:8px; min-height:48px; padding:10px; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:8px; font-weight:700; font-size:.86rem; }\n.hbop .step span { display:grid; width:26px; height:26px; place-items:center; border-radius:50%; background:var(--surface-strong); color:var(--muted); font-size:.8rem; }\n.hbop .step.active,.hbop .step.done { color:var(--text); border-color:rgba(14,118,110,.38); }\n.hbop .step.active span,.hbop .step.done span { background:var(--primary); color:#fff; }\n.hbop .panel,.hbop .summary-card { background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); }\n.hbop .panel { display:none !important; padding:clamp(20px,4vw,34px); }\n.hbop .panel.active { display:block !important; }\n.hbop .panel-heading h2,.hbop .summary h2 { margin-bottom:18px; font-size:1.6rem; color:var(--text); }\n.hbop .choice-grid,.hbop .package-grid,.hbop .split-fields,.hbop .form-grid { display:grid; gap:14px; }\n.hbop .service-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }\n.hbop .choice-card,.hbop .package-card,.hbop .delivery-options label,.hbop .payment-methods label { position:relative; display:flex; border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer; transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease; }\n.hbop .choice-card { min-height:170px; padding:18px; flex-direction:column; gap:10px; }\n.hbop .choice-card:hover,.hbop .package-card:hover,.hbop .delivery-options label:hover,.hbop .payment-methods label:hover { border-color:rgba(14,118,110,.55); box-shadow:0 10px 26px rgba(21,32,43,.08); transform:translateY(-1px); }\n.hbop input[type=radio],.hbop input[type=checkbox] { accent-color:var(--primary); }\n.hbop .choice-card input,.hbop .package-card input { position:absolute; inset:14px 14px auto auto; }\n.hbop .choice-card:has(input:checked),.hbop .package-card:has(input:checked),.hbop .delivery-options label:has(input:checked),.hbop .payment-methods label:has(input:checked) { border-color:var(--primary); box-shadow:0 0 0 3px rgba(14,118,110,.12); }\n.hbop .choice-icon,.hbop .upload-icon,.hbop .success-mark { display:grid; width:52px; height:42px; place-items:center; border-radius:8px; background:#e1f3ef; color:var(--primary-dark); font-size:.78rem; font-weight:900; }\n.hbop small,.hbop .package-card li { color:var(--muted); }\n.hbop .package-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }\n.hbop .package-card { min-height:330px; padding:24px; flex-direction:column; }\n.hbop .package-card.featured { border-color:rgba(180,63,47,.42); }\n.hbop .badge { position:absolute; top:18px; right:48px; padding:6px 9px; color:#fff; background:var(--accent); border-radius:999px; font-size:.74rem; font-weight:800; }\n.hbop .package-topline { color:var(--primary); font-size:.82rem; font-weight:800; }\n.hbop .package-card strong { margin-top:8px; font-size:1.45rem; }\n.hbop .price { margin:10px 0 18px; font-size:2.25rem; font-weight:900; }\n.hbop .package-card ul,.hbop .trust-list { padding:0; margin:0; list-style:none; }\n.hbop .package-card li,.hbop .trust-list li { position:relative; padding-left:24px; margin-top:10px; }\n.hbop .package-card li:before,.hbop .trust-list li:before { position:absolute; left:0; color:var(--primary); content:\"+\"; font-weight:900; }\n.hbop .split-fields { grid-template-columns:1fr 1fr; }\n.hbop .field-block,.hbop .coupon-row { padding:20px; background:var(--surface-strong); border-radius:8px; }\n.hbop .field-block label,.hbop .field span,.hbop .coupon-row label { display:block; margin-bottom:10px; font-weight:800; }\n.hbop .stepper { display:grid; grid-template-columns:52px 1fr 52px; overflow:hidden; height:56px; border:1px solid var(--line); border-radius:8px; background:#fff; }\n.hbop .stepper button,.hbop .button { border:0; cursor:pointer; font:inherit; font-weight:800; }\n.hbop .stepper button { color:var(--primary); background:#fff; font-size:1.3rem; }\n.hbop .stepper input { width:100%; border:0; border-inline:1px solid var(--line); text-align:center; font-size:1.1rem; font-weight:900; }\n.hbop .delivery-options,.hbop .payment-methods { display:grid; gap:12px; }\n.hbop .delivery-options label,.hbop .payment-methods label { align-items:flex-start; gap:12px; padding:16px; }\n.hbop .delivery-options strong,.hbop .delivery-options small,.hbop .payment-methods strong,.hbop .payment-methods small { display:block; }\n.hbop .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }\n.hbop .field.full,.hbop .upload.full,.hbop .check-row.full,.hbop .coupon-row.full { grid-column:1\/-1; }\n.hbop .field input,.hbop .field textarea,.hbop .coupon-row input { width:100%; border:1px solid var(--line); border-radius:8px; padding:13px 14px; color:var(--text); background:#fff; font:inherit; }\n.hbop .field input:focus,.hbop .field textarea:focus,.hbop .coupon-row input:focus,.hbop .stepper input:focus { outline:3px solid rgba(14,118,110,.18); border-color:var(--primary); }\n.hbop .field.invalid input,.hbop .field.invalid textarea,.hbop .terms-row.invalid { border-color:var(--accent); }\n.hbop .upload { display:grid; gap:8px; justify-items:center; padding:24px; border:1px dashed #93a5b5; border-radius:8px; background:#fff; text-align:center; cursor:pointer; }\n.hbop .upload input { position:absolute; width:1px; height:1px; opacity:0; }\n.hbop .check-row { display:flex; align-items:flex-start; gap:10px; }\n.hbop .terms-row { margin-top:18px; }\n.hbop .coupon-row div { display:flex; gap:10px; }\n.hbop .form-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:24px; }\n.hbop .button { min-height:46px; padding:0 18px; border-radius:8px; }\n.hbop .button.primary { color:#fff; background:var(--primary); }\n.hbop .button.primary:hover { background:var(--primary-dark); }\n.hbop .button.secondary { color:#fff; background:var(--text); }\n.hbop .button.ghost { color:var(--text); background:var(--surface-strong); border:1px solid var(--line); }\n.hbop .button[disabled] { opacity:.64; cursor:wait; }\n.hbop .notice { display:none; margin-top:18px; padding:12px 14px; border-radius:8px; background:#fff3f0; color:var(--accent); border:1px solid rgba(180,63,47,.26); }\n.hbop .notice.show { display:block; }\n.hbop .notice.success { background:#e9f7f3; color:var(--primary-dark); border-color:rgba(14,118,110,.26); }\n.hbop .summary { position:sticky; top:96px; }\n.hbop .summary-card { padding:24px; }\n.hbop .summary dl { display:grid; gap:12px; margin:0 0 18px; }\n.hbop .summary dl div,.hbop .price-lines div,.hbop .total-row { display:flex; justify-content:space-between; gap:16px; }\n.hbop .summary dt,.hbop .price-lines span { color:var(--muted); }\n.hbop .summary dd { max-width:180px; margin:0; text-align:right; font-weight:800; }\n.hbop .price-lines { display:grid; gap:10px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }\n.hbop .total-row { align-items:baseline; padding:18px 0; font-weight:900; }\n.hbop .total-row strong { font-size:2rem; color:var(--primary-dark); }\n.hbop .trust-list { color:var(--muted); font-size:.92rem; }\n.hbop dialog { width:min(560px,calc(100% - 28px)); border:0; border-radius:8px; box-shadow:var(--shadow); }\n.hbop dialog::backdrop { background:rgba(21,32,43,.48); }\n.hbop .modal-content { padding:12px; }\n.hbop .success-mark { margin-bottom:14px; }\n.hbop .receipt { padding:14px; margin-top:14px; background:var(--surface-strong); border-radius:8px; font-size:.92rem; }\n.hbop .receipt p { display:flex; justify-content:space-between; gap:16px; margin:8px 0; }\n.hbop .modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }\n@media (max-width:960px) { .hbop .order-shell { grid-template-columns:1fr; } .hbop .summary { position:static; } .hbop .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }\n@media (max-width:700px) { .hbop .steps,.hbop .service-grid,.hbop .package-grid,.hbop .split-fields,.hbop .form-grid { grid-template-columns:1fr; } .hbop .choice-card { min-height:140px; } .hbop .package-card { min-height:auto; } .hbop .coupon-row div,.hbop .form-actions,.hbop .modal-actions { flex-direction:column; } .hbop .button { width:100%; } }\n<\/style>\n<p><script>window.addEventListener(\"load\", function () {\n  const root = document.querySelector(\".hbop\");\n  if (!root) return;\n  const state = { step: 1, coupon: null, order: null };\n  const coupons = { HB10: { type: \"percent\", value: 10, label: \"10% off\" }, SAVE25: { type: \"fixed\", value: 25, label: \"$25 off\" }, AGENCY50: { type: \"fixed\", value: 50, label: \"$50 off\" } };\n  const money = new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency: \"USD\", maximumFractionDigits: 0 });\n  const form = root.querySelector(\"#hbopOrderForm\");\n  const panels = [...root.querySelectorAll(\"[data-step-panel]\")];\n  const steps = [...root.querySelectorAll(\"[data-step-indicator]\")];\n  const notice = root.querySelector(\"#hbopNotice\");\n  const confirmation = root.querySelector(\"#confirmation\");\n  const receipt = root.querySelector(\"#receipt\");\n  const fileInput = form.elements.namedItem(\"files[]\");\n  form.elements.nonce.value = window.hbopConfig?.nonce || \"\";\n  const checked = (name) => form.querySelector(`[name=\"${name}\"]:checked`);\n  const selected = (name) => form.elements[name].value;\n  const selectedPrice = (name) => Number(checked(name)?.dataset.price || 0);\n  const pages = () => Math.min(40, Math.max(1, Number(form.elements.pages.value || 1)));\n  function totals() {\n    const base = selectedPrice(\"package\");\n    const service = selectedPrice(\"service\");\n    const extraPages = Math.max(0, pages() - 1) * 75;\n    const delivery = selectedPrice(\"delivery\");\n    const portfolio = form.elements.portfolio.checked ? -40 : 0;\n    const subtotal = Math.max(0, base + service + extraPages + delivery + portfolio);\n    const coupon = state.coupon ? Math.min(subtotal, coupons[state.coupon].type === \"percent\" ? Math.round(subtotal * coupons[state.coupon].value \/ 100) : coupons[state.coupon].value) : 0;\n    return { base, service, extraPages, delivery, portfolio, coupon, total: Math.max(0, subtotal - coupon) };\n  }\n  const signed = (value) => value === 0 ? \"$0\" : value < 0 ? `-${money.format(Math.abs(value))}` : money.format(value);\n  function updateSummary() {\n    const t = totals();\n    root.querySelector(\"#summaryService\").textContent = selected(\"service\");\n    root.querySelector(\"#summaryPackage\").textContent = selected(\"package\");\n    root.querySelector(\"#summaryPages\").textContent = `${pages()} ${pages() === 1 ? \"page\" : \"pages\"}`;\n    root.querySelector(\"#summaryDelivery\").textContent = selected(\"delivery\");\n    root.querySelector(\"#summaryBase\").textContent = money.format(t.base);\n    root.querySelector(\"#summaryServicePrice\").textContent = signed(t.service);\n    root.querySelector(\"#summaryExtraPages\").textContent = money.format(t.extraPages);\n    root.querySelector(\"#summaryDeliveryPrice\").textContent = money.format(t.delivery);\n    root.querySelector(\"#summaryPortfolio\").textContent = signed(t.portfolio);\n    root.querySelector(\"#summaryCoupon\").textContent = signed(-t.coupon);\n    root.querySelector(\"#summaryTotal\").textContent = money.format(t.total);\n    root.querySelector(\"#placeOrder\").textContent = `Place order - ${money.format(t.total)}`;\n  }\n  function go(step) {\n    state.step = Math.min(5, Math.max(1, step));\n    panels.forEach((panel) => panel.classList.toggle(\"active\", Number(panel.dataset.stepPanel) === state.step));\n    steps.forEach((item) => { const n = Number(item.dataset.stepIndicator); item.classList.toggle(\"active\", n === state.step); item.classList.toggle(\"done\", n < state.step); });\n    updateSummary();\n    root.querySelector(\".order-main\").scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n  }\n  function validate(step) {\n    let ok = true;\n    const panel = root.querySelector(`[data-step-panel=\"${step}\"]`);\n    panel.querySelectorAll(\".invalid\").forEach((node) => node.classList.remove(\"invalid\"));\n    if (step === 4) {\n      [\"name\", \"email\", \"phone\", \"notes\"].forEach((name) => { const control = form.elements[name]; if (!control.checkValidity()) { ok = false; control.closest(\".field\").classList.add(\"invalid\"); } });\n    }\n    if (step === 5 && !form.elements.terms.checked) { ok = false; root.querySelector(\".terms-row\").classList.add(\"invalid\"); }\n    return ok;\n  }\n  function setNotice(message, good) {\n    notice.textContent = message || \"\";\n    notice.classList.toggle(\"show\", Boolean(message));\n    notice.classList.toggle(\"success\", Boolean(good));\n  }\n  function applyCoupon() {\n    const input = root.querySelector(\"#coupon\");\n    const code = input.value.trim().toUpperCase();\n    const msg = root.querySelector(\"#couponMessage\");\n    if (!code) { state.coupon = null; msg.textContent = \"Coupon removed.\"; updateSummary(); return; }\n    if (!coupons[code]) { state.coupon = null; msg.textContent = \"That coupon is not valid.\"; updateSummary(); return; }\n    state.coupon = code;\n    msg.textContent = `${code} applied: ${coupons[code].label}.`;\n    updateSummary();\n  }\n  function updateFiles() {\n    const files = [...fileInput.files];\n    root.querySelector(\"#fileList\").textContent = files.length ? (files.length === 1 ? files[0].name : `${files.length} files selected`) : \"PDF, ZIP, PNG, JPG, WebP, DOC, or brief documents\";\n  }\n  function showConfirmation(data) {\n    const t = totals();\n    state.order = { id: data.orderNumber, name: form.elements.name.value.trim(), email: form.elements.email.value.trim(), phone: form.elements.phone.value.trim(), service: selected(\"service\"), package: selected(\"package\"), pages: pages(), delivery: selected(\"delivery\"), payment: selected(\"payment\"), coupon: state.coupon || \"\", files: [...fileInput.files].map((file) => file.name), total: data.total || t.total };\n    root.querySelector(\"#confirmationCopy\").textContent = `Thanks, ${state.order.name}. Your request was submitted.`;\n    receipt.innerHTML = `<\/p>\n<p><span>Order ID<\/span><strong>${state.order.id}<\/strong><\/p>\n<p><span>Service<\/span><strong>${state.order.service}<\/strong><\/p>\n<p><span>Package<\/span><strong>${state.order.package}<\/strong><\/p>\n<p><span>Pages<\/span><strong>${state.order.pages}<\/strong><\/p>\n<p><span>Payment<\/span><strong>${state.order.payment}<\/strong><\/p>\n<p><span>Total<\/span><strong>${money.format(state.order.total)}<\/strong><\/p>\n<p>`;\n    confirmation.showModal();\n    if (data.paymentUrl) setTimeout(() => window.location.assign(data.paymentUrl), 1200);\n  }\n  function downloadReceipt() {\n    if (!state.order) return;\n    const lines = Object.entries(state.order).map(([key, value]) => `${key}: ${Array.isArray(value) ? value.join(\", \") : value}`);\n    const url = URL.createObjectURL(new Blob([lines.join(\"\\n\")], { type: \"text\/plain\" }));\n    const link = document.createElement(\"a\");\n    link.href = url;\n    link.download = `${state.order.id}-receipt.txt`;\n    link.click();\n    URL.revokeObjectURL(url);\n  }\n  async function submit(event) {\n    event.preventDefault();\n    if (!validate(4) || !validate(5)) return;\n    const button = root.querySelector(\"#placeOrder\");\n    button.disabled = true;\n    setNotice(\"Submitting your order...\", true);\n    try {\n      const data = new FormData(form);\n      if (!state.coupon) data.set(\"coupon\", \"\");\n      const response = await fetch(window.hbopConfig.ajaxUrl, { method: \"POST\", body: data, credentials: \"same-origin\" });\n      const json = await response.json();\n      if (!json.success) throw new Error(json.data?.message || \"Order submission failed.\");\n      setNotice(\"Order submitted successfully.\", true);\n      showConfirmation(json.data);\n    } catch (error) {\n      setNotice(error.message || \"Something went wrong. Please try again.\", false);\n    } finally {\n      button.disabled = false;\n    }\n  }\n  root.querySelectorAll(\".next-step\").forEach((button) => button.addEventListener(\"click\", () => { if (validate(state.step)) go(state.step + 1); }));\n  root.querySelectorAll(\".prev-step\").forEach((button) => button.addEventListener(\"click\", () => go(state.step - 1)));\n  form.addEventListener(\"input\", updateSummary);\n  form.addEventListener(\"change\", updateSummary);\n  fileInput.addEventListener(\"change\", updateFiles);\n  form.addEventListener(\"submit\", submit);\n  root.querySelector(\"#applyCoupon\").addEventListener(\"click\", applyCoupon);\n  root.querySelector(\"#coupon\").addEventListener(\"keydown\", (event) => { if (event.key === \"Enter\") { event.preventDefault(); applyCoupon(); } });\n  root.querySelector(\"#decreasePages\").addEventListener(\"click\", () => { form.elements.pages.value = Math.max(1, pages() - 1); updateSummary(); });\n  root.querySelector(\"#increasePages\").addEventListener(\"click\", () => { form.elements.pages.value = Math.min(40, pages() + 1); updateSummary(); });\n  root.querySelector(\"#downloadReceipt\").addEventListener(\"click\", downloadReceipt);\n  root.querySelector(\"#newOrder\").addEventListener(\"click\", () => { confirmation.close(); form.reset(); state.coupon = null; state.order = null; setNotice(\"\"); updateFiles(); go(1); });\n  updateSummary();\n});<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-6882","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Website Order - HTMLBASKET\u00ae<\/title>\n<meta name=\"description\" content=\"Need a reliable development partner? Order white-label WordPress, Shopify, Webflow, and front-end development services from HTMLBASKET today.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/htmlbasket.com\/?page_id=6882\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Website Order - HTMLBASKET\u00ae\" \/>\n<meta property=\"og:description\" content=\"Need a reliable development partner? Order white-label WordPress, Shopify, Webflow, and front-end development services from HTMLBASKET today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/htmlbasket.com\/?page_id=6882\" \/>\n<meta property=\"og:site_name\" content=\"HTMLBASKET\u00ae\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-06T02:10:18+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/htmlbasket.com\/?page_id=6882\",\"url\":\"https:\/\/htmlbasket.com\/?page_id=6882\",\"name\":\"Website Order - HTMLBASKET\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/htmlbasket.com\/#website\"},\"datePublished\":\"2026-05-20T22:39:48+00:00\",\"dateModified\":\"2026-07-06T02:10:18+00:00\",\"description\":\"Need a reliable development partner? Order white-label WordPress, Shopify, Webflow, and front-end development services from HTMLBASKET today.\",\"breadcrumb\":{\"@id\":\"https:\/\/htmlbasket.com\/?page_id=6882#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/htmlbasket.com\/?page_id=6882\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/htmlbasket.com\/?page_id=6882#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/htmlbasket.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Website Order\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/htmlbasket.com\/#website\",\"url\":\"https:\/\/htmlbasket.com\/\",\"name\":\"HTMLBASKET\u00ae\",\"description\":\"Your Agency\u2019s Invisible Dev Partner.\",\"publisher\":{\"@id\":\"https:\/\/htmlbasket.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/htmlbasket.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/htmlbasket.com\/#organization\",\"name\":\"HTMLBASKET\u00ae\",\"url\":\"https:\/\/htmlbasket.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/htmlbasket.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/htmlbasket.com\/wp-content\/uploads\/2025\/09\/Frame-15.png\",\"contentUrl\":\"https:\/\/htmlbasket.com\/wp-content\/uploads\/2025\/09\/Frame-15.png\",\"width\":275,\"height\":56,\"caption\":\"HTMLBASKET\u00ae\"},\"image\":{\"@id\":\"https:\/\/htmlbasket.com\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Website Order - HTMLBASKET\u00ae","description":"Need a reliable development partner? Order white-label WordPress, Shopify, Webflow, and front-end development services from HTMLBASKET today.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/htmlbasket.com\/?page_id=6882","og_locale":"en_US","og_type":"article","og_title":"Website Order - HTMLBASKET\u00ae","og_description":"Need a reliable development partner? Order white-label WordPress, Shopify, Webflow, and front-end development services from HTMLBASKET today.","og_url":"https:\/\/htmlbasket.com\/?page_id=6882","og_site_name":"HTMLBASKET\u00ae","article_modified_time":"2026-07-06T02:10:18+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/htmlbasket.com\/?page_id=6882","url":"https:\/\/htmlbasket.com\/?page_id=6882","name":"Website Order - HTMLBASKET\u00ae","isPartOf":{"@id":"https:\/\/htmlbasket.com\/#website"},"datePublished":"2026-05-20T22:39:48+00:00","dateModified":"2026-07-06T02:10:18+00:00","description":"Need a reliable development partner? Order white-label WordPress, Shopify, Webflow, and front-end development services from HTMLBASKET today.","breadcrumb":{"@id":"https:\/\/htmlbasket.com\/?page_id=6882#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/htmlbasket.com\/?page_id=6882"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/htmlbasket.com\/?page_id=6882#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/htmlbasket.com\/"},{"@type":"ListItem","position":2,"name":"Website Order"}]},{"@type":"WebSite","@id":"https:\/\/htmlbasket.com\/#website","url":"https:\/\/htmlbasket.com\/","name":"HTMLBASKET\u00ae","description":"Your Agency\u2019s Invisible Dev Partner.","publisher":{"@id":"https:\/\/htmlbasket.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/htmlbasket.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/htmlbasket.com\/#organization","name":"HTMLBASKET\u00ae","url":"https:\/\/htmlbasket.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/htmlbasket.com\/#\/schema\/logo\/image\/","url":"https:\/\/htmlbasket.com\/wp-content\/uploads\/2025\/09\/Frame-15.png","contentUrl":"https:\/\/htmlbasket.com\/wp-content\/uploads\/2025\/09\/Frame-15.png","width":275,"height":56,"caption":"HTMLBASKET\u00ae"},"image":{"@id":"https:\/\/htmlbasket.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/htmlbasket.com\/index.php?rest_route=\/wp\/v2\/pages\/6882","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/htmlbasket.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/htmlbasket.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/htmlbasket.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/htmlbasket.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6882"}],"version-history":[{"count":9,"href":"https:\/\/htmlbasket.com\/index.php?rest_route=\/wp\/v2\/pages\/6882\/revisions"}],"predecessor-version":[{"id":7051,"href":"https:\/\/htmlbasket.com\/index.php?rest_route=\/wp\/v2\/pages\/6882\/revisions\/7051"}],"wp:attachment":[{"href":"https:\/\/htmlbasket.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6882"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}