{"title":"Sign up","description":"\u003c!-- Hide Shopify page title and breadcrumbs --\u003e\n\u003cstyle\u003e\n  .main-page-title,\n  .page-title,\n  .section-header,\n  .page-header,\n  .breadcrumbs,\n  nav[aria-label=\"breadcrumb\"],\n  .breadcrumbs-container,\n  .heading-container,\n  header + div h1:not(.mhjd-title),\n  .shopify-section h1:not(.mhjd-title) {\n    display: none !important;\n    opacity: 0 !important;\n    height: 0 !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    visibility: hidden !important;\n  }\n\n  body {\n    overflow-x: hidden !important;\n  }\n\u003c\/style\u003e\n\u003c!-- Make It Your Day - Registration Form --\u003e\n\u003cstyle\u003e\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700\u0026display=swap');\n  \n  .mhjd-wrapper {\n    font-family: 'Poppins', sans-serif;\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    min-height: 100vh;\n    background: #660058 url('https:\/\/cdn.shopify.com\/s\/files\/1\/0942\/4846\/8854\/files\/Loop_dark_purple.png?v=1771323960') center center \/ cover no-repeat;\n    \n    width: 100vw;\n    position: relative;\n    left: 50%;\n    right: 50%;\n    margin-left: -50vw;\n    margin-right: -50vw;\n    \n    margin-top: -150px !important; \n    padding-top: 150px !important;\n    \n    z-index: 900;\n  }\n  \n  .mhjd-wrapper * {\n    box-sizing: border-box;\n  }\n  \n  .mhjd-container {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: flex-start;\n    padding: 0 1rem 3rem;\n    position: relative;\n    max-width: 800px;\n    margin: 0 auto;\n    width: 100%;\n    z-index: 10;\n  }\n  \n  .mhjd-banner,\n  .mhjd-wrapper .mhjd-banner,\n  .mhjd-container .mhjd-banner,\n  img.mhjd-banner,\n  img#mhjdBanner {\n    width: 450px !important;\n    max-width: 450px !important;\n    min-width: 0 !important;\n    height: auto !important;\n    display: block !important;\n    margin: 0 auto 2rem !important;\n    transition: opacity 0.4s ease;\n    position: relative;\n    z-index: 10;\n  }\n  \n  .mhjd-banner.hide {\n    display: none !important;\n  }\n  \n  @meDia (max-width: 600px) {\n    .mhjd-banner,\n    .mhjd-wrapper .mhjd-banner,\n    .mhjd-container .mhjd-banner,\n    img.mhjd-banner,\n    img#mhjdBanner {\n      width: 65% !important;\n      max-width: 280px !important;\n      margin-left: auto !important;\n      margin-right: auto !important;\n      margin-bottom: 1.2rem !important;\n    }\n    \n    .mhjd-wrapper {\n      background-size: 200% auto !important;\n      background-position: center center !important;\n      background-repeat: repeat !important;\n    }\n    \n    .mhjd-card {\n      padding: 16px !important;\n    }\n    \n    .mhjd-container {\n      padding: 0 0.75rem 2rem !important;\n    }\n  }\n  \n  .mhjd-card {\n    background: #ffffff !important;\n    border-radius: 16px !important;\n    -webkit-border-radius: 16px !important;\n    -moz-border-radius: 16px !important;\n    padding: 24px;\n    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);\n    border: none !important;\n    position: relative;\n    overflow: hidden;\n    width: 100%;\n    max-width: 550px;\n    z-index: 10;\n  }\n\n  \/* --- Polaroid animations and styling --- *\/\n  @keyframes float1 { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(-4deg); } }\n  @keyframes float2 { 0%, 100% { transform: translateY(0) rotate(8deg); } 50% { transform: translateY(-15px) rotate(5deg); } }\n  @keyframes float3 { 0%, 100% { transform: translateY(0) rotate(-12deg); } 50% { transform: translateY(-12px) rotate(-10deg); } }\n  @keyframes float4 { 0%, 100% { transform: translateY(0) rotate(4deg); } 50% { transform: translateY(-8px) rotate(6deg); } }\n  @keyframes float5 { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-14px) rotate(-6deg); } }\n  @keyframes float6 { 0%, 100% { transform: translateY(0) rotate(10deg); } 50% { transform: translateY(-10px) rotate(12deg); } }\n\n  .mhjd-polaroids-container {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    z-index: 1;\n    overflow: hidden;\n  }\n\n  .mhjd-polaroid {\n    position: absolute;\n    width: 160px;\n    background: transparent; \n    padding: 0; \n    box-shadow: none; \n    border: none;\n    border-radius: 0;\n    display: none; \n  }\n\n  .mhjd-polaroid img {\n    width: 100%;\n    height: auto;\n    display: block;\n    border: none;\n    box-shadow: none;\n  }\n\n  .mhjd-polaroid-1 { top: 15%; left: 5%; animation: float1 6s ease-in-out infinite; }\n  .mhjd-polaroid-2 { top: 40%; left: 12%; animation: float2 7s ease-in-out infinite; }\n  .mhjd-polaroid-3 { top: 70%; left: 8%; animation: float3 8s ease-in-out infinite; }\n  .mhjd-polaroid-4 { top: 10%; right: 8%; animation: float4 6.5s ease-in-out infinite; }\n  .mhjd-polaroid-5 { top: 45%; right: 5%; animation: float5 7.5s ease-in-out infinite; }\n  .mhjd-polaroid-6 { top: 75%; right: 12%; animation: float6 6s ease-in-out infinite; }\n\n  @meDia (min-width: 900px) {\n    .mhjd-polaroid { display: block; }\n  }\n\n  @meDia (min-width: 1200px) {\n    .mhjd-polaroid {\n      width: 200px;\n    }\n    .mhjd-polaroid-1 { left: 10%; }\n    .mhjd-polaroid-2 { left: 18%; top: 45%; }\n    .mhjd-polaroid-3 { left: 12%; }\n    .mhjd-polaroid-4 { right: 12%; }\n    .mhjd-polaroid-5 { right: 8%; top: 50%; }\n    .mhjd-polaroid-6 { right: 15%; }\n  }\n  \n  .mhjd-progress {\n    display: flex;\n    justify-content: center;\n    gap: 8px;\n    margin-bottom: 24px;\n  }\n  \n  .mhjd-progress-dot {\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    background: #e0e0e0;\n    transition: all 0.3s ease;\n  }\n  \n  .mhjd-progress-dot.active {\n    background: #bc00f6;\n    transform: scale(1.2);\n  }\n  \n  .mhjd-progress-dot.completed {\n    background: #660058;\n  }\n  \n  .mhjd-step {\n    display: none;\n    animation: mhjdFadeIn 0.4s ease-out;\n  }\n  \n  .mhjd-step.active {\n    display: block;\n  }\n  \n  @keyframes mhjdFadeIn {\n    from {\n      opacity: 0;\n      transform: translateX(20px);\n    }\n    to {\n      opacity: 1;\n      transform: translateX(0);\n    }\n  }\n  \n  .mhjd-step-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 18px;\n    font-weight: 600;\n    color: #660058;\n    margin-bottom: 20px;\n    text-align: center;\n    justify-content: center;\n  }\n  \n  .mhjd-step-title svg {\n    width: 20px;\n    height: 20px;\n  }\n  \n  .mhjd-intro-text {\n    color: #444;\n    font-size: 15px;\n    line-height: 1.7;\n    margin-bottom: 16px;\n    text-align: center;\n  }\n  \n  .mhjd-intro-note {\n    font-size: 13px;\n    color: #888;\n    text-align: center;\n    margin-top: 8px;\n    margin-bottom: 20px;\n  }\n  \n  .mhjd-form-group {\n    margin-bottom: 20px;\n  }\n  \n  .mhjd-wrapper label {\n    display: block;\n    font-size: 14px;\n    color: #666666;\n    margin-bottom: 8px;\n    transition: color 0.2s;\n  }\n  \n  .mhjd-form-group:focus-within label {\n    color: #660058;\n  }\n  \n  .mhjd-wrapper input:not([type=\"checkbox\"]),\n  .mhjd-wrapper textarea,\n  .mhjd-wrapper select,\n  .mhjd-wrapper .mhjd-form-group input:not([type=\"checkbox\"]),\n  .mhjd-wrapper .mhjd-form-group textarea,\n  .mhjd-wrapper .mhjd-form-group select {\n    width: 100% !important;\n    padding: 14px 16px !important;\n    font-family: 'Poppins', sans-serif !important;\n    font-size: 16px !important;\n    color: #202020 !important;\n    background: #fef0f0 !important;\n    border: 2px solid #e0e0e0 !important;\n    border-radius: 10px !important;\n    -webkit-border-radius: 10px !important;\n    -moz-border-radius: 10px !important;\n    outline: none !important;\n    transition: all 0.2s !important;\n    -webkit-appearance: none !important;\n    appearance: none !important;\n  }\n  \n  .mhjd-wrapper select,\n  .mhjd-wrapper .mhjd-form-group select {\n    background-color: #fef0f0 !important;\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'\/%3E%3C\/svg%3E\") !important;\n    background-repeat: no-repeat !important;\n    background-position: right 16px center !important;\n    padding-right: 40px !important;\n    cursor: pointer;\n  }\n  \n  .mhjd-wrapper input:not([type=\"checkbox\"]):focus,\n  .mhjd-wrapper textarea:focus,\n  .mhjd-wrapper select:focus,\n  .mhjd-wrapper .mhjd-form-group input:not([type=\"checkbox\"]):focus,\n  .mhjd-wrapper .mhjd-form-group textarea:focus,\n  .mhjd-wrapper .mhjd-form-group select:focus {\n    background-color: #ffffff !important;\n    border-color: #660058 !important;\n    box-shadow: 0 0 0 4px rgba(102, 0, 88, 0.1) !important;\n    border-radius: 10px !important;\n    -webkit-border-radius: 10px !important;\n    -moz-border-radius: 10px !important;\n  }\n  \n  .mhjd-wrapper input::placeholder,\n  .mhjd-wrapper textarea::placeholder {\n    color: #aaa !important;\n  }\n  \n  .mhjd-wrapper textarea,\n  .mhjd-wrapper .mhjd-form-group textarea {\n    resize: none !important;\n    min-height: 100px !important;\n  }\n  \n  .mhjd-wrapper textarea.small,\n  .mhjd-wrapper .mhjd-form-group textarea.small {\n    min-height: 80px !important;\n  }\n  \n  .mhjd-checkbox-group {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    margin-top: 20px;\n    cursor: pointer;\n  }\n  \n  .mhjd-checkbox-group input[type=\"checkbox\"] {\n    width: 20px !important;\n    height: 20px !important;\n    min-width: 20px !important;\n    padding: 0 !important;\n    margin-top: 2px;\n    accent-color: #bc00f6;\n    cursor: pointer;\n    border-radius: 4px !important;\n    -webkit-appearance: checkbox !important;\n    appearance: checkbox !important;\n  }\n  \n  .mhjd-checkbox-group label {\n    font-size: 14px;\n    color: #555;\n    cursor: pointer;\n    margin-bottom: 0;\n    line-height: 1.4;\n  }\n  \n  .mhjd-btn-row {\n    display: flex;\n    gap: 12px;\n    margin-top: 24px;\n  }\n  \n  .mhjd-btn {\n    flex: 1;\n    padding: 14px 24px;\n    font-family: 'Poppins', sans-serif;\n    font-size: 16px;\n    font-weight: 500;\n    border: none !important;\n    border-radius: 10px !important;\n    -webkit-border-radius: 10px !important;\n    -moz-border-radius: 10px !important;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    transition: all 0.2s;\n  }\n  \n  .mhjd-btn-back {\n    background: #f0f0f0 !important;\n    color: #666666 !important;\n  }\n  \n  .mhjd-btn-back:hover {\n    background: #e0e0e0 !important;\n  }\n  \n  .mhjd-btn-next {\n    background: #bc00f6 !important;\n    color: #ffffff !important;\n  }\n  \n  .mhjd-btn-next:hover {\n    transform: scale(1.02);\n    opacity: 0.9;\n  }\n  \n  .mhjd-btn-submit {\n    background: #660058 !important;\n    color: #ffffff !important;\n  }\n  \n  .mhjd-btn-submit:hover {\n    transform: scale(1.02);\n    opacity: 0.9;\n  }\n  \n  .mhjd-btn svg {\n    width: 18px;\n    height: 18px;\n  }\n  \n  .mhjd-btn:active {\n    transform: scale(0.98);\n  }\n  \n  .mhjd-wrapper input.error,\n  .mhjd-wrapper textarea.error,\n  .mhjd-wrapper select.error {\n    border-color: #e74c3c !important;\n    background: #fff5f5 !important;\n  }\n  \n  .mhjd-error-msg {\n    color: #e74c3c;\n    font-size: 13px;\n    margin-top: 6px;\n    display: none;\n  }\n  \n  .mhjd-error-msg.show {\n    display: block;\n  }\n  \n  .mhjd-success-message {\n    display: none;\n    text-align: center;\n    padding: 40px 20px;\n    animation: mhjdFadeIn 0.5s ease-out;\n  }\n  \n  .mhjd-success-message.show {\n    display: block;\n  }\n  \n  .mhjd-success-message h2 {\n    font-family: 'Poppins', sans-serif;\n    font-size: 24px;\n    font-weight: 600;\n    color: #660058;\n    margin-bottom: 12px;\n  }\n  \n  .mhjd-success-message p {\n    font-family: 'Poppins', sans-serif;\n    color: #666666;\n    font-size: 15px;\n    line-height: 1.6;\n    margin-bottom: 24px;\n  }\n  \n  .mhjd-form-content.hide {\n    display: none;\n  }\n  \n  .mhjd-confetti-canvas {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    z-index: 9999;\n  }\n\n  \/* --- Mobile background carousel --- *\/\n  .mhjd-mobile-bg-carousel {\n    display: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    z-index: 0;\n    opacity: 0.4; \/* Subtle in the background *\/\n    pointer-events: none;\n  }\n\n  @meDia (max-width: 600px) {\n    .mhjd-mobile-bg-carousel {\n      display: flex;\n      flex-direction: column;\n      justify-content: flex-start;\n      gap: 20px; \/* Less gap to make the strip narrower *\/\n      padding-top: 160px; \/* Slightly up *\/\n    }\n    .mhjd-marquee-row {\n      display: flex;\n      width: max-content;\n      animation: mhjd-marquee-scroll 20s linear infinite;\n    }\n    .mhjd-marquee-row.reverse {\n      display: none; \/* Hide the second row to make 1 row *\/\n    }\n    .mhjd-marquee-row img {\n      width: 140px; \/* Slightly larger to fill the single row *\/\n      height: auto;\n      margin: 0 10px;\n      border-radius: 6px;\n      box-shadow: 0 6px 15px rgba(0,0,0,0.2);\n    }\n    .mhjd-marquee-row:nth-child(1) img { transform: rotate(-4deg); }\n    .mhjd-marquee-row:nth-child(2) img { transform: rotate(5deg); }\n    .mhjd-marquee-row:nth-child(3) img { transform: rotate(-3deg); }\n    .mhjd-marquee-row:nth-child(4) img { transform: rotate(6deg); }\n  }\n\n  @keyframes mhjd-marquee-scroll {\n    0% { transform: translateX(0); }\n    100% { transform: translateX(calc(-50% - 15px)); }\n  }\n  @keyframes mhjd-marquee-scroll-rev {\n    0% { transform: translateX(calc(-50% - 15px)); }\n    100% { transform: translateX(0); }\n  }\n\u003c\/style\u003e\n\n\u003cdiv class=\"mhjd-wrapper\"\u003e\n  \n  \u003c!-- Mobile background carousel --\u003e\n  \u003cdiv class=\"mhjd-mobile-bg-carousel\"\u003e\n    \u003cdiv class=\"mhjd-marquee-row\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0942\/4846\/8854\/files\/2_5608b4c4-cf20-44fc-a1e8-fcb1416daa55.png?v=1773244320\" alt=\"Wish 1\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0942\/4846\/8854\/files\/3_f95315cf-4b11-4751-a615-4d547b8b7fba.png?v=1773244320\" alt=\"Wish 2\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0942\/4846\/8854\/files\/1_203cf68a-f5ac-48ba-8aba-1c4da2a2ba83.png?v=1773244319\" alt=\"Wish 3\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0942\/4846\/8854\/files\/5_84cd5abd-585d-459a-be84-1027d2ad9b4d.png?v=1773244320\" alt=\"Wish 4\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0942\/4846\/8854\/files\/4_4719a827-bb29-4220-ac53-b026333489a6.png?v=1773244319\" alt=\"Wish 5\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0942\/4846\/8854\/files\/7_609e3d13-5f29-4836-9b52-585fdd8fab2e.png?v=1773244319\" alt=\"Wish 6\"\u003e\n      \n      \u003c!-- Repeat for seamless loop --\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0942\/4846\/8854\/files\/2_5608b4c4-cf20-44fc-a1e8-fcb1416daa55.png?v=1773244320\" alt=\"Wish 1\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0942\/4846\/8854\/files\/3_f95315cf-4b11-4751-a615-4d547b8b7fba.png?v=1773244320\" alt=\"Wish 2\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0942\/4846\/8854\/files\/1_203cf68a-f5ac-48ba-8aba-1c4da2a2ba83.png?v=1773244319\" alt=\"Wish 3\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0942\/4846\/8854\/files\/5_84cd5abd-585d-459a-be84-1027d2ad9b4d.png?v=1773244320\" alt=\"Wish 4\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0942\/4846\/8854\/files\/4_4719a827-bb29-4220-ac53-b026333489a6.png?v=1773244319\" alt=\"Wish 5\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0942\/4846\/8854\/files\/7_609e3d13-5f29-4836-9b52-585fdd8fab2e.png?v=1773244319\" alt=\"Wish 6\"\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- Polaroids in the background (desktop) --\u003e\n  \u003cdiv class=\"mhjd-polaroids-container\"\u003e\n    \u003cdiv class=\"mhjd-polaroid mhjd-polaroid-1\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0942\/4846\/8854\/files\/7_609e3d13-5f29-4836-9b52-585fdd8fab2e.png?v=1773244319\" alt=\"Wish 1\"\u003e\n    \u003c\/div\u003e\n    \u003cdiv class=\"mhjd-polaroid mhjd-polaroid-2\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0942\/4846\/8854\/files\/4_4719a827-bb29-4220-ac53-b026333489a6.png?v=1773244319\" alt=\"Wish 2\"\u003e\n    \u003c\/div\u003e\n    \u003cdiv class=\"mhjd-polaroid mhjd-polaroid-3\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0942\/4846\/8854\/files\/5_84cd5abd-585d-459a-be84-1027d2ad9b4d.png?v=1773244320\" alt=\"Wish 3\"\u003e\n    \u003c\/div\u003e\n    \u003cdiv class=\"mhjd-polaroid mhjd-polaroid-4\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0942\/4846\/8854\/files\/1_203cf68a-f5ac-48ba-8aba-1c4da2a2ba83.png?v=1773244319\" alt=\"Wish 4\"\u003e\n    \u003c\/div\u003e\n    \u003cdiv class=\"mhjd-polaroid mhjd-polaroid-5\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0942\/4846\/8854\/files\/3_f95315cf-4b11-4751-a615-4d547b8b7fba.png?v=1773244320\" alt=\"Wish 5\"\u003e\n    \u003c\/div\u003e\n    \u003cdiv class=\"mhjd-polaroid mhjd-polaroid-6\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0942\/4846\/8854\/files\/2_5608b4c4-cf20-44fc-a1e8-fcb1416daa55.png?v=1773244320\" alt=\"Wish 6\"\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003cdiv class=\"mhjd-container\"\u003e\n\u003cimg id=\"mhjdBanner\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0942\/4846\/8854\/files\/Banner_inschrijf_pagina.1_3444f132-b975-49d1-9253-594f65717753.png?v=1773139286\" alt=\"Make it your day\" class=\"mhjd-banner\"\u003e\n    \u003cdiv class=\"mhjd-card\"\u003e\n      \u003cdiv class=\"mhjd-form-content\" id=\"formContent\"\u003e\n        \u003cdiv class=\"mhjd-progress\"\u003e\n        \u003cdiv class=\"mhjd-progress-dot active\" data-step=\"0\"\u003e\u003cbr\u003e\u003c\/div\u003e\n        \u003cdiv class=\"mhjd-progress-dot\" data-step=\"1\"\u003e\u003cbr\u003e\u003c\/div\u003e\n        \u003cdiv class=\"mhjd-progress-dot\" data-step=\"2\"\u003e\u003cbr\u003e\u003c\/div\u003e\n        \u003cdiv class=\"mhjd-progress-dot\" data-step=\"3\"\u003e\u003cbr\u003e\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cform id=\"registrationForm\" action=\"https:\/\/formspree.io\/f\/mgoovzgp\" method=\"POST\"\u003e\n\u003cinput type=\"hidden\" name=\"_subject\" value=\"Nieuwe inschrijving - Maak het jouw dag\"\u003e \n        \n        \u003c!-- Step 0: Introduction (WITH VIDEO) --\u003e\n        \u003cdiv class=\"mhjd-step active\" data-step=\"0\"\u003e\n        \u003cdiv class=\"mhjd-step-title\"\u003eYour wish starts here 💖\u003c\/div\u003e\n        \n        \u003cp class=\"mhjd-intro-text\"\u003eEveryone deserves an unforgettable moment. With \u003ca href=\"https:\/\/www.haarspullen.nl\/en\/blogs\/Haarspullen-info\/maak-het-jouw-dag-zo-maak-jij-kans-op-jouw-ultieme-droommoment\"\u003e\n  \u003cstrong\u003eMake it your day\u003c\/strong\u003e\n\u003c\/a\u003e we do our best to make a wish come true for you or someone else!\n\u003c\/p\u003e\n        \u003cp class=\"mhjd-intro-note\"\u003e🕒 It only takes 2 minutes to fill out.\u003c\/p\u003e\n\n        \u003c!-- VIDEO SECTION SMALLER AND ABOVE THE BUTTON --\u003e\n        \u003cdiv style=\"margin: 0 auto 24px; max-width: 80%; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 2px solid #fef0f0;\"\u003e\n          \u003c!-- Controls attribute added so the visitor can pause themselves --\u003e\n          \u003cvideo width=\"100%\" autoplay loop muted playsinline controls style=\"display: block;\"\u003e\n            \u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/d0ce5053cdd6417dbf5aea7e9c629217.mp4\" type=\"video\/mp4\"\u003e\u003c\/video\u003e\n        \u003c\/div\u003e\n        \n        \u003cdiv class=\"mhjd-btn-row\"\u003e\u003cbutton type=\"button\" class=\"mhjd-btn mhjd-btn-next\" onclick=\"nextStep(0)\"\u003e I’m in \u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\n                          \u003cpath d=\"M9 18l6-6-6-6\"\u003e\u003c\/path\u003e\n                        \u003c\/svg\u003e \u003c\/button\u003e\u003c\/div\u003e\n        \u003c\/div\u003e\n        \n        \u003c!-- Step 1: Name \u0026 Wish --\u003e\n        \u003cdiv class=\"mhjd-step\" data-step=\"1\"\u003e\n        \u003cdiv class=\"mhjd-step-title\"\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\n                        \u003cpath d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 16.8l-6.2 4.5 2.4-7.4L2 9.4h7.6z\"\u003e\u003c\/path\u003e\n                      \u003c\/svg\u003e Tell us about your wish\u003c\/div\u003e\n        \u003cdiv class=\"mhjd-form-group\"\u003e\n\u003clabel for=\"name\"\u003eMy name is:\u003c\/label\u003e \u003cinput type=\"text\" id=\"name\" name=\"Naam\" placeholder=\"Tell us your name\" required=\"\"\u003e\n        \u003cdiv class=\"mhjd-error-msg\"\u003eEnter your name\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"mhjd-form-group\"\u003e\n\u003clabel for=\"wishFor\"\u003eMy wish is for...\u003c\/label\u003e \u003cinput type=\"text\" id=\"wishFor\" name=\"Mijn wens is voor\" placeholder=\"For you or someone else?\" required=\"\"\u003e\n        \u003cdiv class=\"mhjd-error-msg\"\u003eFor you or someone else?\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"mhjd-form-group\"\u003e\n\u003clabel for=\"yourWish\"\u003eThe wish is...\u003c\/label\u003e \u003ctextarea id=\"yourWish\" name=\"Wat is jouw wens\" placeholder=\"Explain your wish (nothing is too crazy! 😀)\" required=\"\"\u003e\u003c\/textarea\u003e\n        \u003cdiv class=\"mhjd-error-msg\"\u003eTell us what your wish is\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"mhjd-btn-row\"\u003e\n\u003cbutton type=\"button\" class=\"mhjd-btn mhjd-btn-back\" onclick=\"prevStep(0)\"\u003e \u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\u003cpath d=\"M15 18l-6-6 6-6\"\u003e\u003c\/path\u003e\u003c\/svg\u003e Back \u003c\/button\u003e \u003cbutton type=\"button\" class=\"mhjd-btn mhjd-btn-next\" onclick=\"nextStep(1)\"\u003e Next \u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\u003cpath d=\"M9 18l6-6-6-6\"\u003e\u003c\/path\u003e\u003c\/svg\u003e \u003c\/button\u003e\n\u003c\/div\u003e\n        \u003c\/div\u003e\n        \n        \u003c!-- Step 2: Personal Details --\u003e\n        \u003cdiv class=\"mhjd-step\" data-step=\"2\"\u003e\n        \u003cdiv class=\"mhjd-step-title\"\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\u003cpath d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"\u003e\u003c\/path\u003e\u003ccircle cx=\"12\" cy=\"7\" r=\"4\"\u003e\u003c\/circle\u003e\u003c\/svg\u003e Your details\u003c\/div\u003e\n\n        \u003cdiv class=\"mhjd-form-group\"\u003e\n          \u003clabel for=\"gender\"\u003eSalutation:\u003c\/label\u003e\n          \u003cselect id=\"gender\" name=\"Aanhef\" required\u003e\n            \u003coption value=\"\" disabled selected\u003eChoose your salutation\u003c\/option\u003e\n            \u003coption value=\"Vrouw\"\u003eWoman\u003c\/option\u003e\n            \u003coption value=\"Man\"\u003eMan\u003c\/option\u003e\n            \u003coption value=\"Zeg ik liever niet\"\u003ePrefer not to say\u003c\/option\u003e\n          \u003c\/select\u003e\n          \u003cdiv class=\"mhjd-error-msg\"\u003eChoose a salutation\u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"mhjd-form-group\"\u003e\n\u003clabel for=\"email\"\u003eEmail address:\u003c\/label\u003e \u003cinput type=\"email\" id=\"email\" name=\"Email\" placeholder=\"name@example.com\" required=\"\"\u003e\n        \u003cdiv class=\"mhjd-error-msg\"\u003eEnter a valid email address\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"mhjd-form-group\"\u003e\n\u003clabel for=\"phone\"\u003ePhone number:\u003c\/label\u003e \u003cinput type=\"tel\" id=\"phone\" name=\"Telefoon\" placeholder=\"06 12345678\" required=\"\"\u003e\n        \u003cdiv class=\"mhjd-error-msg\"\u003eEnter your phone number\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"mhjd-form-group\"\u003e\n\u003clabel for=\"city\"\u003eCity:\u003c\/label\u003e \u003cinput type=\"text\" id=\"city\" name=\"Woonplaats\" placeholder=\"Your city\" required=\"\"\u003e\n        \u003cdiv class=\"mhjd-error-msg\"\u003eEnter your city\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"mhjd-btn-row\"\u003e\n\u003cbutton type=\"button\" class=\"mhjd-btn mhjd-btn-back\" onclick=\"prevStep(1)\"\u003e \u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\u003cpath d=\"M15 18l-6-6 6-6\"\u003e\u003c\/path\u003e\u003c\/svg\u003e Back \u003c\/button\u003e \u003cbutton type=\"button\" class=\"mhjd-btn mhjd-btn-next\" onclick=\"nextStep(2)\"\u003e Next \u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\u003cpath d=\"M9 18l6-6-6-6\"\u003e\u003c\/path\u003e\u003c\/svg\u003e \u003c\/button\u003e\n\u003c\/div\u003e\n        \u003c\/div\u003e\n        \n        \u003c!-- Step 3: Conclusion --\u003e\n        \u003cdiv class=\"mhjd-step\" data-step=\"3\"\u003e\n        \u003cdiv class=\"mhjd-step-title\"\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\u003cpath d=\"M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3\"\u003e\u003c\/path\u003e\u003c\/svg\u003e Last step!\u003c\/div\u003e\n\n        \u003cdiv class=\"mhjd-form-group\"\u003e\n\u003clabel for=\"openInput\"\u003eIs there anything else we should know?\u003c\/label\u003e \u003ctextarea id=\"openInput\" name=\"Open inbreng\" class=\"small\" placeholder=\"Is there anything else you want to tell us?\"\u003e\u003c\/textarea\u003e\n\u003c\/div\u003e\n        \u003cdiv class=\"mhjd-checkbox-group\"\u003e\n\u003cinput type=\"checkbox\" id=\"newsletter\" name=\"Nieuwsbrief\" value=\"Ja\"\u003e \u003clabel for=\"newsletter\"\u003eI want to stay informed about the latest news, offers and the \"Make it your day\" campaign.\u003c\/label\u003e\n\u003c\/div\u003e\n        \u003cdiv class=\"mhjd-btn-row\"\u003e\n\u003cbutton type=\"button\" class=\"mhjd-btn mhjd-btn-back\" onclick=\"prevStep(2)\"\u003e \u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\u003cpath d=\"M15 18l-6-6 6-6\"\u003e\u003c\/path\u003e\u003c\/svg\u003e Back \u003c\/button\u003e \u003cbutton type=\"submit\" class=\"mhjd-btn mhjd-btn-submit\"\u003e Send \u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\u003cpath d=\"M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e \u003c\/button\u003e\n\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003c\/form\u003e\n      \u003c\/div\u003e\n      \n      \u003cdiv class=\"mhjd-success-message\" id=\"successMessage\"\u003e\n        \u003ch2\u003eYour request is received!\u003c\/h2\u003e\n        \u003cp\u003eWho knows, your wish might come true soon! We carefully review every submission and may contact you shortly.\u003c\/p\u003e\n      \u003c\/div\u003e\n      \n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003ccanvas class=\"mhjd-confetti-canvas\" id=\"confettiCanvas\"\u003e\u003c\/canvas\u003e \n\n\u003cscript\u003e\n(function() {\n  var currentStep = 0;\n  var totalSteps = 4;\n  \n  window.nextStep = function(step) {\n    if (step \u003e 0 \u0026\u0026 !validateStep(step)) return;\n    \n    if (step \u003c totalSteps - 1) {\n      showStep(step + 1);\n    }\n  };\n  \n  window.prevStep = function(step) {\n    if (step \u003e 0) {\n      showStep(step - 1);\n    }\n  };\n  \n  function showStep(step) {\n    currentStep = step;\n    \n    document.querySelectorAll('.mhjd-step').forEach(function(el) {\n      el.classList.remove('active');\n    });\n    \n    document.querySelector('.mhjd-step[data-step=\"' + step + '\"]').classList.add('active');\n    \n    document.querySelectorAll('.mhjd-progress-dot').forEach(function(dot) {\n      var dotStep = parseInt(dot.getAttribute('data-step'));\n      dot.classList.remove('active', 'completed');\n      \n      if (dotStep === step) {\n        dot.classList.add('active');\n      } else if (dotStep \u003c step) {\n        dot.classList.add('completed');\n      }\n    });\n    \n    \/\/ If we leave step 0, pause the video to save data\/battery\n    if (step !== 0) {\n      var introVideo = document.querySelector('.mhjd-step[data-step=\"0\"] video');\n      if (introVideo \u0026\u0026 !introVideo.paused) {\n        introVideo.pause();\n      }\n    }\n  }\n  \n  function validateStep(step) {\n    var stepEl = document.querySelector('.mhjd-step[data-step=\"' + step + '\"]');\n    var inputs = stepEl.querySelectorAll('input[required], textarea[required], select[required]');\n    var valid = true;\n    \n    inputs.forEach(function(input) {\n      var errorMsg = input.parentElement.querySelector('.mhjd-error-msg');\n      \n      if (!input.value || !input.value.trim()) {\n        input.classList.add('error');\n        if (errorMsg) errorMsg.classList.add('show');\n        valid = false;\n      } else if (input.type === 'email' \u0026\u0026 !isValidEmail(input.value)) {\n        input.classList.add('error');\n        if (errorMsg) errorMsg.classList.add('show');\n        valid = false;\n      } else {\n        input.classList.remove('error');\n        if (errorMsg) errorMsg.classList.remove('show');\n      }\n    });\n    \n    return valid;\n  }\n  \n  function isValidEmail(email) {\n    return \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email);\n  }\n  \n  document.querySelectorAll('.mhjd-wrapper input:not([type=\"checkbox\"]), .mhjd-wrapper textarea, .mhjd-wrapper select').forEach(function(input) {\n    input.addEventListener('input', function() {\n      this.classList.remove('error');\n      var errorMsg = this.parentElement.querySelector('.mhjd-error-msg');\n      if (errorMsg) errorMsg.classList.remove('show');\n    });\n    input.addEventListener('change', function() {\n      this.classList.remove('error');\n      var errorMsg = this.parentElement.querySelector('.mhjd-error-msg');\n      if (errorMsg) errorMsg.classList.remove('show');\n    });\n  });\n  \n  function launchConfetti() {\n    var canvas = document.getElementById('confettiCanvas');\n    canvas.width = window.innerWidth;\n    canvas.height = window.innerHeight;\n    var ctx = canvas.getContext('2d');\n    var particles = [];\n    var colors = ['#ffffff', '#e8b4f8', '#d580f0', '#bc00f6', '#9a00c9', '#7a009e', '#660058'];\n    \n    for (var i = 0; i \u003c 150; i++) {\n      particles.push({\n        x: Math.random() * canvas.width,\n        y: Math.random() * canvas.height - canvas.height,\n        w: Math.random() * 10 + 5,\n        h: Math.random() * 6 + 3,\n        color: colors[Math.floor(Math.random() * colors.length)],\n        vx: (Math.random() - 0.5) * 4,\n        vy: Math.random() * 3 + 2,\n        rot: Math.random() * 360,\n        rotSpeed: (Math.random() - 0.5) * 10,\n        opacity: 1\n      });\n    }\n    \n    var frame = 0;\n    var maxFrames = 200;\n    \n    function animate() {\n      frame++;\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\n      \n      if (frame \u003e maxFrames * 0.6) {\n        var fadeProgress = (frame - maxFrames * 0.6) \/ (maxFrames * 0.4);\n        ctx.globalAlpha = Math.max(0, 1 - fadeProgress);\n      }\n      \n      for (var i = 0; i \u003c particles.length; i++) {\n        var p = particles[i];\n        p.x += p.vx;\n        p.y += p.vy;\n        p.vy += 0.05; \/\/ gravity\n        p.rot += p.rotSpeed;\n        \n        ctx.save();\n        ctx.translate(p.x + p.w \/ 2, p.y + p.h \/ 2);\n        ctx.rotate(p.rot * Math.PI \/ 180);\n        ctx.fillStyle = p.color;\n        ctx.fillRect(-p.w \/ 2, -p.h \/ 2, p.w, p.h);\n        ctx.restore();\n      }\n      \n      if (frame \u003c maxFrames) {\n        requestAnimationFrame(animate);\n      } else {\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\n      }\n    }\n    \n    animate();\n  }\n  \n  var form = document.getElementById('registrationForm');\n  var formContent = document.getElementById('formContent');\n  var successMessage = document.getElementById('successMessage');\n  var banner = document.getElementById('mhjdBanner');\n  \n  form.addEventListener('submit', function(e) {\n    e.preventDefault();\n    \n    if (!validateStep(3)) return;\n    \n    var btn = form.querySelector('.mhjd-btn-submit');\n    btn.innerHTML = 'Sending...';\n    btn.disabled = true;\n    \n    \/\/ Squeezely integration (redirects to Copernica)\n    try {\n      var emailValue = document.getElementById('email').value.trim();\n      var nameValue = document.getElementById('name').value.trim();\n      var genderValue = document.getElementById('gender') ? document.getElementById('gender').value : \"\";\n      var wishForValue = document.getElementById('wishFor').value.trim();\n      var wishValue = document.getElementById('yourWish').value.trim();\n      var cityValue = document.getElementById('city').value.trim();\n      var newsletterChecked = document.getElementById('newsletter') ? document.getElementById('newsletter').checked : false;\n      var fullURL = window.location.href;\n\n      window._sqzl = window._sqzl || [];\n      \n      \/\/ Update profile with all collected data in Squeezely\/Copernica\n      window._sqzl.push({\n        \"event\": \"ProfileUpdate\",\n        \"email\": emailValue,\n        \"firstname\": nameValue,\n        \"gender\": genderValue,\n        \"city\": cityValue,\n        \"custom_maakhetjouwdag_wensvoor\": wishForValue,\n        \"custom_maakhetjouwdag_wens\": wishValue,\n        \"newsletter\": newsletterChecked ? \"yes\" : \"no\",\n        \"newsletter_consent\": newsletterChecked ? \"yes\" : \"no\",\n        \"consent_given\": true,\n        \"custom_origin\": \"maakhetjouwdag\",\n        \"custom_last_campaign\": \"maakhetjouwdag\",\n        \"custom_url_of_registration\": fullURL\n      });\n      \n      \/\/ Register the complete event in Squeezely\/Copernica\n      window._sqzl.push({\n        \"event\": \"CompleteRegistration\",\n        \"email\": emailValue,\n        \"firstname\": nameValue,\n        \"city\": cityValue,\n        \"newsletter\": newsletterChecked ? \"yes\" : \"no\",\n        \"consent_given\": true,\n        \"custom_origin\": \"maakhetjouwdag\"\n      });\n    } catch(err) {\n      console.error('Squeezely error:', err);\n    }\n    \n    \/\/ Also send data to Formspree (as backup \/ email notification)\n    var formData = new FormData(form);\n    \n    fetch(form.action, {\n      method: 'POST',\n      body: formData,\n      headers: {\n        'Accept': 'application\/json'\n      }\n    }).then(function(response) {\n      \/\/ Formspree succeeded, show success animation!\n      formContent.classList.add('hide');\n      banner.classList.add('hide');\n      successMessage.classList.add('show');\n      launchConfetti();\n    }).catch(function() {\n      \/\/ If Formspree fails (e.g. adblocker) we still show success,\n      \/\/ because Squeezely\/Copernica handling above already done!\n      formContent.classList.add('hide');\n      banner.classList.add('hide');\n      successMessage.classList.add('show');\n      launchConfetti();\n    });\n  });\n  \n  \/\/ Mobile banner and background resize via JavaScript\n  function resizeBanner() {\n    var b = document.getElementById('mhjdBanner');\n    var w = document.querySelector('.mhjd-wrapper');\n    if (b) {\n      if (window.innerWidth \u003c= 600) {\n        b.style.cssText = 'width: 65% !important; max-width: 280px !important; height: auto !important; display: block !important; margin: 0 auto 1.2rem !important;';\n      } else {\n        b.style.cssText = 'width: 450px !important; max-width: 450px !important; height: auto !important; display: block !important; margin: 0 auto 2rem !important;';\n      }\n    }\n    if (w) {\n      if (window.innerWidth \u003c= 600) {\n        w.style.backgroundSize = '200% auto';\n}else {\nw.style.backgroundSize = 'cover';\n}\n}\n}\nresizeBanner();\nwindow.addEventListener('resize', resizeBanner);\n})();\n\n","products":[],"url":"https:\/\/www.haarspullen.nl\/en\/collections\/thank-you-for-subscribing.oembed","provider":"Haarspullen.nl","version":"1.0","type":"link"}