2026 UFB Gala Dinner \u2014 Table Registration<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap\" rel=\"stylesheet\" \/>\n <style>\n :root {\n --red: #b70b1f;\n --red-dark: #8f091a;\n --red-pale: #fdf0f1;\n --red-light: #f5c6cb;\n --grey: #717171;\n --grey-light: #e8e8e8;\n --grey-pale: #f6f6f6;\n --dark: #1a1a1a;\n --mid: #3d3d3d;\n --muted: #717171;\n --border: #d8d8d8;\n --border-light: #eeeeee;\n --bg: #fafafa;\n --white: #ffffff;\n --success: #3A6B45;\n --success-bg: #EBF3ED;\n --danger: #b70b1f;\n --danger-bg: #fdf0f1;\n --radius: 10px;\n --radius-sm: 6px;\n }\n\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n body {\n font-family: 'DM Sans', sans-serif;\n background: var(--bg);\n color: var(--dark);\n min-height: 100vh;\n padding: 48px 16px 80px;\n }\n\n .page-wrap { max-width: 640px; margin: 0 auto; }\n\n \/* \u2500\u2500 Header \u2500\u2500 *\/\n .form-header {\n text-align: center;\n margin-bottom: 40px;\n padding-bottom: 36px;\n border-bottom: 2px solid var(--red);\n }\n\n .form-header .eyebrow {\n font-size: 11px; font-weight: 500;\n letter-spacing: 0.2em; text-transform: uppercase;\n color: var(--grey); margin-bottom: 14px;\n }\n\n .form-header h1 {\n font-family: 'Cormorant Garamond', serif;\n font-size: 38px; font-weight: 400;\n color: var(--dark); line-height: 1.15; margin-bottom: 16px;\n }\n\n .event-meta {\n display: inline-flex; flex-wrap: wrap;\n justify-content: center; gap: 20px; margin-bottom: 16px;\n }\n\n .event-meta-item {\n display: flex; align-items: center; gap: 7px;\n font-size: 13px; color: var(--grey);\n }\n\n .event-meta-item .icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--red); opacity: 0.8; }\n\n .form-header p { font-size: 13px; color: var(--muted); line-height: 1.65; margin-top: 12px; }\n\n .red-rule { width: 40px; height: 2px; background: var(--red); margin: 18px auto; }\n\n \/* \u2500\u2500 Progress \u2500\u2500 *\/\n .progress-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 36px; }\n\n .progress-step { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; }\n .progress-step.active { color: var(--dark); font-weight: 500; }\n .progress-step.done { color: var(--red); }\n\n .step-dot {\n width: 24px; height: 24px; border-radius: 50%;\n border: 1.5px solid var(--border);\n display: flex; align-items: center; justify-content: center;\n font-size: 11px; font-weight: 500; color: var(--muted);\n flex-shrink: 0; transition: all 0.2s;\n }\n\n .progress-step.active .step-dot { border-color: var(--red); background: var(--red); color: var(--white); }\n .progress-step.done .step-dot { border-color: var(--red); background: var(--red); color: var(--white); }\n .progress-line { flex: 1; height: 1px; background: var(--border-light); }\n\n \/* \u2500\u2500 Steps \u2500\u2500 *\/\n .step { display: none; animation: fadeIn 0.25s ease; }\n .step.active { display: block; }\n @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }\n\n .section-label {\n font-size: 10px; font-weight: 500;\n letter-spacing: 0.14em; text-transform: uppercase;\n color: var(--grey); margin-bottom: 20px;\n }\n\n \/* \u2500\u2500 Fields \u2500\u2500 *\/\n .field { margin-bottom: 18px; }\n\n .field label {\n display: block; font-size: 12px; font-weight: 500;\n color: var(--mid); margin-bottom: 7px; letter-spacing: 0.02em;\n }\n\n .field input,\n .field select {\n width: 100%; height: 46px; padding: 0 14px;\n border: 1px solid var(--border); border-radius: var(--radius-sm);\n background: var(--white);\n font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--dark);\n outline: none; transition: border-color 0.15s;\n appearance: none; -webkit-appearance: none;\n }\n\n .field select {\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23717171' d='M6 8L1 3h10z'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 14px center;\n padding-right: 36px;\n }\n\n .field input:focus, .field select:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(183,11,31,0.08); }\n .field.has-error input, .field.has-error select { border-color: var(--danger); }\n\n .error-msg { font-size: 11px; color: var(--danger); margin-top: 5px; display: none; }\n .field.has-error .error-msg { display: block; }\n\n .opt-tag { font-size: 10px; color: var(--grey); font-weight: 400; margin-left: 4px; }\n\n .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }\n .grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }\n @media (max-width: 500px) { .grid2, .grid3 { grid-template-columns: 1fr; } }\n\n \/* \u2500\u2500 Diet other field \u2500\u2500 *\/\n .diet-other-wrap {\n margin-top: 8px;\n display: none;\n }\n .diet-other-wrap.visible { display: block; }\n .diet-other-wrap input { border-style: dashed; }\n\n \/* \u2500\u2500 Guest cards \u2500\u2500 *\/\n .guest-card {\n background: var(--white);\n border: 1px solid var(--border-light);\n border-radius: var(--radius);\n padding: 20px 20px 20px 26px;\n margin-bottom: 16px; position: relative;\n }\n\n .guest-card::before {\n content: ''; position: absolute; top: 0; left: 0;\n width: 4px; height: 100%;\n background: var(--red);\n border-radius: var(--radius) 0 0 var(--radius);\n }\n\n .guest-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }\n\n .guest-num-badge {\n width: 28px; height: 28px; border-radius: 50%;\n background: var(--red-pale); border: 1px solid var(--red-light);\n color: var(--red); font-size: 11px; font-weight: 500;\n display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n }\n\n .guest-card-title { font-size: 13px; font-weight: 500; color: var(--mid); }\n\n \/* \u2500\u2500 GDPR \u2500\u2500 *\/\n .gdpr-block {\n background: var(--white); border: 1px solid var(--border-light);\n border-radius: var(--radius); padding: 18px 20px; margin-bottom: 24px;\n }\n\n .gdpr-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }\n\n .gdpr-check input[type=\"checkbox\"] {\n width: 18px; height: 18px; margin-top: 2px;\n accent-color: var(--red); flex-shrink: 0; cursor: pointer;\n }\n\n .gdpr-check span { font-size: 12px; color: var(--mid); line-height: 1.65; }\n .gdpr-check span a { color: var(--red); text-decoration: underline; }\n .gdpr-error { font-size: 11px; color: var(--danger); margin-top: 8px; display: none; }\n\n \/* \u2500\u2500 Buttons \u2500\u2500 *\/\n .btn-row { display: flex; justify-content: flex-end; gap: 10px; margin-top: 28px; flex-wrap: wrap; }\n\n .btn {\n height: 44px; padding: 0 24px; border-radius: var(--radius-sm);\n font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;\n cursor: pointer; transition: all 0.15s;\n display: inline-flex; align-items: center; gap: 8px;\n border: none; outline: none;\n }\n\n .btn-primary { background: var(--dark); color: var(--white); }\n .btn-primary:hover { background: var(--mid); }\n\n .btn-secondary { background: transparent; color: var(--grey); border: 1px solid var(--border); }\n .btn-secondary:hover { background: var(--grey-pale); border-color: var(--grey-light); }\n\n .btn-red { background: var(--red); color: var(--white); }\n .btn-red:hover { background: var(--red-dark); }\n\n .btn:disabled { opacity: 0.5; cursor: not-allowed; }\n\n \/* \u2500\u2500 Notice \u2500\u2500 *\/\n .notice {\n background: var(--red-pale); border: 1px solid var(--red-light);\n border-radius: var(--radius-sm); padding: 12px 16px;\n font-size: 13px; color: var(--mid); margin-bottom: 24px;\n display: flex; align-items: flex-start; gap: 10px; line-height: 1.55;\n }\n\n .notice-icon { color: var(--red); font-size: 16px; flex-shrink: 0; margin-top: 1px; }\n\n \/* \u2500\u2500 Summary \u2500\u2500 *\/\n .summary-block {\n background: var(--white); border: 1px solid var(--border-light);\n border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px;\n }\n\n .summary-block-title {\n font-size: 10px; font-weight: 500;\n text-transform: uppercase; letter-spacing: 0.12em;\n color: var(--grey); margin-bottom: 12px;\n }\n\n .summary-row {\n display: flex; justify-content: space-between; align-items: baseline;\n font-size: 13px; padding: 6px 0;\n border-bottom: 1px solid var(--border-light); gap: 16px;\n }\n\n .summary-row:last-child { border-bottom: none; }\n .summary-row .lbl { color: var(--grey); flex-shrink: 0; }\n .summary-row .val { font-weight: 500; color: var(--dark); text-align: right; word-break: break-word; }\n\n \/* \u2500\u2500 Status \u2500\u2500 *\/\n .status-msg { font-size: 12px; color: var(--grey); text-align: center; margin-top: 12px; min-height: 18px; }\n .status-err { color: var(--danger) !important; }\n\n .spinner {\n width: 14px; height: 14px;\n border: 2px solid rgba(255,255,255,0.35);\n border-top-color: #fff; border-radius: 50%;\n animation: spin 0.6s linear infinite; display: inline-block;\n }\n @keyframes spin { to { transform: rotate(360deg); } }\n\n \/* \u2500\u2500 Success \u2500\u2500 *\/\n .success-screen { text-align: center; padding: 52px 0 36px; }\n\n .success-icon-wrap {\n width: 64px; height: 64px; border-radius: 50%;\n background: var(--success-bg); color: var(--success);\n display: flex; align-items: center; justify-content: center;\n margin: 0 auto 20px; font-size: 28px;\n }\n\n .success-screen h2 {\n font-family: 'Cormorant Garamond', serif;\n font-size: 30px; font-weight: 400; color: var(--dark); margin-bottom: 16px;\n }\n\n .success-screen .confirm-msg {\n font-size: 15px; color: var(--mid); line-height: 1.75;\n max-width: 460px; margin: 0 auto 24px;\n }\n\n .divider { border: none; border-top: 1px solid var(--border-light); margin: 28px 0; }\n\n .summary-header {\n font-size: 11px; font-weight: 500;\n text-transform: uppercase; letter-spacing: 0.12em;\n color: var(--grey); margin-bottom: 16px; text-align: left;\n }\n\n @media print {\n body { padding: 0; background: white; }\n .btn-row, .progress-wrap, .form-header, .notice, .gdpr-block { display: none !important; }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"page-wrap\">\n\n \n <div class=\"form-header\">\n <p class=\"eyebrow\">Table registration<\/p>\n <h1>2026 UFB Gala Dinner<\/h1>\n <div class=\"event-meta\">\n <div class=\"event-meta-item\">\n <svg class=\"icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"\/><path d=\"M16 2v4M8 2v4M3 10h18\"\/>\n <\/svg>\n Thursday, 11 June 2026\n <\/div>\n <div class=\"event-meta-item\">\n <svg class=\"icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n <path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z\"\/><circle cx=\"12\" cy=\"9\" r=\"2.5\"\/>\n <\/svg>\n The Merode, Brussels\n <\/div>\n <\/div>\n <div class=\"red-rule\"><\/div>\n <p>Please fill in your details and those of your guests.<br>Fields marked * are required \u2014 all others are optional.<\/p>\n <\/div>\n\n \n <div class=\"progress-wrap\">\n <div class=\"progress-step active\" id=\"ps1\"><div class=\"step-dot\">1<\/div><span>Your details<\/span><\/div>\n <div class=\"progress-line\"><\/div>\n <div class=\"progress-step\" id=\"ps2\"><div class=\"step-dot\">2<\/div><span>Guest list<\/span><\/div>\n <div class=\"progress-line\"><\/div>\n <div class=\"progress-step\" id=\"ps3\"><div class=\"step-dot\">3<\/div><span>Confirm<\/span><\/div>\n <\/div>\n\n \n <div class=\"step active\" id=\"step1\">\n <p class=\"section-label\">Step 1 of 3 \u2014 Your details<\/p>\n <div class=\"grid3\">\n <div class=\"field\" id=\"f-buyer-title\">\n <label>Title *<\/label>\n <select id=\"buyer-title\">\n <option value=\"\">Select...<\/option>\n <option>Mr<\/option><option>Mrs<\/option><option>Ms<\/option><option>Dr<\/option><option>Prof<\/option>\n <\/select>\n <p class=\"error-msg\">Please select a title.<\/p>\n <\/div>\n <div class=\"field\" id=\"f-buyer-firstname\">\n <label>First name *<\/label>\n <input type=\"text\" id=\"buyer-firstname\" placeholder=\"e.g. Sophie\" autocomplete=\"given-name\" \/>\n <p class=\"error-msg\">Please enter your first name.<\/p>\n <\/div>\n <div class=\"field\" id=\"f-buyer-lastname\">\n <label>Last name *<\/label>\n <input type=\"text\" id=\"buyer-lastname\" placeholder=\"e.g. Martin\" autocomplete=\"family-name\" \/>\n <p class=\"error-msg\">Please enter your last name.<\/p>\n <\/div>\n <\/div>\n <div class=\"field\" id=\"f-buyer-email\">\n <label>Email address *<\/label>\n <input type=\"email\" id=\"buyer-email\" placeholder=\"you@example.com\" autocomplete=\"email\" \/>\n <p class=\"error-msg\">Please enter a valid email address.<\/p>\n <\/div>\n <div class=\"field\" id=\"f-guest-count\">\n <label>Number of guests at your table *<\/label>\n <select id=\"guest-count\">\n <option value=\"\">Select number of guests...<\/option>\n <option>1<\/option><option>2<\/option><option>3<\/option><option>4<\/option><option>5<\/option>\n <option>6<\/option><option>7<\/option><option>8<\/option><option>9<\/option><option>10<\/option>\n <\/select>\n <p class=\"error-msg\">Please select the number of guests.<\/p>\n <\/div>\n <div class=\"btn-row\">\n <button class=\"btn btn-red\" onclick=\"goStep2()\">Continue →<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"step\" id=\"step2\">\n <p class=\"section-label\" id=\"step2-label\">Step 2 of 3 \u2014 Guest details<\/p>\n <div id=\"guest-fields\"><\/div>\n <div class=\"btn-row\">\n <button class=\"btn btn-secondary\" onclick=\"showStep(1)\">← Back<\/button>\n <button class=\"btn btn-red\" onclick=\"goStep3()\">Review summary →<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"step\" id=\"step3\">\n <p class=\"section-label\">Step 3 of 3 \u2014 Review & confirm<\/p>\n <div class=\"notice\">\n <span class=\"notice-icon\">ⓘ<\/span>\n <span>Please review your guest list carefully before confirming. Once submitted, your registration will be saved and the event administrator will be notified.<\/span>\n <\/div>\n <div id=\"summary-content\"><\/div>\n\n <div class=\"gdpr-block\" id=\"gdpr-block\">\n <label class=\"gdpr-check\" for=\"gdpr-consent\">\n <input type=\"checkbox\" id=\"gdpr-consent\" \/>\n <span>\n I confirm that I have obtained the consent of all guests listed above to share their personal data (name, email address, dietary requirements, company and job title) with UFB for the purposes of organising the 2026 Gala Dinner. This data will be used solely for event management and will not be shared with third parties. For more information, please refer to our <a href=\"#\" target=\"_blank\">Privacy Policy<\/a>.\n <\/span>\n <\/label>\n <p class=\"gdpr-error\" id=\"gdpr-error\">You must accept the terms to proceed.<\/p>\n <\/div>\n\n <div class=\"btn-row\">\n <button class=\"btn btn-secondary\" onclick=\"showStep(2)\">← Edit guests<\/button>\n <button class=\"btn btn-red\" id=\"confirm-btn\" onclick=\"submitForm()\">✓ Confirm & send<\/button>\n <\/div>\n <p class=\"status-msg\" id=\"status-msg\"><\/p>\n <\/div>\n\n \n <div class=\"step\" id=\"step4\">\n <div class=\"success-screen\">\n <div class=\"success-icon-wrap\">✓<\/div>\n <h2>Registration confirmed<\/h2>\n <p class=\"confirm-msg\">\n Thank you, your table registration for the 2026 UFB Gala Dinner has been received.\n We look forward to seeing you on 11 June at our Gala Dinner.\n <\/p>\n <div class=\"red-rule\"><\/div>\n <div id=\"done-summary\" style=\"text-align:left;\"><\/div>\n <div class=\"btn-row\" style=\"justify-content:center;margin-top:24px;\">\n <button class=\"btn btn-secondary\" onclick=\"window.print()\">🖶 Print confirmation<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n<\/div>\n\n<script>\n \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \/\/ CONFIGURATION\n \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n const N8N_WEBHOOK_URL = 'https:\/\/n8n.antidote-digital.com\/webhook\/ae829762-824c-42e5-90a2-791455df6ece';\n const EVENT_NAME = '2026 UFB Gala Dinner';\n const EVENT_DATE = 'Thursday, 11 June 2026';\n const EVENT_VENUE = 'The Merode, Brussels';\n const ADMIN_EMAIL = 'noemie@antidote-digital.com';\n \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n const DIETS = [\"None\",\"Vegetarian\",\"Vegan\",\"Gluten-free\",\"Halal\",\"Kosher\",\"Nut allergy\",\"Dairy-free\",\"Other\"];\n\n function showStep(n) {\n document.querySelectorAll('.step').forEach(s => s.classList.remove('active'));\n document.getElementById('step' + n).classList.add('active');\n [1,2,3].forEach(i => {\n const ps = document.getElementById('ps' + i);\n ps.classList.remove('active','done');\n if (i < n) ps.classList.add('done');\n else if (i === n) ps.classList.add('active');\n });\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n\n function validateFields(checks) {\n let ok = true;\n checks.forEach(c => {\n const el = document.getElementById(c.id);\n const fEl = document.getElementById(c.fid);\n const errEl = fEl && fEl.querySelector('.error-msg');\n if (!c.fn(el.value)) {\n fEl && fEl.classList.add('has-error');\n errEl && (errEl.style.display = 'block');\n ok = false;\n } else {\n fEl && fEl.classList.remove('has-error');\n errEl && (errEl.style.display = 'none');\n }\n });\n return ok;\n }\n\n function validate1() {\n return validateFields([\n { id:'buyer-title', fid:'f-buyer-title', fn: v => v !== '' },\n { id:'buyer-firstname', fid:'f-buyer-firstname', fn: v => v.trim().length > 0 },\n { id:'buyer-lastname', fid:'f-buyer-lastname', fn: v => v.trim().length > 0 },\n { id:'buyer-email', fid:'f-buyer-email', fn: v => \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(v) },\n { id:'guest-count', fid:'f-guest-count', fn: v => v !== '' }\n ]);\n }\n\n function goStep2() {\n if (!validate1()) return;\n buildGuestFields(parseInt(document.getElementById('guest-count').value));\n showStep(2);\n }\n\n function buildGuestFields(count) {\n const container = document.getElementById('guest-fields');\n container.innerHTML = '';\n document.getElementById('step2-label').textContent =\n `Step 2 of 3 \u2014 Guest details (${count} guest${count > 1 ? 's' : ''})`;\n\n for (let i = 1; i <= count; i++) {\n const card = document.createElement('div');\n card.className = 'guest-card';\n card.innerHTML = `\n <div class=\"guest-card-header\">\n <div class=\"guest-num-badge\">${i}<\/div>\n <span class=\"guest-card-title\">Guest ${i}<\/span>\n <\/div>\n <div class=\"grid3\">\n <div class=\"field\" id=\"f-g${i}-title\">\n <label>Title *<\/label>\n <select id=\"g${i}-title\">\n <option value=\"\">Select...<\/option>\n <option>Mr<\/option><option>Mrs<\/option><option>Ms<\/option><option>Dr<\/option><option>Prof<\/option>\n <\/select>\n <p class=\"error-msg\">Required.<\/p>\n <\/div>\n <div class=\"field\" id=\"f-g${i}-firstname\">\n <label>First name *<\/label>\n <input type=\"text\" id=\"g${i}-firstname\" placeholder=\"e.g. Jean\" \/>\n <p class=\"error-msg\">Required.<\/p>\n <\/div>\n <div class=\"field\" id=\"f-g${i}-lastname\">\n <label>Last name *<\/label>\n <input type=\"text\" id=\"g${i}-lastname\" placeholder=\"e.g. Dupont\" \/>\n <p class=\"error-msg\">Required.<\/p>\n <\/div>\n <\/div>\n <div class=\"grid2\">\n <div class=\"field\" id=\"f-g${i}-email\">\n <label>Email address *<\/label>\n <input type=\"email\" id=\"g${i}-email\" placeholder=\"guest@example.com\" \/>\n <p class=\"error-msg\">Valid email required.<\/p>\n <\/div>\n <div class=\"field\">\n <label>Dietary restrictions<\/label>\n <select id=\"g${i}-diet\" onchange=\"toggleDietOther(${i})\">${DIETS.map(d => `<option>${d}<\/option>`).join('')}<\/select>\n <div class=\"diet-other-wrap\" id=\"g${i}-diet-other-wrap\">\n <input type=\"text\" id=\"g${i}-diet-other\" placeholder=\"Please specify your dietary restriction...\" \/>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"grid2\">\n <div class=\"field\">\n <label>Company <span class=\"opt-tag\">(optional)<\/span><\/label>\n <input type=\"text\" id=\"g${i}-company\" placeholder=\"e.g. Acme SA\" \/>\n <\/div>\n <div class=\"field\">\n <label>Function \/ job title <span class=\"opt-tag\">(optional)<\/span><\/label>\n <input type=\"text\" id=\"g${i}-function\" placeholder=\"e.g. CEO\" \/>\n <\/div>\n <\/div>`;\n container.appendChild(card);\n }\n }\n\n function toggleDietOther(i) {\n const select = document.getElementById(`g${i}-diet`);\n const wrap = document.getElementById(`g${i}-diet-other-wrap`);\n if (select.value === 'Other') {\n wrap.classList.add('visible');\n document.getElementById(`g${i}-diet-other`).focus();\n } else {\n wrap.classList.remove('visible');\n document.getElementById(`g${i}-diet-other`).value = '';\n }\n }\n\n function validate2() {\n const count = parseInt(document.getElementById('guest-count').value);\n let ok = true;\n for (let i = 1; i <= count; i++) {\n const r = validateFields([\n { id:`g${i}-title`, fid:`f-g${i}-title`, fn: v => v !== '' },\n { id:`g${i}-firstname`, fid:`f-g${i}-firstname`, fn: v => v.trim().length > 0 },\n { id:`g${i}-lastname`, fid:`f-g${i}-lastname`, fn: v => v.trim().length > 0 },\n { id:`g${i}-email`, fid:`f-g${i}-email`, fn: v => \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(v) }\n ]);\n if (!r) ok = false;\n }\n return ok;\n }\n\n function goStep3() {\n if (!validate2()) return;\n buildSummary('summary-content');\n showStep(3);\n }\n\n function getFormData() {\n const count = parseInt(document.getElementById('guest-count').value);\n const hostFirstname = document.getElementById('buyer-firstname').value.trim();\n const hostLastname = document.getElementById('buyer-lastname').value.trim();\n const host = {\n title: document.getElementById('buyer-title').value,\n firstname: hostFirstname,\n lastname: hostLastname,\n name: `${hostFirstname} ${hostLastname}`,\n email: document.getElementById('buyer-email').value,\n count\n };\n const guests = [];\n for (let i = 1; i <= count; i++) {\n const dietSelect = document.getElementById(`g${i}-diet`).value;\n const dietOther = document.getElementById(`g${i}-diet-other`).value.trim();\n const diet = dietSelect === 'Other' ? (dietOther || 'Other') : dietSelect;\n const firstname = document.getElementById(`g${i}-firstname`).value.trim();\n const lastname = document.getElementById(`g${i}-lastname`).value.trim();\n guests.push({\n num: i,\n title: document.getElementById(`g${i}-title`).value,\n firstname,\n lastname,\n name: `${firstname} ${lastname}`,\n email: document.getElementById(`g${i}-email`).value,\n diet,\n company: document.getElementById(`g${i}-company`).value || '',\n fn: document.getElementById(`g${i}-function`).value || ''\n });\n }\n return { host, guests };\n }\n\n function buildSummary(containerId) {\n const { host, guests } = getFormData();\n let html = `\n <div class=\"summary-block\">\n <p class=\"summary-block-title\">Table host<\/p>\n <div class=\"summary-row\"><span class=\"lbl\">Title<\/span><span class=\"val\">${host.title}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">First name<\/span><span class=\"val\">${host.firstname}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Last name<\/span><span class=\"val\">${host.lastname}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Email<\/span><span class=\"val\">${host.email}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Number of guests<\/span><span class=\"val\">${host.count}<\/span><\/div>\n <\/div>`;\n guests.forEach(g => {\n html += `\n <div class=\"summary-block\">\n <p class=\"summary-block-title\">Guest ${g.num}<\/p>\n <div class=\"summary-row\"><span class=\"lbl\">Title<\/span><span class=\"val\">${g.title}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">First name<\/span><span class=\"val\">${g.firstname}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Last name<\/span><span class=\"val\">${g.lastname}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Email<\/span><span class=\"val\">${g.email}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Dietary<\/span><span class=\"val\">${g.diet}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Company<\/span><span class=\"val\">${g.company || '\u2014'}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Function<\/span><span class=\"val\">${g.fn || '\u2014'}<\/span><\/div>\n <\/div>`;\n });\n document.getElementById(containerId).innerHTML = html;\n }\n\n function validateGdpr() {\n const cb = document.getElementById('gdpr-consent');\n const err = document.getElementById('gdpr-error');\n if (!cb.checked) {\n err.style.display = 'block';\n document.getElementById('gdpr-block').scrollIntoView({ behavior: 'smooth', block: 'center' });\n return false;\n }\n err.style.display = 'none';\n return true;\n }\n\n async function submitForm() {\n if (!validateGdpr()) return;\n\n const btn = document.getElementById('confirm-btn');\n const status = document.getElementById('status-msg');\n\n btn.disabled = true;\n btn.innerHTML = '<span class=\"spinner\"><\/span> Sending...';\n status.textContent = 'Saving your registration\u2026';\n status.classList.remove('status-err');\n\n const { host, guests } = getFormData();\n\n const payload = {\n event: EVENT_NAME,\n eventDate: EVENT_DATE,\n eventVenue: EVENT_VENUE,\n submittedAt: new Date().toISOString(),\n adminEmail: ADMIN_EMAIL,\n gdprConsent: true,\n host,\n guests,\n rows: guests.map(g => ({\n submittedAt: new Date().toLocaleDateString('fr-BE'),\n hostTitle: host.title,\n hostFirstname: host.firstname,\n hostLastname: host.lastname,\n hostName: host.name,\n hostEmail: host.email,\n totalGuests: host.count,\n guestNum: g.num,\n guestTitle: g.title,\n guestFirstname: g.firstname,\n guestLastname: g.lastname,\n guestName: g.name,\n guestEmail: g.email,\n dietary: g.diet,\n company: g.company || '',\n jobTitle: g.fn || '',\n gdprConsent: 'Yes'\n }))\n };\n\n try {\n const response = await fetch(N8N_WEBHOOK_URL, {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify(payload)\n });\n\n if (!response.ok) {\n throw new Error(`Server responded with status ${response.status}`);\n }\n\n const summaryWrap = document.getElementById('done-summary');\n const { host: h, guests: gs } = getFormData();\n let doneHtml = '<p class=\"summary-header\">Your guest list<\/p>';\n doneHtml += `<div class=\"summary-block\"><p class=\"summary-block-title\">Table host<\/p>\n <div class=\"summary-row\"><span class=\"lbl\">Title<\/span><span class=\"val\">${h.title}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">First name<\/span><span class=\"val\">${h.firstname}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Last name<\/span><span class=\"val\">${h.lastname}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Email<\/span><span class=\"val\">${h.email}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Guests<\/span><span class=\"val\">${h.count}<\/span><\/div><\/div>`;\n gs.forEach(g => {\n doneHtml += `<div class=\"summary-block\"><p class=\"summary-block-title\">Guest ${g.num}<\/p>\n <div class=\"summary-row\"><span class=\"lbl\">Title<\/span><span class=\"val\">${g.title}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">First name<\/span><span class=\"val\">${g.firstname}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Last name<\/span><span class=\"val\">${g.lastname}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Email<\/span><span class=\"val\">${g.email}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Dietary<\/span><span class=\"val\">${g.diet}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Company<\/span><span class=\"val\">${g.company||'\u2014'}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Function<\/span><span class=\"val\">${g.fn||'\u2014'}<\/span><\/div><\/div>`;\n });\n summaryWrap.innerHTML = doneHtml;\n\n status.textContent = '';\n showStep(4);\n\n } catch (err) {\n status.textContent = 'Something went wrong. Please try again or contact the organiser.';\n status.classList.add('status-err');\n btn.disabled = false;\n btn.innerHTML = '✓ Confirm & send';\n }\n }\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>2026 UFB Gala Dinner \u2014 Table Registration Table registration 2026 UFB Gala Dinner Thursday, 11 June 2026 The Merode, Brussels Please fill in your details and those of your guests.Fields marked * are required \u2014 all others are optional. 1Your details 2Guest list 3Confirm Step 1 of 3 \u2014 Your details Title * Select…MrMrsMsDrProf Please […]<\/p>\n","protected":false},"author":27,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-58701","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"\n<title>Gala Dinner Registration - UFB<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ufb.be\/en\/gala-dinner-registration\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gala Dinner Registration - UFB\" \/>\n<meta property=\"og:description\" content=\"2026 UFB Gala Dinner \u2014 Table Registration Table registration 2026 UFB Gala Dinner Thursday, 11 June 2026 The Merode, Brussels Please fill in your details and those of your guests.Fields marked * are required \u2014 all others are optional. 1Your details 2Guest list 3Confirm Step 1 of 3 \u2014 Your details Title * Select…MrMrsMsDrProf Please […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ufb.be\/en\/gala-dinner-registration\/\" \/>\n<meta property=\"og:site_name\" content=\"UFB\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-19T14:29:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ufb.be\/wp-content\/uploads\/2025\/07\/Logo-UFB-RS.png\" \/>\n\t<meta property=\"og:image:width\" content=\"200\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ufb.be\\\/en\\\/gala-dinner-registration\\\/\",\"url\":\"https:\\\/\\\/ufb.be\\\/en\\\/gala-dinner-registration\\\/\",\"name\":\"Gala Dinner Registration - UFB\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ufb.be\\\/en\\\/#website\"},\"datePublished\":\"2026-05-19T12:07:36+00:00\",\"dateModified\":\"2026-05-19T14:29:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ufb.be\\\/en\\\/gala-dinner-registration\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ufb.be\\\/en\\\/gala-dinner-registration\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ufb.be\\\/en\\\/gala-dinner-registration\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/ufb.be\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Gala Dinner Registration\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ufb.be\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/ufb.be\\\/en\\\/\",\"name\":\"United Fund for Belgium\",\"description\":\"Combattons l\u2019exclusion pour plus d\u2019int\u00e9gration sociale\",\"publisher\":{\"@id\":\"https:\\\/\\\/ufb.be\\\/en\\\/#organization\"},\"alternateName\":\"UFB\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ufb.be\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/ufb.be\\\/en\\\/#organization\",\"name\":\"United Fund for Belgium\",\"alternateName\":\"UFB\",\"url\":\"https:\\\/\\\/ufb.be\\\/en\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ufb.be\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/ufb.be\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/Logo-UFB-RS.png\",\"contentUrl\":\"https:\\\/\\\/ufb.be\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/Logo-UFB-RS.png\",\"width\":200,\"height\":200,\"caption\":\"United Fund for Belgium\"},\"image\":{\"@id\":\"https:\\\/\\\/ufb.be\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Gala Dinner Registration - UFB","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:\/\/ufb.be\/en\/gala-dinner-registration\/","og_locale":"en_US","og_type":"article","og_title":"Gala Dinner Registration - UFB","og_description":"2026 UFB Gala Dinner \u2014 Table Registration Table registration 2026 UFB Gala Dinner Thursday, 11 June 2026 The Merode, Brussels Please fill in your details and those of your guests.Fields marked * are required \u2014 all others are optional. 1Your details 2Guest list 3Confirm Step 1 of 3 \u2014 Your details Title * Select…MrMrsMsDrProf Please […]","og_url":"https:\/\/ufb.be\/en\/gala-dinner-registration\/","og_site_name":"UFB","article_modified_time":"2026-05-19T14:29:05+00:00","og_image":[{"width":200,"height":200,"url":"https:\/\/ufb.be\/wp-content\/uploads\/2025\/07\/Logo-UFB-RS.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/ufb.be\/en\/gala-dinner-registration\/","url":"https:\/\/ufb.be\/en\/gala-dinner-registration\/","name":"Gala Dinner Registration - UFB","isPartOf":{"@id":"https:\/\/ufb.be\/en\/#website"},"datePublished":"2026-05-19T12:07:36+00:00","dateModified":"2026-05-19T14:29:05+00:00","breadcrumb":{"@id":"https:\/\/ufb.be\/en\/gala-dinner-registration\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ufb.be\/en\/gala-dinner-registration\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ufb.be\/en\/gala-dinner-registration\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/ufb.be\/en\/"},{"@type":"ListItem","position":2,"name":"Gala Dinner Registration"}]},{"@type":"WebSite","@id":"https:\/\/ufb.be\/en\/#website","url":"https:\/\/ufb.be\/en\/","name":"United Fund for Belgium","description":"Combattons l\u2019exclusion pour plus d\u2019int\u00e9gration sociale","publisher":{"@id":"https:\/\/ufb.be\/en\/#organization"},"alternateName":"UFB","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ufb.be\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ufb.be\/en\/#organization","name":"United Fund for Belgium","alternateName":"UFB","url":"https:\/\/ufb.be\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ufb.be\/en\/#\/schema\/logo\/image\/","url":"https:\/\/ufb.be\/wp-content\/uploads\/2025\/07\/Logo-UFB-RS.png","contentUrl":"https:\/\/ufb.be\/wp-content\/uploads\/2025\/07\/Logo-UFB-RS.png","width":200,"height":200,"caption":"United Fund for Belgium"},"image":{"@id":"https:\/\/ufb.be\/en\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/ufb.be\/en\/wp-json\/wp\/v2\/pages\/58701","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ufb.be\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ufb.be\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ufb.be\/en\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/ufb.be\/en\/wp-json\/wp\/v2\/comments?post=58701"}],"version-history":[{"count":16,"href":"https:\/\/ufb.be\/en\/wp-json\/wp\/v2\/pages\/58701\/revisions"}],"predecessor-version":[{"id":58720,"href":"https:\/\/ufb.be\/en\/wp-json\/wp\/v2\/pages\/58701\/revisions\/58720"}],"wp:attachment":[{"href":"https:\/\/ufb.be\/en\/wp-json\/wp\/v2\/media?parent=58701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n 2026 UFB Gala Dinner \u2014 Table Registration<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap\" rel=\"stylesheet\" \/>\n <style>\n :root {\n --red: #b70b1f;\n --red-dark: #8f091a;\n --red-pale: #fdf0f1;\n --red-light: #f5c6cb;\n --grey: #717171;\n --grey-light: #e8e8e8;\n --grey-pale: #f6f6f6;\n --dark: #1a1a1a;\n --mid: #3d3d3d;\n --muted: #717171;\n --border: #d8d8d8;\n --border-light: #eeeeee;\n --bg: #fafafa;\n --white: #ffffff;\n --success: #3A6B45;\n --success-bg: #EBF3ED;\n --danger: #b70b1f;\n --danger-bg: #fdf0f1;\n --radius: 10px;\n --radius-sm: 6px;\n }\n\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n body {\n font-family: 'DM Sans', sans-serif;\n background: var(--bg);\n color: var(--dark);\n min-height: 100vh;\n padding: 48px 16px 80px;\n }\n\n .page-wrap { max-width: 640px; margin: 0 auto; }\n\n \/* \u2500\u2500 Header \u2500\u2500 *\/\n .form-header {\n text-align: center;\n margin-bottom: 40px;\n padding-bottom: 36px;\n border-bottom: 2px solid var(--red);\n }\n\n .form-header .eyebrow {\n font-size: 11px; font-weight: 500;\n letter-spacing: 0.2em; text-transform: uppercase;\n color: var(--grey); margin-bottom: 14px;\n }\n\n .form-header h1 {\n font-family: 'Cormorant Garamond', serif;\n font-size: 38px; font-weight: 400;\n color: var(--dark); line-height: 1.15; margin-bottom: 16px;\n }\n\n .event-meta {\n display: inline-flex; flex-wrap: wrap;\n justify-content: center; gap: 20px; margin-bottom: 16px;\n }\n\n .event-meta-item {\n display: flex; align-items: center; gap: 7px;\n font-size: 13px; color: var(--grey);\n }\n\n .event-meta-item .icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--red); opacity: 0.8; }\n\n .form-header p { font-size: 13px; color: var(--muted); line-height: 1.65; margin-top: 12px; }\n\n .red-rule { width: 40px; height: 2px; background: var(--red); margin: 18px auto; }\n\n \/* \u2500\u2500 Progress \u2500\u2500 *\/\n .progress-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 36px; }\n\n .progress-step { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; }\n .progress-step.active { color: var(--dark); font-weight: 500; }\n .progress-step.done { color: var(--red); }\n\n .step-dot {\n width: 24px; height: 24px; border-radius: 50%;\n border: 1.5px solid var(--border);\n display: flex; align-items: center; justify-content: center;\n font-size: 11px; font-weight: 500; color: var(--muted);\n flex-shrink: 0; transition: all 0.2s;\n }\n\n .progress-step.active .step-dot { border-color: var(--red); background: var(--red); color: var(--white); }\n .progress-step.done .step-dot { border-color: var(--red); background: var(--red); color: var(--white); }\n .progress-line { flex: 1; height: 1px; background: var(--border-light); }\n\n \/* \u2500\u2500 Steps \u2500\u2500 *\/\n .step { display: none; animation: fadeIn 0.25s ease; }\n .step.active { display: block; }\n @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }\n\n .section-label {\n font-size: 10px; font-weight: 500;\n letter-spacing: 0.14em; text-transform: uppercase;\n color: var(--grey); margin-bottom: 20px;\n }\n\n \/* \u2500\u2500 Fields \u2500\u2500 *\/\n .field { margin-bottom: 18px; }\n\n .field label {\n display: block; font-size: 12px; font-weight: 500;\n color: var(--mid); margin-bottom: 7px; letter-spacing: 0.02em;\n }\n\n .field input,\n .field select {\n width: 100%; height: 46px; padding: 0 14px;\n border: 1px solid var(--border); border-radius: var(--radius-sm);\n background: var(--white);\n font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--dark);\n outline: none; transition: border-color 0.15s;\n appearance: none; -webkit-appearance: none;\n }\n\n .field select {\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23717171' d='M6 8L1 3h10z'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 14px center;\n padding-right: 36px;\n }\n\n .field input:focus, .field select:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(183,11,31,0.08); }\n .field.has-error input, .field.has-error select { border-color: var(--danger); }\n\n .error-msg { font-size: 11px; color: var(--danger); margin-top: 5px; display: none; }\n .field.has-error .error-msg { display: block; }\n\n .opt-tag { font-size: 10px; color: var(--grey); font-weight: 400; margin-left: 4px; }\n\n .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }\n .grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }\n @media (max-width: 500px) { .grid2, .grid3 { grid-template-columns: 1fr; } }\n\n \/* \u2500\u2500 Diet other field \u2500\u2500 *\/\n .diet-other-wrap {\n margin-top: 8px;\n display: none;\n }\n .diet-other-wrap.visible { display: block; }\n .diet-other-wrap input { border-style: dashed; }\n\n \/* \u2500\u2500 Guest cards \u2500\u2500 *\/\n .guest-card {\n background: var(--white);\n border: 1px solid var(--border-light);\n border-radius: var(--radius);\n padding: 20px 20px 20px 26px;\n margin-bottom: 16px; position: relative;\n }\n\n .guest-card::before {\n content: ''; position: absolute; top: 0; left: 0;\n width: 4px; height: 100%;\n background: var(--red);\n border-radius: var(--radius) 0 0 var(--radius);\n }\n\n .guest-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }\n\n .guest-num-badge {\n width: 28px; height: 28px; border-radius: 50%;\n background: var(--red-pale); border: 1px solid var(--red-light);\n color: var(--red); font-size: 11px; font-weight: 500;\n display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n }\n\n .guest-card-title { font-size: 13px; font-weight: 500; color: var(--mid); }\n\n \/* \u2500\u2500 GDPR \u2500\u2500 *\/\n .gdpr-block {\n background: var(--white); border: 1px solid var(--border-light);\n border-radius: var(--radius); padding: 18px 20px; margin-bottom: 24px;\n }\n\n .gdpr-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }\n\n .gdpr-check input[type=\"checkbox\"] {\n width: 18px; height: 18px; margin-top: 2px;\n accent-color: var(--red); flex-shrink: 0; cursor: pointer;\n }\n\n .gdpr-check span { font-size: 12px; color: var(--mid); line-height: 1.65; }\n .gdpr-check span a { color: var(--red); text-decoration: underline; }\n .gdpr-error { font-size: 11px; color: var(--danger); margin-top: 8px; display: none; }\n\n \/* \u2500\u2500 Buttons \u2500\u2500 *\/\n .btn-row { display: flex; justify-content: flex-end; gap: 10px; margin-top: 28px; flex-wrap: wrap; }\n\n .btn {\n height: 44px; padding: 0 24px; border-radius: var(--radius-sm);\n font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;\n cursor: pointer; transition: all 0.15s;\n display: inline-flex; align-items: center; gap: 8px;\n border: none; outline: none;\n }\n\n .btn-primary { background: var(--dark); color: var(--white); }\n .btn-primary:hover { background: var(--mid); }\n\n .btn-secondary { background: transparent; color: var(--grey); border: 1px solid var(--border); }\n .btn-secondary:hover { background: var(--grey-pale); border-color: var(--grey-light); }\n\n .btn-red { background: var(--red); color: var(--white); }\n .btn-red:hover { background: var(--red-dark); }\n\n .btn:disabled { opacity: 0.5; cursor: not-allowed; }\n\n \/* \u2500\u2500 Notice \u2500\u2500 *\/\n .notice {\n background: var(--red-pale); border: 1px solid var(--red-light);\n border-radius: var(--radius-sm); padding: 12px 16px;\n font-size: 13px; color: var(--mid); margin-bottom: 24px;\n display: flex; align-items: flex-start; gap: 10px; line-height: 1.55;\n }\n\n .notice-icon { color: var(--red); font-size: 16px; flex-shrink: 0; margin-top: 1px; }\n\n \/* \u2500\u2500 Summary \u2500\u2500 *\/\n .summary-block {\n background: var(--white); border: 1px solid var(--border-light);\n border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px;\n }\n\n .summary-block-title {\n font-size: 10px; font-weight: 500;\n text-transform: uppercase; letter-spacing: 0.12em;\n color: var(--grey); margin-bottom: 12px;\n }\n\n .summary-row {\n display: flex; justify-content: space-between; align-items: baseline;\n font-size: 13px; padding: 6px 0;\n border-bottom: 1px solid var(--border-light); gap: 16px;\n }\n\n .summary-row:last-child { border-bottom: none; }\n .summary-row .lbl { color: var(--grey); flex-shrink: 0; }\n .summary-row .val { font-weight: 500; color: var(--dark); text-align: right; word-break: break-word; }\n\n \/* \u2500\u2500 Status \u2500\u2500 *\/\n .status-msg { font-size: 12px; color: var(--grey); text-align: center; margin-top: 12px; min-height: 18px; }\n .status-err { color: var(--danger) !important; }\n\n .spinner {\n width: 14px; height: 14px;\n border: 2px solid rgba(255,255,255,0.35);\n border-top-color: #fff; border-radius: 50%;\n animation: spin 0.6s linear infinite; display: inline-block;\n }\n @keyframes spin { to { transform: rotate(360deg); } }\n\n \/* \u2500\u2500 Success \u2500\u2500 *\/\n .success-screen { text-align: center; padding: 52px 0 36px; }\n\n .success-icon-wrap {\n width: 64px; height: 64px; border-radius: 50%;\n background: var(--success-bg); color: var(--success);\n display: flex; align-items: center; justify-content: center;\n margin: 0 auto 20px; font-size: 28px;\n }\n\n .success-screen h2 {\n font-family: 'Cormorant Garamond', serif;\n font-size: 30px; font-weight: 400; color: var(--dark); margin-bottom: 16px;\n }\n\n .success-screen .confirm-msg {\n font-size: 15px; color: var(--mid); line-height: 1.75;\n max-width: 460px; margin: 0 auto 24px;\n }\n\n .divider { border: none; border-top: 1px solid var(--border-light); margin: 28px 0; }\n\n .summary-header {\n font-size: 11px; font-weight: 500;\n text-transform: uppercase; letter-spacing: 0.12em;\n color: var(--grey); margin-bottom: 16px; text-align: left;\n }\n\n @media print {\n body { padding: 0; background: white; }\n .btn-row, .progress-wrap, .form-header, .notice, .gdpr-block { display: none !important; }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"page-wrap\">\n\n \n <div class=\"form-header\">\n <p class=\"eyebrow\">Table registration<\/p>\n <h1>2026 UFB Gala Dinner<\/h1>\n <div class=\"event-meta\">\n <div class=\"event-meta-item\">\n <svg class=\"icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"\/><path d=\"M16 2v4M8 2v4M3 10h18\"\/>\n <\/svg>\n Thursday, 11 June 2026\n <\/div>\n <div class=\"event-meta-item\">\n <svg class=\"icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n <path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z\"\/><circle cx=\"12\" cy=\"9\" r=\"2.5\"\/>\n <\/svg>\n The Merode, Brussels\n <\/div>\n <\/div>\n <div class=\"red-rule\"><\/div>\n <p>Please fill in your details and those of your guests.<br>Fields marked * are required \u2014 all others are optional.<\/p>\n <\/div>\n\n \n <div class=\"progress-wrap\">\n <div class=\"progress-step active\" id=\"ps1\"><div class=\"step-dot\">1<\/div><span>Your details<\/span><\/div>\n <div class=\"progress-line\"><\/div>\n <div class=\"progress-step\" id=\"ps2\"><div class=\"step-dot\">2<\/div><span>Guest list<\/span><\/div>\n <div class=\"progress-line\"><\/div>\n <div class=\"progress-step\" id=\"ps3\"><div class=\"step-dot\">3<\/div><span>Confirm<\/span><\/div>\n <\/div>\n\n \n <div class=\"step active\" id=\"step1\">\n <p class=\"section-label\">Step 1 of 3 \u2014 Your details<\/p>\n <div class=\"grid3\">\n <div class=\"field\" id=\"f-buyer-title\">\n <label>Title *<\/label>\n <select id=\"buyer-title\">\n <option value=\"\">Select...<\/option>\n <option>Mr<\/option><option>Mrs<\/option><option>Ms<\/option><option>Dr<\/option><option>Prof<\/option>\n <\/select>\n <p class=\"error-msg\">Please select a title.<\/p>\n <\/div>\n <div class=\"field\" id=\"f-buyer-firstname\">\n <label>First name *<\/label>\n <input type=\"text\" id=\"buyer-firstname\" placeholder=\"e.g. Sophie\" autocomplete=\"given-name\" \/>\n <p class=\"error-msg\">Please enter your first name.<\/p>\n <\/div>\n <div class=\"field\" id=\"f-buyer-lastname\">\n <label>Last name *<\/label>\n <input type=\"text\" id=\"buyer-lastname\" placeholder=\"e.g. Martin\" autocomplete=\"family-name\" \/>\n <p class=\"error-msg\">Please enter your last name.<\/p>\n <\/div>\n <\/div>\n <div class=\"field\" id=\"f-buyer-email\">\n <label>Email address *<\/label>\n <input type=\"email\" id=\"buyer-email\" placeholder=\"you@example.com\" autocomplete=\"email\" \/>\n <p class=\"error-msg\">Please enter a valid email address.<\/p>\n <\/div>\n <div class=\"field\" id=\"f-guest-count\">\n <label>Number of guests at your table *<\/label>\n <select id=\"guest-count\">\n <option value=\"\">Select number of guests...<\/option>\n <option>1<\/option><option>2<\/option><option>3<\/option><option>4<\/option><option>5<\/option>\n <option>6<\/option><option>7<\/option><option>8<\/option><option>9<\/option><option>10<\/option>\n <\/select>\n <p class=\"error-msg\">Please select the number of guests.<\/p>\n <\/div>\n <div class=\"btn-row\">\n <button class=\"btn btn-red\" onclick=\"goStep2()\">Continue →<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"step\" id=\"step2\">\n <p class=\"section-label\" id=\"step2-label\">Step 2 of 3 \u2014 Guest details<\/p>\n <div id=\"guest-fields\"><\/div>\n <div class=\"btn-row\">\n <button class=\"btn btn-secondary\" onclick=\"showStep(1)\">← Back<\/button>\n <button class=\"btn btn-red\" onclick=\"goStep3()\">Review summary →<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"step\" id=\"step3\">\n <p class=\"section-label\">Step 3 of 3 \u2014 Review & confirm<\/p>\n <div class=\"notice\">\n <span class=\"notice-icon\">ⓘ<\/span>\n <span>Please review your guest list carefully before confirming. Once submitted, your registration will be saved and the event administrator will be notified.<\/span>\n <\/div>\n <div id=\"summary-content\"><\/div>\n\n <div class=\"gdpr-block\" id=\"gdpr-block\">\n <label class=\"gdpr-check\" for=\"gdpr-consent\">\n <input type=\"checkbox\" id=\"gdpr-consent\" \/>\n <span>\n I confirm that I have obtained the consent of all guests listed above to share their personal data (name, email address, dietary requirements, company and job title) with UFB for the purposes of organising the 2026 Gala Dinner. This data will be used solely for event management and will not be shared with third parties. For more information, please refer to our <a href=\"#\" target=\"_blank\">Privacy Policy<\/a>.\n <\/span>\n <\/label>\n <p class=\"gdpr-error\" id=\"gdpr-error\">You must accept the terms to proceed.<\/p>\n <\/div>\n\n <div class=\"btn-row\">\n <button class=\"btn btn-secondary\" onclick=\"showStep(2)\">← Edit guests<\/button>\n <button class=\"btn btn-red\" id=\"confirm-btn\" onclick=\"submitForm()\">✓ Confirm & send<\/button>\n <\/div>\n <p class=\"status-msg\" id=\"status-msg\"><\/p>\n <\/div>\n\n \n <div class=\"step\" id=\"step4\">\n <div class=\"success-screen\">\n <div class=\"success-icon-wrap\">✓<\/div>\n <h2>Registration confirmed<\/h2>\n <p class=\"confirm-msg\">\n Thank you, your table registration for the 2026 UFB Gala Dinner has been received.\n We look forward to seeing you on 11 June at our Gala Dinner.\n <\/p>\n <div class=\"red-rule\"><\/div>\n <div id=\"done-summary\" style=\"text-align:left;\"><\/div>\n <div class=\"btn-row\" style=\"justify-content:center;margin-top:24px;\">\n <button class=\"btn btn-secondary\" onclick=\"window.print()\">🖶 Print confirmation<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n<\/div>\n\n<script>\n \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \/\/ CONFIGURATION\n \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n const N8N_WEBHOOK_URL = 'https:\/\/n8n.antidote-digital.com\/webhook\/ae829762-824c-42e5-90a2-791455df6ece';\n const EVENT_NAME = '2026 UFB Gala Dinner';\n const EVENT_DATE = 'Thursday, 11 June 2026';\n const EVENT_VENUE = 'The Merode, Brussels';\n const ADMIN_EMAIL = 'noemie@antidote-digital.com';\n \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n const DIETS = [\"None\",\"Vegetarian\",\"Vegan\",\"Gluten-free\",\"Halal\",\"Kosher\",\"Nut allergy\",\"Dairy-free\",\"Other\"];\n\n function showStep(n) {\n document.querySelectorAll('.step').forEach(s => s.classList.remove('active'));\n document.getElementById('step' + n).classList.add('active');\n [1,2,3].forEach(i => {\n const ps = document.getElementById('ps' + i);\n ps.classList.remove('active','done');\n if (i < n) ps.classList.add('done');\n else if (i === n) ps.classList.add('active');\n });\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n\n function validateFields(checks) {\n let ok = true;\n checks.forEach(c => {\n const el = document.getElementById(c.id);\n const fEl = document.getElementById(c.fid);\n const errEl = fEl && fEl.querySelector('.error-msg');\n if (!c.fn(el.value)) {\n fEl && fEl.classList.add('has-error');\n errEl && (errEl.style.display = 'block');\n ok = false;\n } else {\n fEl && fEl.classList.remove('has-error');\n errEl && (errEl.style.display = 'none');\n }\n });\n return ok;\n }\n\n function validate1() {\n return validateFields([\n { id:'buyer-title', fid:'f-buyer-title', fn: v => v !== '' },\n { id:'buyer-firstname', fid:'f-buyer-firstname', fn: v => v.trim().length > 0 },\n { id:'buyer-lastname', fid:'f-buyer-lastname', fn: v => v.trim().length > 0 },\n { id:'buyer-email', fid:'f-buyer-email', fn: v => \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(v) },\n { id:'guest-count', fid:'f-guest-count', fn: v => v !== '' }\n ]);\n }\n\n function goStep2() {\n if (!validate1()) return;\n buildGuestFields(parseInt(document.getElementById('guest-count').value));\n showStep(2);\n }\n\n function buildGuestFields(count) {\n const container = document.getElementById('guest-fields');\n container.innerHTML = '';\n document.getElementById('step2-label').textContent =\n `Step 2 of 3 \u2014 Guest details (${count} guest${count > 1 ? 's' : ''})`;\n\n for (let i = 1; i <= count; i++) {\n const card = document.createElement('div');\n card.className = 'guest-card';\n card.innerHTML = `\n <div class=\"guest-card-header\">\n <div class=\"guest-num-badge\">${i}<\/div>\n <span class=\"guest-card-title\">Guest ${i}<\/span>\n <\/div>\n <div class=\"grid3\">\n <div class=\"field\" id=\"f-g${i}-title\">\n <label>Title *<\/label>\n <select id=\"g${i}-title\">\n <option value=\"\">Select...<\/option>\n <option>Mr<\/option><option>Mrs<\/option><option>Ms<\/option><option>Dr<\/option><option>Prof<\/option>\n <\/select>\n <p class=\"error-msg\">Required.<\/p>\n <\/div>\n <div class=\"field\" id=\"f-g${i}-firstname\">\n <label>First name *<\/label>\n <input type=\"text\" id=\"g${i}-firstname\" placeholder=\"e.g. Jean\" \/>\n <p class=\"error-msg\">Required.<\/p>\n <\/div>\n <div class=\"field\" id=\"f-g${i}-lastname\">\n <label>Last name *<\/label>\n <input type=\"text\" id=\"g${i}-lastname\" placeholder=\"e.g. Dupont\" \/>\n <p class=\"error-msg\">Required.<\/p>\n <\/div>\n <\/div>\n <div class=\"grid2\">\n <div class=\"field\" id=\"f-g${i}-email\">\n <label>Email address *<\/label>\n <input type=\"email\" id=\"g${i}-email\" placeholder=\"guest@example.com\" \/>\n <p class=\"error-msg\">Valid email required.<\/p>\n <\/div>\n <div class=\"field\">\n <label>Dietary restrictions<\/label>\n <select id=\"g${i}-diet\" onchange=\"toggleDietOther(${i})\">${DIETS.map(d => `<option>${d}<\/option>`).join('')}<\/select>\n <div class=\"diet-other-wrap\" id=\"g${i}-diet-other-wrap\">\n <input type=\"text\" id=\"g${i}-diet-other\" placeholder=\"Please specify your dietary restriction...\" \/>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"grid2\">\n <div class=\"field\">\n <label>Company <span class=\"opt-tag\">(optional)<\/span><\/label>\n <input type=\"text\" id=\"g${i}-company\" placeholder=\"e.g. Acme SA\" \/>\n <\/div>\n <div class=\"field\">\n <label>Function \/ job title <span class=\"opt-tag\">(optional)<\/span><\/label>\n <input type=\"text\" id=\"g${i}-function\" placeholder=\"e.g. CEO\" \/>\n <\/div>\n <\/div>`;\n container.appendChild(card);\n }\n }\n\n function toggleDietOther(i) {\n const select = document.getElementById(`g${i}-diet`);\n const wrap = document.getElementById(`g${i}-diet-other-wrap`);\n if (select.value === 'Other') {\n wrap.classList.add('visible');\n document.getElementById(`g${i}-diet-other`).focus();\n } else {\n wrap.classList.remove('visible');\n document.getElementById(`g${i}-diet-other`).value = '';\n }\n }\n\n function validate2() {\n const count = parseInt(document.getElementById('guest-count').value);\n let ok = true;\n for (let i = 1; i <= count; i++) {\n const r = validateFields([\n { id:`g${i}-title`, fid:`f-g${i}-title`, fn: v => v !== '' },\n { id:`g${i}-firstname`, fid:`f-g${i}-firstname`, fn: v => v.trim().length > 0 },\n { id:`g${i}-lastname`, fid:`f-g${i}-lastname`, fn: v => v.trim().length > 0 },\n { id:`g${i}-email`, fid:`f-g${i}-email`, fn: v => \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(v) }\n ]);\n if (!r) ok = false;\n }\n return ok;\n }\n\n function goStep3() {\n if (!validate2()) return;\n buildSummary('summary-content');\n showStep(3);\n }\n\n function getFormData() {\n const count = parseInt(document.getElementById('guest-count').value);\n const hostFirstname = document.getElementById('buyer-firstname').value.trim();\n const hostLastname = document.getElementById('buyer-lastname').value.trim();\n const host = {\n title: document.getElementById('buyer-title').value,\n firstname: hostFirstname,\n lastname: hostLastname,\n name: `${hostFirstname} ${hostLastname}`,\n email: document.getElementById('buyer-email').value,\n count\n };\n const guests = [];\n for (let i = 1; i <= count; i++) {\n const dietSelect = document.getElementById(`g${i}-diet`).value;\n const dietOther = document.getElementById(`g${i}-diet-other`).value.trim();\n const diet = dietSelect === 'Other' ? (dietOther || 'Other') : dietSelect;\n const firstname = document.getElementById(`g${i}-firstname`).value.trim();\n const lastname = document.getElementById(`g${i}-lastname`).value.trim();\n guests.push({\n num: i,\n title: document.getElementById(`g${i}-title`).value,\n firstname,\n lastname,\n name: `${firstname} ${lastname}`,\n email: document.getElementById(`g${i}-email`).value,\n diet,\n company: document.getElementById(`g${i}-company`).value || '',\n fn: document.getElementById(`g${i}-function`).value || ''\n });\n }\n return { host, guests };\n }\n\n function buildSummary(containerId) {\n const { host, guests } = getFormData();\n let html = `\n <div class=\"summary-block\">\n <p class=\"summary-block-title\">Table host<\/p>\n <div class=\"summary-row\"><span class=\"lbl\">Title<\/span><span class=\"val\">${host.title}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">First name<\/span><span class=\"val\">${host.firstname}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Last name<\/span><span class=\"val\">${host.lastname}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Email<\/span><span class=\"val\">${host.email}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Number of guests<\/span><span class=\"val\">${host.count}<\/span><\/div>\n <\/div>`;\n guests.forEach(g => {\n html += `\n <div class=\"summary-block\">\n <p class=\"summary-block-title\">Guest ${g.num}<\/p>\n <div class=\"summary-row\"><span class=\"lbl\">Title<\/span><span class=\"val\">${g.title}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">First name<\/span><span class=\"val\">${g.firstname}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Last name<\/span><span class=\"val\">${g.lastname}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Email<\/span><span class=\"val\">${g.email}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Dietary<\/span><span class=\"val\">${g.diet}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Company<\/span><span class=\"val\">${g.company || '\u2014'}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Function<\/span><span class=\"val\">${g.fn || '\u2014'}<\/span><\/div>\n <\/div>`;\n });\n document.getElementById(containerId).innerHTML = html;\n }\n\n function validateGdpr() {\n const cb = document.getElementById('gdpr-consent');\n const err = document.getElementById('gdpr-error');\n if (!cb.checked) {\n err.style.display = 'block';\n document.getElementById('gdpr-block').scrollIntoView({ behavior: 'smooth', block: 'center' });\n return false;\n }\n err.style.display = 'none';\n return true;\n }\n\n async function submitForm() {\n if (!validateGdpr()) return;\n\n const btn = document.getElementById('confirm-btn');\n const status = document.getElementById('status-msg');\n\n btn.disabled = true;\n btn.innerHTML = '<span class=\"spinner\"><\/span> Sending...';\n status.textContent = 'Saving your registration\u2026';\n status.classList.remove('status-err');\n\n const { host, guests } = getFormData();\n\n const payload = {\n event: EVENT_NAME,\n eventDate: EVENT_DATE,\n eventVenue: EVENT_VENUE,\n submittedAt: new Date().toISOString(),\n adminEmail: ADMIN_EMAIL,\n gdprConsent: true,\n host,\n guests,\n rows: guests.map(g => ({\n submittedAt: new Date().toLocaleDateString('fr-BE'),\n hostTitle: host.title,\n hostFirstname: host.firstname,\n hostLastname: host.lastname,\n hostName: host.name,\n hostEmail: host.email,\n totalGuests: host.count,\n guestNum: g.num,\n guestTitle: g.title,\n guestFirstname: g.firstname,\n guestLastname: g.lastname,\n guestName: g.name,\n guestEmail: g.email,\n dietary: g.diet,\n company: g.company || '',\n jobTitle: g.fn || '',\n gdprConsent: 'Yes'\n }))\n };\n\n try {\n const response = await fetch(N8N_WEBHOOK_URL, {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify(payload)\n });\n\n if (!response.ok) {\n throw new Error(`Server responded with status ${response.status}`);\n }\n\n const summaryWrap = document.getElementById('done-summary');\n const { host: h, guests: gs } = getFormData();\n let doneHtml = '<p class=\"summary-header\">Your guest list<\/p>';\n doneHtml += `<div class=\"summary-block\"><p class=\"summary-block-title\">Table host<\/p>\n <div class=\"summary-row\"><span class=\"lbl\">Title<\/span><span class=\"val\">${h.title}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">First name<\/span><span class=\"val\">${h.firstname}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Last name<\/span><span class=\"val\">${h.lastname}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Email<\/span><span class=\"val\">${h.email}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Guests<\/span><span class=\"val\">${h.count}<\/span><\/div><\/div>`;\n gs.forEach(g => {\n doneHtml += `<div class=\"summary-block\"><p class=\"summary-block-title\">Guest ${g.num}<\/p>\n <div class=\"summary-row\"><span class=\"lbl\">Title<\/span><span class=\"val\">${g.title}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">First name<\/span><span class=\"val\">${g.firstname}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Last name<\/span><span class=\"val\">${g.lastname}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Email<\/span><span class=\"val\">${g.email}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Dietary<\/span><span class=\"val\">${g.diet}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Company<\/span><span class=\"val\">${g.company||'\u2014'}<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Function<\/span><span class=\"val\">${g.fn||'\u2014'}<\/span><\/div><\/div>`;\n });\n summaryWrap.innerHTML = doneHtml;\n\n status.textContent = '';\n showStep(4);\n\n } catch (err) {\n status.textContent = 'Something went wrong. Please try again or contact the organiser.';\n status.classList.add('status-err');\n btn.disabled = false;\n btn.innerHTML = '✓ Confirm & send';\n }\n }\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>2026 UFB Gala Dinner \u2014 Table Registration Table registration 2026 UFB Gala Dinner Thursday, 11 June 2026 The Merode, Brussels Please fill in your details and those of your guests.Fields marked * are required \u2014 all others are optional. 1Your details 2Guest list 3Confirm Step 1 of 3 \u2014 Your details Title * Select…MrMrsMsDrProf Please […]<\/p>\n","protected":false},"author":27,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-58701","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"\n<title>Gala Dinner Registration - UFB<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ufb.be\/en\/gala-dinner-registration\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gala Dinner Registration - UFB\" \/>\n<meta property=\"og:description\" content=\"2026 UFB Gala Dinner \u2014 Table Registration Table registration 2026 UFB Gala Dinner Thursday, 11 June 2026 The Merode, Brussels Please fill in your details and those of your guests.Fields marked * are required \u2014 all others are optional. 1Your details 2Guest list 3Confirm Step 1 of 3 \u2014 Your details Title * Select…MrMrsMsDrProf Please […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ufb.be\/en\/gala-dinner-registration\/\" \/>\n<meta property=\"og:site_name\" content=\"UFB\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-19T14:29:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ufb.be\/wp-content\/uploads\/2025\/07\/Logo-UFB-RS.png\" \/>\n\t<meta property=\"og:image:width\" content=\"200\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ufb.be\\\/en\\\/gala-dinner-registration\\\/\",\"url\":\"https:\\\/\\\/ufb.be\\\/en\\\/gala-dinner-registration\\\/\",\"name\":\"Gala Dinner Registration - UFB\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ufb.be\\\/en\\\/#website\"},\"datePublished\":\"2026-05-19T12:07:36+00:00\",\"dateModified\":\"2026-05-19T14:29:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ufb.be\\\/en\\\/gala-dinner-registration\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ufb.be\\\/en\\\/gala-dinner-registration\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ufb.be\\\/en\\\/gala-dinner-registration\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/ufb.be\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Gala Dinner Registration\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ufb.be\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/ufb.be\\\/en\\\/\",\"name\":\"United Fund for Belgium\",\"description\":\"Combattons l\u2019exclusion pour plus d\u2019int\u00e9gration sociale\",\"publisher\":{\"@id\":\"https:\\\/\\\/ufb.be\\\/en\\\/#organization\"},\"alternateName\":\"UFB\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ufb.be\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/ufb.be\\\/en\\\/#organization\",\"name\":\"United Fund for Belgium\",\"alternateName\":\"UFB\",\"url\":\"https:\\\/\\\/ufb.be\\\/en\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ufb.be\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/ufb.be\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/Logo-UFB-RS.png\",\"contentUrl\":\"https:\\\/\\\/ufb.be\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/Logo-UFB-RS.png\",\"width\":200,\"height\":200,\"caption\":\"United Fund for Belgium\"},\"image\":{\"@id\":\"https:\\\/\\\/ufb.be\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Gala Dinner Registration - UFB","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:\/\/ufb.be\/en\/gala-dinner-registration\/","og_locale":"en_US","og_type":"article","og_title":"Gala Dinner Registration - UFB","og_description":"2026 UFB Gala Dinner \u2014 Table Registration Table registration 2026 UFB Gala Dinner Thursday, 11 June 2026 The Merode, Brussels Please fill in your details and those of your guests.Fields marked * are required \u2014 all others are optional. 1Your details 2Guest list 3Confirm Step 1 of 3 \u2014 Your details Title * Select…MrMrsMsDrProf Please […]","og_url":"https:\/\/ufb.be\/en\/gala-dinner-registration\/","og_site_name":"UFB","article_modified_time":"2026-05-19T14:29:05+00:00","og_image":[{"width":200,"height":200,"url":"https:\/\/ufb.be\/wp-content\/uploads\/2025\/07\/Logo-UFB-RS.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/ufb.be\/en\/gala-dinner-registration\/","url":"https:\/\/ufb.be\/en\/gala-dinner-registration\/","name":"Gala Dinner Registration - UFB","isPartOf":{"@id":"https:\/\/ufb.be\/en\/#website"},"datePublished":"2026-05-19T12:07:36+00:00","dateModified":"2026-05-19T14:29:05+00:00","breadcrumb":{"@id":"https:\/\/ufb.be\/en\/gala-dinner-registration\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ufb.be\/en\/gala-dinner-registration\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ufb.be\/en\/gala-dinner-registration\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/ufb.be\/en\/"},{"@type":"ListItem","position":2,"name":"Gala Dinner Registration"}]},{"@type":"WebSite","@id":"https:\/\/ufb.be\/en\/#website","url":"https:\/\/ufb.be\/en\/","name":"United Fund for Belgium","description":"Combattons l\u2019exclusion pour plus d\u2019int\u00e9gration sociale","publisher":{"@id":"https:\/\/ufb.be\/en\/#organization"},"alternateName":"UFB","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ufb.be\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ufb.be\/en\/#organization","name":"United Fund for Belgium","alternateName":"UFB","url":"https:\/\/ufb.be\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ufb.be\/en\/#\/schema\/logo\/image\/","url":"https:\/\/ufb.be\/wp-content\/uploads\/2025\/07\/Logo-UFB-RS.png","contentUrl":"https:\/\/ufb.be\/wp-content\/uploads\/2025\/07\/Logo-UFB-RS.png","width":200,"height":200,"caption":"United Fund for Belgium"},"image":{"@id":"https:\/\/ufb.be\/en\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/ufb.be\/en\/wp-json\/wp\/v2\/pages\/58701","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ufb.be\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ufb.be\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ufb.be\/en\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/ufb.be\/en\/wp-json\/wp\/v2\/comments?post=58701"}],"version-history":[{"count":16,"href":"https:\/\/ufb.be\/en\/wp-json\/wp\/v2\/pages\/58701\/revisions"}],"predecessor-version":[{"id":58720,"href":"https:\/\/ufb.be\/en\/wp-json\/wp\/v2\/pages\/58701\/revisions\/58720"}],"wp:attachment":[{"href":"https:\/\/ufb.be\/en\/wp-json\/wp\/v2\/media?parent=58701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}