export function employeeTurnoverCostQuiz(form: FormTs) {
form.setTitle(() => '💸 Calculate Your True Cost of Employee Turnover');
// ============ STATE MANAGEMENT ============
const inputs = form.state<Record<string, number>>({
avgSalary: 60000,
employeeCount: 50,
turnoverRate: 15,
seniorityMix: 50,
industryFactor: 1.0
});
const updateInput = (key: string, value: number) => {
inputs.update(current => ({ ...current, [key]: value }));
};
// ============ CALCULATIONS ============
const getAnnualTurnover = () => {
const i = inputs();
return Math.round((i['employeeCount'] || 0) * ((i['turnoverRate'] || 0) / 100));
};
const getRecruitmentCost = () => {
const i = inputs();
const avgSalary = i['avgSalary'] || 60000;
// Recruitment costs: 15-25% of salary
return Math.round(avgSalary * 0.20);
};
const getTrainingCost = () => {
const i = inputs();
const avgSalary = i['avgSalary'] || 60000;
// Training costs: 10-20% of salary
return Math.round(avgSalary * 0.15);
};
const getProductivityLoss = () => {
const i = inputs();
const avgSalary = i['avgSalary'] || 60000;
// Productivity loss during ramp-up: 25-40% of salary
const seniorityMultiplier = 1 + ((i['seniorityMix'] || 50) / 100) * 0.3;
return Math.round(avgSalary * 0.30 * seniorityMultiplier);
};
const getKnowledgeLoss = () => {
const i = inputs();
const avgSalary = i['avgSalary'] || 60000;
// Institutional knowledge loss: 5-15% of salary
const seniorityMultiplier = 1 + ((i['seniorityMix'] || 50) / 100) * 0.5;
return Math.round(avgSalary * 0.10 * seniorityMultiplier);
};
const getCostPerEmployee = () => {
const i = inputs();
const baseCost = getRecruitmentCost() + getTrainingCost() + getProductivityLoss() + getKnowledgeLoss();
const industryFactor = i['industryFactor'] || 1.0;
return Math.round(baseCost * industryFactor);
};
const getTotalAnnualCost = () => {
return getCostPerEmployee() * getAnnualTurnover();
};
const getCostAsPercentOfPayroll = () => {
const i = inputs();
const totalPayroll = (i['avgSalary'] || 60000) * (i['employeeCount'] || 50);
if (totalPayroll === 0) return 0;
return Math.round((getTotalAnnualCost() / totalPayroll) * 100);
};
const getPotentialSavings = () => {
// If turnover reduced by 25%
return Math.round(getTotalAnnualCost() * 0.25);
};
const formatCurrency = (amount: number): string => {
if (amount >= 1000000) {
return '$' + (amount / 1000000).toFixed(1) + 'M';
}
if (amount >= 1000) {
return '$' + (amount / 1000).toFixed(0) + 'K';
}
return '$' + amount.toLocaleString();
};
// ============ COMPLETION SCREEN ============
form.configureCompletionScreen({
type: 'text',
title: () => `💸 Your Annual Turnover Cost: ${formatCurrency(getTotalAnnualCost())}`,
message: () => {
const total = getTotalAnnualCost();
const savings = getPotentialSavings();
return `Employee turnover is costing your organization ${formatCurrency(total)} per year. By reducing turnover by just 25%, you could save ${formatCurrency(savings)} annually. Download your detailed report for specific recommendations.`;
}
});
// ============ PAGES SETUP ============
const pages = form.addPages('quiz-pages', {
heightMode: 'current-page'
});
// ============ PAGE 1: Company Information ============
const page1 = pages.addPage('company-info', { mobileBreakpoint: 500 });
page1.addRow(row => {
row.addTextPanel('header1', {
label: 'Step 1 of 5: Company Information',
computedValue: () => 'Tell us about your organization',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page1.addSpacer({ height: '24px' });
page1.addRow(row => {
row.addSlider('employeeCount', {
label: 'Total number of employees',
isRequired: true,
min: 10,
max: 1000,
step: 10,
defaultValue: 50,
showValue: true,
unit: 'employees',
onValueChange: (val) => {
if (val != null) updateInput('employeeCount', val);
}
});
});
page1.addRow(row => {
row.addSlider('avgSalary', {
label: 'Average annual salary',
isRequired: true,
min: 30000,
max: 200000,
step: 5000,
defaultValue: 60000,
showValue: true,
unit: '',
onValueChange: (val) => {
if (val != null) updateInput('avgSalary', val);
}
});
});
page1.addRow(row => {
row.addTextPanel('salaryDisplay', {
computedValue: () => {
const salary = inputs()['avgSalary'] || 60000;
return `Average salary: $${salary.toLocaleString()}`;
},
customStyles: {
fontSize: '0.9rem',
color: '#059669',
textAlign: 'center',
fontWeight: '600'
}
});
});
page1.addRow(row => {
row.addDropdown('industry', {
label: 'Industry',
isRequired: true,
options: [
{ id: 'tech', name: '💻 Technology (1.5x - high competition)' },
{ id: 'healthcare', name: '🏥 Healthcare (1.3x - specialized skills)' },
{ id: 'finance', name: '💰 Finance (1.4x - compliance requirements)' },
{ id: 'retail', name: '🛒 Retail (0.8x - higher expected turnover)' },
{ id: 'manufacturing', name: '🏭 Manufacturing (1.0x - baseline)' },
{ id: 'professional', name: '💼 Professional Services (1.2x)' },
{ id: 'hospitality', name: '🏨 Hospitality (0.7x - high expected turnover)' },
{ id: 'other', name: '📦 Other (1.0x - baseline)' }
],
placeholder: 'Select your industry',
onValueChange: (val) => {
const factors: Record<string, number> = {
tech: 1.5, healthcare: 1.3, finance: 1.4, retail: 0.8,
manufacturing: 1.0, professional: 1.2, hospitality: 0.7, other: 1.0
};
updateInput('industryFactor', factors[val as keyof typeof factors] || 1.0);
}
});
});
// ============ PAGE 2: Turnover Data ============
const page2 = pages.addPage('turnover-data', { mobileBreakpoint: 500 });
page2.addRow(row => {
row.addTextPanel('header2', {
label: 'Step 2 of 5: Turnover Data',
computedValue: () => 'Understanding your current turnover',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page2.addSpacer({ height: '24px' });
page2.addRow(row => {
row.addSlider('turnoverRate', {
label: 'Annual turnover rate',
tooltip: 'Percentage of employees who leave per year (voluntary + involuntary)',
isRequired: true,
min: 5,
max: 50,
step: 1,
defaultValue: 15,
showValue: true,
unit: '%',
onValueChange: (val) => {
if (val != null) updateInput('turnoverRate', val);
}
});
});
page2.addRow(row => {
row.addTextPanel('turnoverHint', {
computedValue: () => {
const rate = inputs()['turnoverRate'] || 15;
if (rate <= 10) return 'Low turnover - below average for most industries';
if (rate <= 20) return 'Moderate turnover - around average';
if (rate <= 30) return 'High turnover - above average, significant costs';
return 'Very high turnover - critical issue requiring immediate attention';
},
customStyles: () => {
const rate = inputs()['turnoverRate'] || 15;
const color = rate <= 10 ? '#059669' : rate <= 20 ? '#ca8a04' : rate <= 30 ? '#ea580c' : '#dc2626';
return {
fontSize: '0.85rem',
color: color,
textAlign: 'center',
fontStyle: 'italic',
marginTop: '0.5rem'
};
}
});
});
page2.addRow(row => {
row.addSlider('seniorityMix', {
label: 'Percentage of senior/experienced employees leaving',
tooltip: 'Senior employees are more costly to replace due to institutional knowledge',
isRequired: true,
min: 0,
max: 100,
step: 5,
defaultValue: 50,
showValue: true,
unit: '%',
onValueChange: (val) => {
if (val != null) updateInput('seniorityMix', val);
}
});
});
page2.addRow(row => {
row.addTextPanel('turnoverCalc', {
computedValue: () => {
const annual = getAnnualTurnover();
return `📊 Based on your data: ~${annual} employees leave per year`;
},
customStyles: {
fontSize: '1rem',
fontWeight: '600',
color: '#1e40af',
textAlign: 'center',
padding: '12px',
background: '#dbeafe',
borderRadius: '8px',
marginTop: '1rem'
}
});
});
// ============ PAGE 3: Cost Breakdown ============
const page3 = pages.addPage('cost-breakdown', { mobileBreakpoint: 500 });
page3.addRow(row => {
row.addTextPanel('header3', {
label: 'Step 3 of 5: Cost Breakdown',
computedValue: () => 'Understanding the hidden costs of turnover',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page3.addSpacer({ height: '24px' });
page3.addRow(row => {
row.addTextPanel('costIntro', {
computedValue: () => 'Here\'s how turnover costs break down per departing employee:',
customStyles: {
fontSize: '0.95rem',
color: '#374151',
marginBottom: '1rem'
}
});
});
page3.addRow(row => {
row.addTextPanel('recruitmentCost', {
label: '🎯 Recruitment & Hiring',
computedValue: () => {
const cost = getRecruitmentCost();
return `$${cost.toLocaleString()} (job ads, recruiter time, interviews, background checks)`;
},
customStyles: {
fontSize: '0.9rem',
padding: '12px',
background: '#fef3c7',
borderRadius: '8px',
border: '1px solid #f59e0b'
}
});
});
page3.addRow(row => {
row.addTextPanel('trainingCost', {
label: '📚 Training & Onboarding',
computedValue: () => {
const cost = getTrainingCost();
return `$${cost.toLocaleString()} (orientation, training programs, mentoring time)`;
},
customStyles: {
fontSize: '0.9rem',
padding: '12px',
background: '#dbeafe',
borderRadius: '8px',
border: '1px solid #3b82f6'
}
});
});
page3.addRow(row => {
row.addTextPanel('productivityCost', {
label: '📉 Productivity Loss',
computedValue: () => {
const cost = getProductivityLoss();
return `$${cost.toLocaleString()} (ramp-up time, reduced output during transition)`;
},
customStyles: {
fontSize: '0.9rem',
padding: '12px',
background: '#fee2e2',
borderRadius: '8px',
border: '1px solid #ef4444'
}
});
});
page3.addRow(row => {
row.addTextPanel('knowledgeCost', {
label: '🧠 Knowledge & Culture Loss',
computedValue: () => {
const cost = getKnowledgeLoss();
return `$${cost.toLocaleString()} (institutional knowledge, relationships, team dynamics)`;
},
customStyles: {
fontSize: '0.9rem',
padding: '12px',
background: '#f3e8ff',
borderRadius: '8px',
border: '1px solid #a855f7'
}
});
});
page3.addRow(row => {
row.addTextPanel('totalPerEmployee', {
computedValue: () => {
const cost = getCostPerEmployee();
const salary = inputs()['avgSalary'] || 60000;
const pct = Math.round((cost / salary) * 100);
return `💰 Total Cost Per Departure: $${cost.toLocaleString()} (${pct}% of salary)`;
},
customStyles: {
fontSize: '1.1rem',
fontWeight: '700',
color: '#dc2626',
textAlign: 'center',
padding: '15px',
background: '#fef2f2',
borderRadius: '8px',
marginTop: '1rem',
border: '2px solid #dc2626'
}
});
});
// ============ PAGE 4: Results ============
const page4 = pages.addPage('results', { mobileBreakpoint: 500 });
page4.addRow(row => {
row.addTextPanel('header4', {
label: 'Step 4 of 5: Your Results',
computedValue: () => 'The true cost of turnover for your organization',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page4.addSpacer({ height: '24px' });
page4.addRow(row => {
row.addTextPanel('bigNumber', {
computedValue: () => formatCurrency(getTotalAnnualCost()),
customStyles: {
fontSize: '3rem',
fontWeight: '800',
color: '#dc2626',
textAlign: 'center',
padding: '20px',
background: '#fef2f2',
borderRadius: '12px',
border: '3px solid #dc2626'
}
});
});
page4.addRow(row => {
row.addTextPanel('bigNumberLabel', {
computedValue: () => 'Annual Cost of Employee Turnover',
customStyles: {
fontSize: '1.1rem',
fontWeight: '600',
color: '#374151',
textAlign: 'center',
marginTop: '0.5rem'
}
});
});
page4.addRow(row => {
row.addTextPanel('payrollPct', {
computedValue: () => {
const pct = getCostAsPercentOfPayroll();
return `This represents ${pct}% of your total payroll`;
},
customStyles: {
fontSize: '1rem',
color: '#6b7280',
textAlign: 'center',
marginTop: '0.5rem'
}
});
});
page4.addSpacer({ height: '20px' });
page4.addRow(row => {
row.addTextPanel('savingsTitle', {
label: '💡 Potential Savings',
computedValue: () => '',
customStyles: {
fontSize: '1rem',
fontWeight: '700',
color: '#059669'
}
});
});
page4.addRow(row => {
row.addTextPanel('savingsCalc', {
computedValue: () => {
const savings = getPotentialSavings();
return `By reducing turnover by 25%, you could save ${formatCurrency(savings)} per year`;
},
customStyles: {
fontSize: '1rem',
color: '#059669',
padding: '15px',
background: '#ecfdf5',
borderRadius: '8px',
border: '2px solid #059669',
textAlign: 'center'
}
});
});
// Collapsible breakdown
const detailsSection = page4.addSubform('detailsBreakdown', {
title: '📊 Detailed Breakdown (click to expand)',
isCollapsible: true,
customStyles: {
marginTop: '1rem',
background: '#f9fafb',
borderRadius: '8px'
}
});
detailsSection.addRow(row => {
row.addTextPanel('breakdown1', {
computedValue: () => {
const annual = getAnnualTurnover();
const cost = getCostPerEmployee();
return `${annual} departures × $${cost.toLocaleString()} per departure`;
},
customStyles: {
fontSize: '0.9rem',
padding: '10px',
background: '#dbeafe',
borderRadius: '6px'
}
});
});
detailsSection.addRow(row => {
row.addTextPanel('breakdown2', {
label: 'Cost Components',
computedValue: () => {
const r = getRecruitmentCost();
const t = getTrainingCost();
const p = getProductivityLoss();
const k = getKnowledgeLoss();
return `Recruitment: $${r.toLocaleString()} | Training: $${t.toLocaleString()} | Productivity: $${p.toLocaleString()} | Knowledge: $${k.toLocaleString()}`;
},
customStyles: {
fontSize: '0.85rem',
padding: '10px',
color: '#6b7280'
}
});
});
// ============ PAGE 5: Lead Capture ============
const page5 = pages.addPage('lead-capture', { mobileBreakpoint: 500 });
page5.addRow(row => {
row.addTextPanel('header5', {
label: 'Step 5 of 5: Get Your Report',
computedValue: () => 'Receive your detailed turnover cost analysis',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page5.addSpacer({ height: '24px' });
page5.addRow(row => {
row.addTextPanel('leadCapture', {
label: '📧 Get Your Turnover Cost Report',
computedValue: () => 'Enter your details to receive a PDF with your full analysis and retention strategies',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280'
}
});
});
page5.addRow(row => {
row.addTextbox('name', {
label: 'Your Name',
isRequired: true,
placeholder: 'John Smith'
}, '1fr');
row.addEmail('email', {
label: 'Work Email',
isRequired: true,
placeholder: 'john@company.com'
}, '1fr');
});
page5.addRow(row => {
row.addTextbox('company', {
label: 'Company Name',
placeholder: 'Acme Corp'
}, '1fr');
row.addDropdown('role', {
label: 'Your Role',
options: [
{ id: 'hr', name: '👥 HR / People Operations' },
{ id: 'executive', name: '👔 Executive / C-Suite' },
{ id: 'manager', name: '📊 Manager / Director' },
{ id: 'finance', name: '💰 Finance' },
{ id: 'other', name: '📦 Other' }
],
placeholder: 'Select role'
}, '1fr');
});
page5.addRow(row => {
row.addCheckboxList('consent', {
options: [
{ id: 'report', name: '📄 Send me my detailed turnover cost report', isRequired: true },
{ id: 'tips', name: '💡 Send me retention strategies and tips' },
{ id: 'consultation', name: '📞 I\'d like a free HR consultation' }
],
defaultValue: ['report'],
orientation: 'vertical'
});
});
// ============ PDF REPORT ============
form.configurePdf('turnover-report', pdf => {
pdf.configure({
filename: 'employee-turnover-cost-report.pdf',
pageSize: 'A4',
allowUserDownload: true,
downloadButtonLabel: '📄 Download Cost Report',
header: {
title: 'Employee Turnover Cost Analysis',
subtitle: 'Your Personalized ROI Report'
},
footer: {
text: 'Generated by FormTs Turnover Calculator',
showPageNumbers: true
}
});
pdf.addSection('Executive Summary', section => {
section.addRow(row => {
row.addField('Annual Turnover Cost', formatCurrency(getTotalAnnualCost()));
row.addField('Cost Per Departure', formatCurrency(getCostPerEmployee()));
});
section.addRow(row => {
row.addField('Annual Departures', `${getAnnualTurnover()} employees`);
row.addField('% of Payroll', `${getCostAsPercentOfPayroll()}%`);
});
section.addRow(row => {
row.addField('Potential Savings (25% reduction)', formatCurrency(getPotentialSavings()));
});
});
pdf.addSection('Cost Breakdown Per Employee', section => {
section.addTable(
['Cost Category', 'Amount', '% of Total'],
[
['Recruitment & Hiring', `$${getRecruitmentCost().toLocaleString()}`, `${Math.round((getRecruitmentCost() / getCostPerEmployee()) * 100)}%`],
['Training & Onboarding', `$${getTrainingCost().toLocaleString()}`, `${Math.round((getTrainingCost() / getCostPerEmployee()) * 100)}%`],
['Productivity Loss', `$${getProductivityLoss().toLocaleString()}`, `${Math.round((getProductivityLoss() / getCostPerEmployee()) * 100)}%`],
['Knowledge Loss', `$${getKnowledgeLoss().toLocaleString()}`, `${Math.round((getKnowledgeLoss() / getCostPerEmployee()) * 100)}%`],
['Total', `$${getCostPerEmployee().toLocaleString()}`, '100%']
]
);
});
pdf.addSection('Your Organization', section => {
const i = inputs();
section.addRow(row => {
row.addField('Employee Count', `${i['employeeCount']} employees`);
row.addField('Average Salary', `$${(i['avgSalary'] || 0).toLocaleString()}`);
});
section.addRow(row => {
row.addField('Turnover Rate', `${i['turnoverRate']}%`);
row.addField('Senior Employee %', `${i['seniorityMix']}%`);
});
});
pdf.addPageBreak();
pdf.addSection('Retention Strategies', section => {
section.addText('Based on your data, consider these high-impact retention strategies:');
section.addSpacer(10);
section.addText('1. Competitive Compensation Review - Ensure salaries match market rates');
section.addText('2. Career Development Programs - Create clear growth paths');
section.addText('3. Manager Training - Poor management is #1 reason for leaving');
section.addText('4. Flexible Work Options - Work-life balance is key for retention');
section.addText('5. Recognition Programs - Regular appreciation reduces turnover');
section.addText('6. Onboarding Improvement - Strong onboarding increases 1-year retention');
section.addText('7. Stay Interviews - Understand why people stay, not just why they leave');
section.addText('8. Exit Interview Analysis - Learn from departures to prevent future ones');
});
pdf.addSection('ROI Calculation', section => {
const savings = getPotentialSavings();
section.addText(`If you invest in retention programs and reduce turnover by 25%:`);
section.addSpacer(5);
section.addRow(row => {
row.addField('Annual Savings', formatCurrency(savings));
});
section.addText('');
section.addText(`This means: Every $1 invested in retention that achieves this goal yields a significant return.`);
});
});
// ============ SUBMIT BUTTON ============
form.configureSubmitButton({
label: () => `💸 Get My Report (${formatCurrency(getTotalAnnualCost())} in annual costs)`
});
form.configureSubmitBehavior({
sendToServer: true
});
}