/* ========================================================================= form.jsx Multi-step lead qualifier, Closing CTA, Footer ========================================================================= */ /* smooth scroll without scrollIntoView */ function scrollToId(id) { const el = document.getElementById(id); if (!el) return; const top = el.getBoundingClientRect().top + window.scrollY - 84; window.scrollTo({ top, behavior: 'smooth' }); } window.scrollToId = scrollToId; const STEPS = [ { key: 'type', kind: 'single', title: 'What best describes your business?', sub: 'This helps us route you to the right specialist.', options: [ { v: 'fba', label: 'Amazon FBA seller' }, { v: 'fbm', label: 'Amazon FBM seller' }, { v: 'pl', label: 'Private label brand' }, { v: 'ecom', label: 'E-commerce (Shopify / eBay / TikTok)' }, { v: 'other', label: 'Something else' }, ], }, { key: 'volume', kind: 'single', title: 'Roughly how many units do you ship a month?', sub: 'A ballpark is fine it helps us size the right solution.', options: [ { v: 'u500', label: 'Under 500', sub: 'Getting started' }, { v: '500-2k', label: '500 – 2,000', sub: 'Growing steadily' }, { v: '2k-10k', label: '2,000 – 10,000', sub: 'Scaling fast' }, { v: '10k+', label: '10,000+', sub: 'High volume' }, ], }, { key: 'services', kind: 'multi', title: 'Which services are you interested in?', sub: 'Select all that apply.', options: [ { v: 'prep', label: 'Amazon prep & labelling' }, { v: 'fba', label: 'FBA receiving & forwarding' }, { v: 'fbm', label: 'FBM / e-commerce fulfilment' }, { v: 'storage', label: 'Storage & inventory' }, { v: 'returns', label: 'Returns handling' }, { v: 'unsure', label: 'Not sure yet advise me' }, ], }, { key: 'stage', kind: 'single', title: 'Where are you right now?', sub: 'So we can tailor the conversation.', options: [ { v: 'new', label: 'Just launching', sub: 'Need a fulfilment partner' }, { v: 'switch', label: 'Switching 3PL', sub: 'Current one isn’t working' }, { v: 'scale', label: 'Scaling up', sub: 'Outgrowing self-prep' }, { v: 'explore', label: 'Just exploring', sub: 'Comparing options' }, ], }, ]; const EMPTY = { type:'', volume:'', services:[], stage:'', name:'', company:'', email:'', phone:'', message:'' }; const LS_KEY = 'lyzoo_enquiry_v1'; function LeadFormEngine() { const [step, setStep] = useState(0); const [data, setData] = useState(() => { try { const s = JSON.parse(localStorage.getItem(LS_KEY)); return s ? { ...EMPTY, ...s } : EMPTY; } catch { return EMPTY; } }); const [done, setDone] = useState(false); const [touched, setTouched] = useState(false); const [submitting, setSubmitting] = useState(false); const [submitError, setSubmitError] = useState(''); const total = STEPS.length + 1; // + contact step const WEB3FORMS_KEY = 'a1561e6a-ee64-420c-8dc5-9df4017e2180'; useEffect(() => { try { localStorage.setItem(LS_KEY, JSON.stringify(data)); } catch {} }, [data]); const set = (k, v) => setData(d => ({ ...d, [k]: v })); const toggleMulti = (k, v) => setData(d => { const arr = d[k].includes(v) ? d[k].filter(x => x !== v) : [...d[k], v]; return { ...d, [k]: arr }; }); const isContact = step === STEPS.length; const cur = STEPS[step]; const canNext = isContact ? (data.name.trim() && /\S+@\S+\.\S+/.test(data.email) && data.phone.trim()) : (cur.kind === 'multi' ? data[cur.key].length > 0 : !!data[cur.key]); const submitToFormspree = async () => { setSubmitting(true); setSubmitError(''); try { const payload = { access_key: WEB3FORMS_KEY, subject: 'New Lyzoo enquiry from ' + data.name, from_name: 'Lyzoo Landing Page', name: data.name, email: data.email, phone: data.phone, message: data.message || '(none)', business_type: data.bizType, monthly_volume: data.volume, services_needed: data.services.join(', '), current_situation: data.situation, timeline: data.timeline, }; const res = await fetch('https://api.web3forms.com/submit', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: JSON.stringify(payload), }); const json = await res.json(); if (json.success) { try { localStorage.removeItem(LS_KEY); } catch {} try { if(window.fbq) fbq('track','Lead'); } catch {} try { if(window.ttq) ttq.track('SubmitForm'); } catch {} try { if(window.gtag) gtag('event','generate_lead',{event_category:'form',event_label:'enquiry'}); } catch {} setDone(true); } else { setSubmitError(json.message || 'Something went wrong. Please email us directly at info@lyzoo.co.uk'); } } catch (e) { setSubmitError('Network error. Please check your connection and try again.'); } setSubmitting(false); }; const next = () => { if (!canNext) { setTouched(true); return; } setTouched(false); if (isContact) { submitToFormspree(); return; } setStep(s => s + 1); }; const back = () => { setTouched(false); setStep(s => Math.max(0, s - 1)); }; return (
{!done ? (
{Array.from({length: total}).map((_, i) => ( ))}
Step {step+1} of {total}
{!isContact ? (

{cur.title}

{cur.sub}

4 ? " two" : "")}> {cur.options.map(o => { const sel = cur.kind === 'multi' ? data[cur.key].includes(o.v) : data[cur.key] === o.v; return ( ); })}
) : (

Where should we send your quote?

We’ll only use these details to prepare and send your quote.

set('name',e.target.value)} placeholder="Your full name"/>
set('email',e.target.value)} placeholder="Your email address"/>
set('phone',e.target.value)} placeholder="Your phone number"/>