on any page. * 2. Add data-lead-form (or class "open-lead-form") to any button/link * you want to trigger the form. * 3. Optionally add data-lead-subject="Custom Subject" per button. * 4. Call window.ntdOpenLeadForm() / window.ntdCloseLeadForm() anywhere. */ (function () { 'use strict'; if (document.getElementById('ntd-lead-panel')) return; // ── Scoped CSS ──────────────────────────────────────────────────────────── var css = [ '#ntd-lead-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);z-index:9998;opacity:0;pointer-events:none;transition:opacity .35s ease}', '#ntd-lead-overlay.ntd-open{opacity:1;pointer-events:all}', '#ntd-lead-panel{position:fixed;top:0;right:0;bottom:0;width:100%;max-width:480px;background:#fff;z-index:9999;transform:translateX(100%);transition:transform .42s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;overflow:hidden;box-shadow:-8px 0 48px rgba(15,23,42,.18)}', '#ntd-lead-panel.ntd-open{transform:translateX(0)}', '.ntd-ph{background:linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);padding:24px 28px 20px;position:relative;flex-shrink:0}', '.ntd-ph-badge{display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:3px 12px;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:8px}', '.ntd-ph-title{font-family:"Barlow","Inter",-apple-system,sans-serif;font-size:1.4rem;font-weight:800;color:#fff;margin:0 0 5px;line-height:1.2;padding-right:36px}', '.ntd-ph-sub{font-family:"Inter",-apple-system,sans-serif;font-size:.8rem;color:rgba(255,255,255,.82);margin:0;line-height:1.55;max-width:360px}', '.ntd-ph-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;line-height:1;transition:background .2s;padding:0}', '.ntd-ph-close:hover{background:rgba(255,255,255,.28)}', '.ntd-pb{flex:1;overflow-y:auto;padding:22px 28px 28px}', '.ntd-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}', '.ntd-field{margin-bottom:14px;display:flex;flex-direction:column;gap:5px}', '.ntd-field:last-of-type{margin-bottom:0}', '.ntd-field label{display:block;font-family:"Inter",-apple-system,sans-serif;font-size:.73rem;font-weight:600;color:#334155;letter-spacing:.02em}', '.ntd-field input,.ntd-field select,.ntd-field textarea{width:100%;font-family:"Inter",-apple-system,sans-serif;font-size:.875rem;color:#0f172a;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:8px;padding:9px 12px;outline:none;transition:border-color .2s,box-shadow .2s,background .2s;box-sizing:border-box}', '.ntd-field input:focus,.ntd-field select:focus,.ntd-field textarea:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.1);background:#fff}', '.ntd-field textarea{resize:vertical;min-height:72px}', '.ntd-field select{-webkit-appearance:none;appearance:none;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='%2364748b' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;cursor:pointer}', '.ntd-opt{font-weight:400;color:#94a3b8}', '.ntd-submit{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);color:#fff;font-family:"Inter",-apple-system,sans-serif;font-size:.95rem;font-weight:700;border:none;border-radius:10px;padding:13px 20px;cursor:pointer;transition:transform .2s,box-shadow .2s,opacity .2s;margin-top:18px;letter-spacing:.02em}', '.ntd-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,99,235,.32)}', '.ntd-submit:active:not(:disabled){transform:translateY(0)}', '.ntd-submit:disabled{opacity:.65;cursor:not-allowed}', '.ntd-privacy{text-align:center;font-family:"Inter",sans-serif;font-size:.7rem;color:#94a3b8;margin-top:10px}', '.ntd-attr{margin-top:10px;font-size:10px;color:#cbd5e1;text-align:right;font-family:"Inter",sans-serif}', '.ntd-attr a{color:#94a3b8;text-decoration:none}', '.ntd-error-msg{display:none;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:10px 14px;font-family:"Inter",sans-serif;font-size:.8rem;color:#dc2626;margin-top:12px}', '.ntd-error-msg.show{display:block}', '.ntd-success{display:none;text-align:center;padding:36px 16px 24px}', '.ntd-success.show{display:block}', '.ntd-success-icon{width:68px;height:68px;border-radius:50%;background:linear-gradient(135deg,#10b981,#059669);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:2rem}', '.ntd-success h3{font-family:"Barlow","Inter",sans-serif;font-size:1.3rem;font-weight:800;color:#0f172a;margin-bottom:8px}', '.ntd-success p{font-family:"Inter",sans-serif;font-size:.875rem;color:#64748b;line-height:1.6;margin-bottom:22px}', '.ntd-success-close{background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;border:none;border-radius:8px;padding:10px 28px;font-family:"Inter",sans-serif;font-size:.875rem;font-weight:600;cursor:pointer;transition:transform .2s}', '.ntd-success-close:hover{transform:translateY(-1px)}', '@media(max-width:520px){#ntd-lead-panel{max-width:100%}.ntd-ph{padding:20px 20px 16px}.ntd-pb{padding:18px 20px 24px}.ntd-row{grid-template-columns:1fr}.ntd-ph-title{font-size:1.2rem}}' ].join(''); var styleEl = document.createElement('style'); styleEl.id = 'ntd-lead-form-css'; styleEl.textContent = css; document.head.appendChild(styleEl); // ── Panel HTML ──────────────────────────────────────────────────────────── var panelHTML = '
' + ''; document.body.insertAdjacentHTML('beforeend', panelHTML); // ── Refs ────────────────────────────────────────────────────────────────── var overlay = document.getElementById('ntd-lead-overlay'); var panel = document.getElementById('ntd-lead-panel'); var closeBtn = document.getElementById('ntdFormClose'); var form = document.getElementById('ntd-lead-form'); var submitBtn = document.getElementById('ntdSubmitBtn'); var submitLabel = document.getElementById('ntdSubmitLabel'); var successEl = document.getElementById('ntdSuccess'); var successClose = document.getElementById('ntdSuccessClose'); var fromPage = document.getElementById('ntdFromPage'); var subjectField = document.getElementById('ntdSubject'); var errorEl = document.getElementById('ntdError'); // ── Open ────────────────────────────────────────────────────────────────── function openForm(subject, servicePreset) { fromPage.value = window.location.pathname; if (subject) subjectField.value = subject; if (servicePreset) { var sel = document.getElementById('ntd_service'); if (sel) { for (var i = 0; i < sel.options.length; i++) { if (sel.options[i].value === servicePreset) { sel.selectedIndex = i; break; } } } } overlay.classList.add('ntd-open'); panel.classList.add('ntd-open'); panel.removeAttribute('aria-hidden'); document.body.style.overflow = 'hidden'; setTimeout(function () { var first = panel.querySelector('input:not([type="hidden"]):not([style*="none"])'); if (first) first.focus(); }, 440); } // ── Close ───────────────────────────────────────────────────────────────── function closeForm() { overlay.classList.remove('ntd-open'); panel.classList.remove('ntd-open'); panel.setAttribute('aria-hidden', 'true'); document.body.style.overflow = ''; } overlay.addEventListener('click', closeForm); closeBtn.addEventListener('click', closeForm); successClose.addEventListener('click', closeForm); document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && panel.classList.contains('ntd-open')) closeForm(); }); // ── AJAX Submit ─────────────────────────────────────────────────────────── form.addEventListener('submit', function (e) { e.preventDefault(); errorEl.classList.remove('show'); var name = document.getElementById('ntd_name').value.trim(); var phone = document.getElementById('ntd_phone').value.trim(); var email = document.getElementById('ntd_email').value.trim(); var service = document.getElementById('ntd_service').value; if (!name || !phone || !email || !service) { errorEl.textContent = 'Please fill in all required fields.'; errorEl.classList.add('show'); return; } submitBtn.disabled = true; submitLabel.textContent = 'Sendingu2026'; var data = new FormData(form); fetch('/wp-json/ntd/v1/crm-lead', { method: 'POST', body: data }) .then(function (res) { if (res.ok) { form.style.display = 'none'; successEl.classList.add('show'); } else { throw new Error('status ' + res.status); } }) .catch(function () { errorEl.textContent = 'Something went wrong. Please try again or email us directly.'; errorEl.classList.add('show'); submitLabel.textContent = 'Get My Free Audit'; submitBtn.disabled = false; }); }); // ── Auto-bind Triggers with Global Delegation (Mobile & Desktop) ────────── function handleTriggerClick(e) { var target = e.target; var btn = target.closest('[data-lead-form], .open-lead-form, #heroCtaAudit, a[href="#audit"], a[href="#lead-form"]'); if (!btn) return; e.preventDefault(); e.stopPropagation(); var subject = btn.getAttribute('data-lead-subject') || 'New Lead — Hero CTA'; var service = btn.getAttribute('data-lead-service') || ''; openForm(subject, service); } document.addEventListener('click', handleTriggerClick, true); document.addEventListener('touchend', function(e) { var target = e.target; var btn = target.closest('[data-lead-form], .open-lead-form, #heroCtaAudit, a[href="#audit"], a[href="#lead-form"]'); if (btn) { handleTriggerClick(e); } }, { passive: false }); // ── Global API ──────────────────────────────────────────────────────────── window.ntdOpenLeadForm = openForm; window.ntdCloseLeadForm = closeForm; }());