{"page":{"id":127288148191,"body_html":"\u003cdiv class=\"page-width page-feedback-form\"\u003e\n\u003cdiv class=\"form-header\"\u003e\n\u003ch1\u003eShare Your Feedback\u003c\/h1\u003e\n\u003cp class=\"subtitle\"\u003eHelp us improve the store! Takes 2 minutes. Submit for a \u003cstrong\u003e10% off code\u003c\/strong\u003e emailed instantly (expires in 30 days).\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cform class=\"modern-form\" id=\"feedback-form\"\u003e\n\u003c!-- Contact Section --\u003e\n\u003csection class=\"form-section\"\u003e\n\u003ch2\u003eContact Info\u003c\/h2\u003e\n\u003cdiv class=\"grid grid--2-col\"\u003e\n\u003cdiv class=\"field-group\"\u003e\n\u003clabel for=\"customer-name\"\u003eFull Name \u003cspan\u003e*\u003c\/span\u003e\u003c\/label\u003e \u003cinput type=\"text\" id=\"customer-name\" required=\"\"\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"field-group\"\u003e\n\u003clabel for=\"email\"\u003eEmail Address \u003cspan\u003e*\u003c\/span\u003e\u003c\/label\u003e \u003cinput type=\"email\" id=\"email\" name=\"email\" required=\"\"\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- Rating Section --\u003e\n\u003csection class=\"form-section\"\u003e\n\u003ch2\u003eOverall Experience\u003c\/h2\u003e\n\u003cdiv class=\"grid grid--2-col\"\u003e\n\u003cdiv class=\"field-group\"\u003e\n\u003clabel for=\"rating\"\u003eStore Rating \u003cspan\u003e*\u003c\/span\u003e\u003c\/label\u003e\u003cselect id=\"rating\" name=\"rating\" required=\"\"\u003e\n\u003coption value=\"\"\u003eSelect Rating\u003c\/option\u003e\n\u003coption value=\"5\"\u003e⭐⭐⭐⭐⭐ Excellent\u003c\/option\u003e\n\u003coption value=\"4\"\u003e⭐⭐⭐⭐ Good\u003c\/option\u003e\n\u003coption value=\"3\"\u003e⭐⭐⭐ Average\u003c\/option\u003e\n\u003coption value=\"2\"\u003e⭐⭐ Below Average\u003c\/option\u003e\n\u003coption value=\"1\"\u003e⭐ Poor\u003c\/option\u003e\n\u003c\/select\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"field-group\"\u003e\n\u003clabel\u003eLikelihood to Recommend (0-10) \u003cspan\u003e*\u003c\/span\u003e\u003c\/label\u003e\n\u003cdiv class=\"nps-radio-group\"\u003e\n\u003cdiv class=\"nps-labels\"\u003e\n\u003cspan class=\"nps-label nps-label-detractor\"\u003e0-6\u003cbr\u003e\u003csmall\u003eNot likely\u003c\/small\u003e\u003c\/span\u003e \u003cspan class=\"nps-label nps-label-passive\"\u003e7-8\u003cbr\u003e\u003csmall\u003eNeutral\u003c\/small\u003e\u003c\/span\u003e \u003cspan class=\"nps-label nps-label-promoter\"\u003e9-10\u003cbr\u003e\u003csmall\u003eVery likely\u003c\/small\u003e\u003c\/span\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"nps-radios\"\u003e\n\u003clabel class=\"nps-radio-label detractor\"\u003e \u003cinput type=\"radio\" name=\"nps\" value=\"0\" required=\"\"\u003e \u003cspan class=\"nps-radio-btn\"\u003e0\u003c\/span\u003e \u003c\/label\u003e \u003clabel class=\"nps-radio-label detractor\"\u003e \u003cinput type=\"radio\" name=\"nps\" value=\"1\" required=\"\"\u003e \u003cspan class=\"nps-radio-btn\"\u003e1\u003c\/span\u003e \u003c\/label\u003e \u003clabel class=\"nps-radio-label detractor\"\u003e \u003cinput type=\"radio\" name=\"nps\" value=\"2\" required=\"\"\u003e \u003cspan class=\"nps-radio-btn\"\u003e2\u003c\/span\u003e \u003c\/label\u003e \u003clabel class=\"nps-radio-label detractor\"\u003e \u003cinput type=\"radio\" name=\"nps\" value=\"3\" required=\"\"\u003e \u003cspan class=\"nps-radio-btn\"\u003e3\u003c\/span\u003e \u003c\/label\u003e \u003clabel class=\"nps-radio-label detractor\"\u003e \u003cinput type=\"radio\" name=\"nps\" value=\"4\" required=\"\"\u003e \u003cspan class=\"nps-radio-btn\"\u003e4\u003c\/span\u003e \u003c\/label\u003e \u003clabel class=\"nps-radio-label detractor\"\u003e \u003cinput type=\"radio\" name=\"nps\" value=\"5\" required=\"\"\u003e \u003cspan class=\"nps-radio-btn\"\u003e5\u003c\/span\u003e \u003c\/label\u003e \u003clabel class=\"nps-radio-label detractor\"\u003e \u003cinput type=\"radio\" name=\"nps\" value=\"6\" required=\"\"\u003e \u003cspan class=\"nps-radio-btn\"\u003e6\u003c\/span\u003e \u003c\/label\u003e \u003clabel class=\"nps-radio-label passive\"\u003e \u003cinput type=\"radio\" name=\"nps\" value=\"7\" required=\"\"\u003e \u003cspan class=\"nps-radio-btn\"\u003e7\u003c\/span\u003e \u003c\/label\u003e \u003clabel class=\"nps-radio-label passive\"\u003e \u003cinput type=\"radio\" name=\"nps\" value=\"8\" required=\"\"\u003e \u003cspan class=\"nps-radio-btn\"\u003e8\u003c\/span\u003e \u003c\/label\u003e \u003clabel class=\"nps-radio-label promoter\"\u003e \u003cinput type=\"radio\" name=\"nps\" value=\"9\" required=\"\"\u003e \u003cspan class=\"nps-radio-btn\"\u003e9\u003c\/span\u003e \u003c\/label\u003e \u003clabel class=\"nps-radio-label promoter\"\u003e \u003cinput type=\"radio\" name=\"nps\" value=\"10\" required=\"\"\u003e \u003cspan class=\"nps-radio-btn\"\u003e10\u003c\/span\u003e \u003c\/label\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- Feedback Section --\u003e\n\u003csection class=\"form-section\"\u003e\n\u003ch2\u003eYour Thoughts\u003c\/h2\u003e\n\u003cdiv class=\"field-group full-width\"\u003e\n\u003clabel for=\"likes\"\u003eWhat did you like? \u003cspan\u003e*\u003c\/span\u003e\u003c\/label\u003e \u003ctextarea id=\"likes\" name=\"likes\" rows=\"4\" placeholder=\"E.g., fast shipping, great selection, easy checkout...\" required=\"\"\u003e\u003c\/textarea\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"field-group full-width\"\u003e\n\u003clabel for=\"dislikes\"\u003eWhat can we improve? (Optional)\u003c\/label\u003e \u003ctextarea id=\"dislikes\" name=\"dislikes\" rows=\"4\" placeholder=\"E.g., more size options, faster load times, better filters...\"\u003e\u003c\/textarea\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cdiv class=\"submit-section\"\u003e\n\u003cbutton type=\"submit\" class=\"btn-primary\"\u003e \u003cspan class=\"btn-icon\"\u003e📤\u003c\/span\u003e \u003cspan class=\"btn-text\"\u003eSubmit Feedback \u0026amp; Get 10% Off\u003c\/span\u003e \u003cspan class=\"btn-arrow\"\u003e→\u003c\/span\u003e \u003c\/button\u003e\n\u003cp class=\"submit-note\"\u003e✨ Your feedback helps us serve you better!\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/form\u003e\n\u003cdiv class=\"message-container\" id=\"form-message\"\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cstyle\u003e\n  :root {\n    --primary-color: #2563eb;\n    --primary-dark: #1e40af;\n    --primary-light: #4f9cff;\n    --accent-color: #f8f9fa;\n    --text-color: #333;\n    --border-color: #e9ecef;\n    --shadow-sm: 0 2px 10px rgba(0,0,0,0.08);\n    --shadow-md: 0 8px 25px rgba(0,0,0,0.12);\n    --shadow-lg: 0 15px 40px rgba(37, 99, 235, 0.25);\n    --spacing-xs: 8px;\n    --spacing-sm: 16px;\n    --spacing-md: 24px;\n    --spacing-lg: 32px;\n    --spacing-xl: 40px;\n  }\n\n  .page-width {\n    max-width: 800px;\n    margin: 0 auto;\n    padding: 60px 20px;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  }\n\n  .form-header {\n    text-align: center;\n    margin-bottom: var(--spacing-xl);\n  }\n\n  .form-header h1 {\n    font-size: clamp(2rem, 5vw, 3rem);\n    font-weight: 700;\n    color: var(--text-color);\n    margin-bottom: var(--spacing-sm);\n    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n  }\n\n  .subtitle {\n    font-size: 1.2rem;\n    color: #666;\n    max-width: 600px;\n    margin: 0 auto;\n    line-height: 1.6;\n  }\n\n  .modern-form {\n    background: white;\n    border-radius: 20px;\n    box-shadow: var(--shadow-md);\n    padding: var(--spacing-xl);\n    backdrop-filter: blur(10px);\n  }\n\n  .form-section {\n    margin-bottom: var(--spacing-xl);\n  }\n\n  .form-section h2 {\n    font-size: 1.5rem;\n    font-weight: 600;\n    color: var(--text-color);\n    margin-bottom: var(--spacing-lg);\n    padding-bottom: var(--spacing-xs);\n    border-bottom: 2px solid var(--border-color);\n  }\n\n  .grid {\n    display: grid;\n    gap: var(--spacing-md);\n    margin-bottom: var(--spacing-md);\n  }\n\n  .grid--2-col {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  .field-group {\n    position: relative;\n  }\n\n  .field-group.full-width {\n    grid-column: 1 \/ -1;\n  }\n\n  label {\n    display: block;\n    margin-bottom: var(--spacing-sm);\n    font-weight: 600;\n    color: var(--text-color);\n    font-size: 0.95rem;\n  }\n\n  span {\n    color: #e74c3c;\n  }\n\n  \/* Input and textarea styling *\/\n  input, textarea {\n    width: 100%;\n    padding: var(--spacing-md);\n    border: 2px solid var(--border-color);\n    border-radius: 12px;\n    font-size: 1rem;\n    transition: all 0.3s ease;\n    background: #fff;\n    box-sizing: border-box;\n    color: var(--text-color);\n    font-family: inherit;\n    line-height: 1.4;\n  }\n\n  \/* Specific styling for select dropdown *\/\n  .modern-form select,\n  .page-feedback-form select,\n  select#rating {\n    width: 100% !important;\n    padding: var(--spacing-md) !important;\n    border: 2px solid var(--border-color) !important;\n    border-radius: 12px !important;\n    font-size: 1rem !important;\n    transition: all 0.3s ease !important;\n    background: #fff !important;\n    box-sizing: border-box !important;\n    color: var(--text-color) !important;\n    -webkit-appearance: none !important;\n    -moz-appearance: none !important;\n    appearance: none !important;\n    background-image: url(\"data:image\/svg+xml;charset=UTF-8,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c\/polyline%3e%3c\/svg%3e\") !important;\n    background-repeat: no-repeat !important;\n    background-position: right 12px center !important;\n    background-size: 20px !important;\n    padding-right: 45px !important;\n    cursor: pointer !important;\n    height: auto !important;\n    line-height: normal !important;\n    max-width: 100% !important;\n    min-height: 50px !important;\n  }\n\n  \/* Override Shopify's option styling *\/\n  .modern-form select option,\n  .page-feedback-form select option,\n  select#rating option {\n    color: #333 !important;\n    background: #fff !important;\n    padding: 10px !important;\n  }\n\n  \/* Style for placeholder option *\/\n  .modern-form select option[value=\"\"],\n  .page-feedback-form select option[value=\"\"],\n  select#rating option[value=\"\"] {\n    color: #999 !important;\n    background: #fff !important;\n  }\n\n  \/* Enhanced focus states to override Shopify *\/\n  .modern-form select:focus,\n  .page-feedback-form select:focus,\n  select#rating:focus {\n    outline: none !important;\n    border-color: var(--primary-color) !important;\n    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1) !important;\n    transform: translateY(-1px) !important;\n    background-color: #fff !important;\n  }\n\n  \/* Force text color for selected option *\/\n  .modern-form select,\n  .page-feedback-form select,\n  select#rating {\n    color: #333 !important;\n  }\n\n  \/* Override any Shopify theme select wrappers *\/\n  .select-wrapper select,\n  .field-group select {\n    color: #333 !important;\n    background: #fff !important;\n    -webkit-appearance: none !important;\n    -moz-appearance: none !important;\n    appearance: none !important;\n  }\n\n  \/* Focus states *\/\n  input:focus, select:focus, textarea:focus {\n    outline: none;\n    border-color: var(--primary-color);\n    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);\n    transform: translateY(-1px);\n  }\n\n  \/* NPS Radio Button Styles *\/\n  .nps-radio-group {\n    margin-top: var(--spacing-sm);\n  }\n\n  .nps-labels {\n    display: flex;\n    justify-content: space-between;\n    margin-bottom: var(--spacing-md);\n    font-size: 0.85rem;\n  }\n\n  .nps-label {\n    text-align: center;\n    color: #666;\n    line-height: 1.2;\n  }\n\n  .nps-label small {\n    font-size: 0.75rem;\n    display: block;\n    margin-top: 2px;\n  }\n\n  .nps-label-detractor {\n    color: #e74c3c;\n    flex: 1;\n  }\n\n  .nps-label-passive {\n    color: #f39c12;\n    flex: 1;\n  }\n\n  .nps-label-promoter {\n    color: #27ae60;\n    flex: 1;\n  }\n\n  .nps-radios {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n  }\n\n  .nps-radio-label {\n    display: block;\n    cursor: pointer;\n  }\n\n  .nps-radio-label input[type=\"radio\"] {\n    display: none;\n  }\n\n  .nps-radio-btn {\n    display: inline-block;\n    width: 40px;\n    height: 40px;\n    border: 2px solid var(--border-color);\n    border-radius: 8px;\n    background: white;\n    font-size: 1rem;\n    font-weight: 600;\n    text-align: center;\n    line-height: 36px;\n    transition: all 0.3s ease;\n    color: var(--text-color);\n    user-select: none;\n  }\n\n  \/* Detractor buttons (0-6) *\/\n  .nps-radio-label.detractor .nps-radio-btn {\n    border-color: #e74c3c;\n  }\n\n  .nps-radio-label.detractor:hover .nps-radio-btn {\n    background: #e74c3c;\n    border-color: #e74c3c;\n    color: white;\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);\n  }\n\n  .nps-radio-label.detractor input[type=\"radio\"]:checked + .nps-radio-btn {\n    background: #e74c3c;\n    border-color: #e74c3c;\n    color: white;\n    transform: translateY(-2px) scale(1.1);\n    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.3), 0 0 25px rgba(231, 76, 60, 0.5);\n  }\n\n  \/* Passive buttons (7-8) *\/\n  .nps-radio-label.passive .nps-radio-btn {\n    border-color: #f39c12;\n  }\n\n  .nps-radio-label.passive:hover .nps-radio-btn {\n    background: #f39c12;\n    border-color: #f39c12;\n    color: white;\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);\n  }\n\n  .nps-radio-label.passive input[type=\"radio\"]:checked + .nps-radio-btn {\n    background: #f39c12;\n    border-color: #f39c12;\n    color: white;\n    transform: translateY(-2px) scale(1.1);\n    box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.3), 0 0 25px rgba(243, 156, 18, 0.5);\n  }\n\n  \/* Promoter buttons (9-10) *\/\n  .nps-radio-label.promoter .nps-radio-btn {\n    border-color: #27ae60;\n  }\n\n  .nps-radio-label.promoter:hover .nps-radio-btn {\n    background: #27ae60;\n    border-color: #27ae60;\n    color: white;\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);\n  }\n\n  .nps-radio-label.promoter input[type=\"radio\"]:checked + .nps-radio-btn {\n    background: #27ae60;\n    border-color: #27ae60;\n    color: white;\n    transform: translateY(-2px) scale(1.1);\n    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.3), 0 0 25px rgba(39, 174, 96, 0.5);\n  }\n\n  \/* Enhanced Submit Button Section *\/\n  .submit-section {\n    margin-top: var(--spacing-xl);\n    padding-top: var(--spacing-lg);\n    border-top: 2px solid var(--border-color);\n    text-align: center;\n  }\n\n  .btn-primary {\n    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));\n    color: white;\n    border: none;\n    border-radius: 16px;\n    font-size: 1.2rem;\n    font-weight: 700;\n    cursor: pointer;\n    padding: var(--spacing-lg) var(--spacing-xl);\n    width: 100%;\n    max-width: 400px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--spacing-sm);\n    transition: all 0.3s ease;\n    box-shadow: var(--shadow-lg);\n    position: relative;\n    overflow: hidden;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n  }\n\n  .btn-primary::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: -100%;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);\n    transition: left 0.5s ease;\n  }\n\n  .btn-primary:hover::before {\n    left: 100%;\n  }\n\n  .btn-primary:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 20px 50px rgba(37, 99, 235, 0.35);\n    background: linear-gradient(135deg, var(--primary-light), var(--primary-color));\n  }\n\n  .btn-primary:active {\n    transform: translateY(-1px);\n  }\n\n  .btn-icon {\n    font-size: 1.4rem;\n    animation: bounce 2s infinite;\n  }\n\n  @keyframes bounce {\n    0%, 20%, 50%, 80%, 100% {\n      transform: translateY(0);\n    }\n    40% {\n      transform: translateY(-5px);\n    }\n    60% {\n      transform: translateY(-3px);\n    }\n  }\n\n  .btn-text {\n    flex: 1;\n    text-align: center;\n  }\n\n  .btn-arrow {\n    font-size: 1.2rem;\n    transition: transform 0.3s ease;\n  }\n\n  .btn-primary:hover .btn-arrow {\n    transform: translateX(5px);\n  }\n\n  .submit-note {\n    margin-top: var(--spacing-md);\n    color: #666;\n    font-size: 0.9rem;\n    font-style: italic;\n    opacity: 0.8;\n  }\n\n  .message-container {\n    margin-top: var(--spacing-xl);\n    padding: var(--spacing-lg);\n    border-radius: 12px;\n    text-align: center;\n    font-weight: 500;\n    display: none;\n  }\n\n  \/* Responsive *\/\n  @media (max-width: 768px) {\n    .grid--2-col {\n      grid-template-columns: 1fr;\n    }\n    .field-group.full-width {\n      grid-column: auto;\n    }\n    .page-width {\n      padding: 40px 16px;\n    }\n    .modern-form {\n      padding: var(--spacing-lg);\n    }\n    .nps-radios {\n      gap: 6px;\n    }\n    .nps-radio-btn {\n      width: 32px;\n      height: 32px;\n      font-size: 0.9rem;\n      line-height: 28px;\n    }\n    .nps-labels {\n      font-size: 0.75rem;\n    }\n    .btn-primary {\n      font-size: 1.1rem;\n      padding: var(--spacing-md) var(--spacing-lg);\n      max-width: 100%;\n    }\n  }\n\u003c\/style\u003e\n\u003cp\u003e\u003cscript src=\"https:\/\/cdn.jsdelivr.net\/npm\/@emailjs\/browser@4\/dist\/email.min.js\"\u003e\u003c\/script\u003e \u003cscript type=\"text\/javascript\"\u003e\n  \/\/ Enhanced debugging with field detection\n  console.log(\"=== EmailJS Debugging Started ===\");\n  \n  (function() {\n    try {\n      emailjs.init(\"MuFgSrcnt7haz917E\"); \/\/ Replace with your actual key\n      console.log(\"✅ EmailJS initialized successfully\");\n    } catch (error) {\n      console.error(\"❌ EmailJS initialization failed:\", error);\n    }\n  })();\n\n  \/\/ Form submission handler with better field detection\n  document.getElementById('feedback-form').addEventListener('submit', function(e) {\n    e.preventDefault();\n    \n    console.log(\"=== Form Submission Started ===\");\n    \n    const messageEl = document.getElementById('form-message');\n    const submitBtn = document.querySelector('.btn-primary');\n    \n    \/\/ Show loading state\n    submitBtn.disabled = true;\n    submitBtn.innerHTML = '\u003cspan class=\"btn-icon\"\u003e⏳\u003c\/span\u003e\u003cspan class=\"btn-text\"\u003eSending...\u003c\/span\u003e\u003cspan class=\"btn-arrow\"\u003e\u003c\/span\u003e';\n    messageEl.innerHTML = '\u003cp style=\"color: #ffc107; font-size:1.1rem;\"\u003e📤 Sending your feedback...\u003c\/p\u003e';\n    messageEl.style.display = 'block';\n\n    try {\n      \/\/ Check if all required elements exist before trying to access them\n      const nameField = document.getElementById('customer-name');\n      const emailField = document.getElementById('email');\n      const ratingField = document.getElementById('rating');\n      const likesField = document.getElementById('likes');\n      const dislikesField = document.getElementById('dislikes');\n      \n      console.log(\"🔍 Field Detection:\");\n      console.log(\"Name field:\", nameField);\n      console.log(\"Email field:\", emailField);\n      console.log(\"Rating field:\", ratingField);\n      console.log(\"Likes field:\", likesField);\n      console.log(\"Dislikes field:\", dislikesField);\n      \n      \/\/ Check if any field is null\n      if (!nameField) throw new Error(\"Name field not found - missing id='customer-name'\");\n      if (!emailField) throw new Error(\"Email field not found - missing id='email'\");\n      if (!ratingField) throw new Error(\"Rating field not found - missing id='rating'\");\n      if (!likesField) throw new Error(\"Likes field not found - missing id='likes'\");\n      if (!dislikesField) throw new Error(\"Dislikes field not found - missing id='dislikes'\");\n      \n      \/\/ Get form data safely\n      const nameValue = nameField.value || '';\n      const emailValue = emailField.value || '';\n      const ratingValue = ratingField.value || '';\n      const likesValue = likesField.value || '';\n      const dislikesValue = dislikesField.value || '';\n      \n      \/\/ Get NPS value properly from checked radio\n      const npsRadio = document.querySelector('input[name=\"nps\"]:checked');\n      const npsValue = npsRadio ? npsRadio.value : '';\n      \n      console.log(\"📋 Form field values:\");\n      console.log(\"Name value:\", `\"${nameValue}\"`);\n      console.log(\"Name length:\", nameValue.length);\n      console.log(\"Email:\", `\"${emailValue}\"`);\n      console.log(\"Rating:\", ratingValue);\n      console.log(\"NPS:\", npsValue);\n      console.log(\"Likes:\", `\"${likesValue}\"`);\n      console.log(\"Dislikes:\", `\"${dislikesValue}\"`);\n      \n      \/\/ Create template params with properly trimmed values\n      const templateParams = {\n        name: nameValue.trim(),\n        email: emailValue.trim(),\n        rating: ratingValue,\n        nps: npsValue,\n        likes: likesValue.trim(),\n        dislikes: dislikesValue.trim(),\n        date: new Date().toLocaleDateString(),\n        store_name: 'Your Store Name' \/\/ Replace with your store name\n      };\n      \n      console.log(\"📋 Final template params:\", templateParams);\n      \n      \/\/ Enhanced validation with detailed error messages\n      const errors = [];\n      \n      if (!templateParams.name || templateParams.name.length === 0) {\n        errors.push(\"Name is required\");\n        console.log(\"❌ Name validation failed\");\n      } else {\n        console.log(\"✅ Name validation passed\");\n      }\n      \n      if (!templateParams.email || templateParams.email.length === 0) {\n        errors.push(\"Email is required\");\n        console.log(\"❌ Email validation failed\");\n      } else {\n        console.log(\"✅ Email validation passed\");\n      }\n      \n      if (!templateParams.rating) {\n        errors.push(\"Store rating is required\");\n        console.log(\"❌ Rating validation failed\");\n      } else {\n        console.log(\"✅ Rating validation passed\");\n      }\n      \n      if (!templateParams.nps) {\n        errors.push(\"Likelihood to recommend rating is required\");\n        console.log(\"❌ NPS validation failed\");\n      } else {\n        console.log(\"✅ NPS validation passed\");\n      }\n      \n      if (!templateParams.likes || templateParams.likes.length === 0) {\n        errors.push(\"What you liked is required\");\n        console.log(\"❌ Likes validation failed\");\n      } else {\n        console.log(\"✅ Likes validation passed\");\n      }\n      \n      if (errors.length \u003e 0) {\n        throw new Error(errors.join(\", \"));\n      }\n      \n      console.log(\"✅ All form validation passed\");\n      \n      \/\/ Send email to store (you)\n      console.log(\"📧 Sending store notification...\");\n      \n      emailjs.send('service_92z0k99', 'store_notification', templateParams)\n        .then(function(response) {\n          console.log(\"✅ Store notification sent successfully:\", response);\n          \n          \/\/ Send confirmation to customer\n          console.log(\"📧 Sending customer confirmation...\");\n          \n          return emailjs.send('service_92z0k99', 'customer_confirmation', templateParams);\n        })\n        .then(function(response) {\n          console.log(\"✅ Customer confirmation sent successfully:\", response);\n          \n          \/\/ Success message\n          messageEl.innerHTML = '\u003cp style=\"color: #28a745; font-size:1.1rem;\"\u003e✅ Thank you! Your feedback helps us improve.\u003cbr\u003e\u003cstrong\u003e10% Off Code: FEEDBACK10\u003c\/strong\u003e (expires in 30 days)\u003c\/p\u003e';\n          \n          \/\/ Reset form\n          document.getElementById('feedback-form').reset();\n          \n          \/\/ Reset button\n          submitBtn.disabled = false;\n          submitBtn.innerHTML = '\u003cspan class=\"btn-icon\"\u003e📤\u003c\/span\u003e\u003cspan class=\"btn-text\"\u003eSubmit Feedback \u0026 Get 10% Off\u003c\/span\u003e\u003cspan class=\"btn-arrow\"\u003e→\u003c\/span\u003e';\n          \n          console.log(\"=== Form Submission Completed Successfully ===\");\n        })\n        .catch(function(error) {\n          console.error(\"❌ EmailJS Error Details:\");\n          console.error(\"Status:\", error.status);\n          console.error(\"Text:\", error.text);\n          console.error(\"Full Error:\", error);\n          \n          \/\/ Show specific error to user\n          let errorMessage = \"❌ Error sending feedback\";\n          \n          if (error.text \u0026\u0026 error.text.includes(\"User ID is required\")) {\n            errorMessage = \"❌ EmailJS not properly configured - check your Public Key\";\n          } else if (error.text \u0026\u0026 error.text.includes(\"Service not found\")) {\n            errorMessage = \"❌ Service ID not found - check your EmailJS service\";\n          } else if (error.text \u0026\u0026 error.text.includes(\"Template not found\")) {\n            errorMessage = \"❌ Template not found - check your template IDs\";\n          } else if (error.text \u0026\u0026 error.text.includes(\"Missing required parameter\")) {\n            errorMessage = \"❌ Missing required information - please fill all fields\";\n          } else if (error.text \u0026\u0026 error.text.includes(\"The browser is blocked\")) {\n            errorMessage = \"❌ Browser blocked - check your EmailJS account status\";\n          } else if (error.message \u0026\u0026 error.message.includes(\"required\")) {\n            errorMessage = \"❌ Please fill all required fields: \" + error.message;\n          } else {\n            errorMessage = \"❌ Error: \" + (error.text || error.message);\n          }\n          \n          messageEl.innerHTML = '\u003cp style=\"color: #dc3545; font-size:1.1rem;\"\u003e' + errorMessage + '\u003c\/p\u003e';\n          \n          \/\/ Reset button\n          submitBtn.disabled = false;\n          submitBtn.innerHTML = '\u003cspan class=\"btn-icon\"\u003e📤\u003c\/span\u003e\u003cspan class=\"btn-text\"\u003eSubmit Feedback \u0026 Get 10% Off\u003c\/span\u003e\u003cspan class=\"btn-arrow\"\u003e→\u003c\/span\u003e';\n          \n          console.log(\"=== Form Submission Failed ===\");\n        });\n        \n    } catch (error) {\n      console.error(\"❌ Form processing error:\", error);\n      \n      let errorMessage = \"❌ Form error: \" + error.message;\n      \n      if (error.message.includes(\"required\")) {\n        errorMessage = \"❌ Please fill all required fields: \" + error.message;\n      }\n      \n      messageEl.innerHTML = '\u003cp style=\"color: #dc3545; font-size:1.1rem;\"\u003e' + errorMessage + '\u003c\/p\u003e';\n      \n      \/\/ Reset button\n      submitBtn.disabled = false;\n      submitBtn.innerHTML = '\u003cspan class=\"btn-icon\"\u003e📤\u003c\/span\u003e\u003cspan class=\"btn-text\"\u003eSubmit Feedback \u0026 Get 10% Off\u003c\/span\u003e\u003cspan class=\"btn-arrow\"\u003e→\u003c\/span\u003e';\n    }\n  });\n\u003c\/script\u003e\u003c\/p\u003e","created_at":"2026-01-05T11:47:43-08:00","published_at":"2026-01-05T14:10:09-08:00","updated_at":"2026-01-08T11:41:29-08:00","handle":"feedback","title":"Feedback"}}