// ScrollJob v2 — Seeker-side apply wizard + submitted celebrate screen. // Triggered from job-detail "Apply on ScrollJob" CTA when ScrollJob hosts // the application (i.e. employer hasn't configured an external apply URL). // Step 3 visible by default in this artboard — shows the richest dynamic-field // configuration. Toggle DEFAULT_STEP at the top to walk through the others. const DEFAULT_STEP = 3; // ──────────────────────────────────────────────────────────────────────── // Shell — sticky header + progress bar + job-context card + step body // ──────────────────────────────────────────────────────────────────────── function V2ApplyFormScreen() { const step = DEFAULT_STEP; const steps = [ { n: 1, label: 'About you' }, { n: 2, label: 'Experience' }, { n: 3, label: 'Custom questions' }, { n: 4, label: 'Review' }, ]; return (
{/* Sticky header */}
Back to job Save & finish later
{/* Progress bar — 4 segments */}
{steps.map((s) => { const done = s.n < step, current = s.n === step; const bg = done ? V2.success : current ? V2.primary : V2.line; return (
{current && (
)}
); })}
{steps.map((s) => { const done = s.n < step, current = s.n === step; return ( {s.n}. {s.label} ); })}
{/* Job context card */}
Care Assistant — Residential Home
Lavender House Care · Bristol, UK
Easy apply · ~3 min
{/* Step body */} {step === 1 && } {step === 2 && } {step === 3 && } {step === 4 && } {/* Step nav */}
Back to step {step - 1} {step < 4 ? ( Continue to step {step + 1} ) : ( Submit application )}
); } // ──────────────────────────────────────────────────────────────────────── // STEP 1 — About you // ──────────────────────────────────────────────────────────────────────── function ApplyStepAbout() { return ( {/* Profile resume card */} Resume
Use my profile resume
Emma Carter · Care Assistant · 72% complete · last updated 3 days ago
Preview
Or upload a different CV for this application
PDF or DOCX · max 5 MB
Browse files
); } // ──────────────────────────────────────────────────────────────────────── // STEP 2 — Experience // ──────────────────────────────────────────────────────────────────────── function ApplyStepExperience() { return ( Work pattern preference
{[['On-site', true], ['Hybrid', true], ['Remote', false]].map(([t, on]) => ( ))}
Sponsorship needed (UK)
I'll need sponsorship
Lavender House sponsors Health & Care visa for senior roles.
); } // ──────────────────────────────────────────────────────────────────────── // STEP 3 — Custom questions (employer-configured) // ──────────────────────────────────────────────────────────────────────── function ApplyStepCustom() { return ( {/* Single select */} {/* Multi-select chips */}
{[ ['Dementia care', true], ['End-of-life care', false], ['Mobility & moving assistance', true], ['Medication administration', true], ['Complex needs', false], ['Mental health', false], ].map(([t, on]) => ( ))}
{/* Text */}