export function cacCalculatorQuiz(form: FormTs) {
form.setTitle(() => '💰 What\'s Your Customer Acquisition Cost Costing You?');
// ============ CALCULATOR STATE ============
const inputs = form.state<Record<string, number>>({
monthlyMarketingSpend: 10000,
monthlySalesSpend: 15000,
newCustomersPerMonth: 50,
avgCustomerLifetime: 24,
avgMonthlyRevenue: 200,
churnRate: 5
});
const updateInput = (key: string, value: number) => {
inputs.update(current => ({ ...current, [key]: value }));
};
// ============ CALCULATIONS ============
const getCAC = () => {
const i = inputs();
const totalAcquisitionCost = i.monthlyMarketingSpend + i.monthlySalesSpend;
return i.newCustomersPerMonth > 0 ? totalAcquisitionCost / i.newCustomersPerMonth : 0;
};
const getLTV = () => {
const i = inputs();
return i.avgMonthlyRevenue * i.avgCustomerLifetime;
};
const getLTVtoCACRatio = () => {
const cac = getCAC();
const ltv = getLTV();
return cac > 0 ? ltv / cac : 0;
};
const getPaybackMonths = () => {
const cac = getCAC();
const i = inputs();
return i.avgMonthlyRevenue > 0 ? cac / i.avgMonthlyRevenue : 0;
};
const getAnnualCAC = () => {
const i = inputs();
return (i.monthlyMarketingSpend + i.monthlySalesSpend) * 12;
};
const getHealthStatus = (): 'critical' | 'concerning' | 'healthy' | 'excellent' => {
const ratio = getLTVtoCACRatio();
if (ratio >= 5) return 'excellent';
if (ratio >= 3) return 'healthy';
if (ratio >= 1) return 'concerning';
return 'critical';
};
const getHealthLabel = () => {
const status = getHealthStatus();
const labels = {
critical: '🚨 Critical - Losing Money',
concerning: '⚠️ Concerning - Needs Improvement',
healthy: '✅ Healthy - Good Balance',
excellent: '🏆 Excellent - Highly Efficient'
};
return labels[status];
};
const getHealthColor = () => {
const status = getHealthStatus();
const colors = {
critical: '#dc2626',
concerning: '#ea580c',
healthy: '#16a34a',
excellent: '#7c3aed'
};
return colors[status];
};
const getPotentialSavings = () => {
const ratio = getLTVtoCACRatio();
if (ratio >= 3) return 0;
// Calculate how much CAC should be reduced to reach 3:1 ratio
const targetCAC = getLTV() / 3;
const currentCAC = getCAC();
const savingsPerCustomer = currentCAC - targetCAC;
const i = inputs();
return savingsPerCustomer * i.newCustomersPerMonth * 12;
};
const formatCurrency = (value: number) => {
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
maximumFractionDigits: 0
}).format(value);
};
// ============ COMPLETION SCREEN ============
form.configureCompletionScreen({
type: 'text',
title: () => `${getHealthLabel()}`,
message: () => {
const ratio = getLTVtoCACRatio().toFixed(1);
const cac = formatCurrency(getCAC());
const savings = getPotentialSavings();
if (savings > 0) {
return `Your LTV:CAC ratio is ${ratio}:1 with a CAC of ${cac}. You could save ${formatCurrency(savings)}/year by optimizing to the benchmark 3:1 ratio. Download your detailed analysis for specific recommendations.`;
}
return `Your LTV:CAC ratio is ${ratio}:1 with a CAC of ${cac}. Your unit economics are solid! Download your report to learn how to maintain and improve further.`;
}
});
// ============ PAGES SETUP ============
const pages = form.addPages('quiz-pages', {
heightMode: 'current-page'
});
// ============ PAGE 1: Acquisition Costs ============
const page1 = pages.addPage('acquisition-costs', { mobileBreakpoint: 500 });
page1.addRow(row => {
row.addTextPanel('header1', {
label: 'Step 1 of 5: Acquisition Costs',
computedValue: () => 'How much do you spend to acquire customers?',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page1.addSpacer({ height: '24px' });
page1.addRow(row => {
row.addSlider('monthlyMarketingSpend', {
label: 'Monthly Marketing Spend',
tooltip: 'Include ads, content, SEO, events, tools',
isRequired: true,
min: 0,
max: 100000,
step: 1000,
unit: '/month',
defaultValue: 10000,
onValueChange: (val) => {
if (val != null) updateInput('monthlyMarketingSpend', val);
}
});
});
page1.addRow(row => {
row.addSlider('monthlySalesSpend', {
label: 'Monthly Sales Spend',
tooltip: 'Include salaries, commissions, tools, travel',
isRequired: true,
min: 0,
max: 100000,
step: 1000,
unit: '/month',
defaultValue: 15000,
onValueChange: (val) => {
if (val != null) updateInput('monthlySalesSpend', val);
}
});
});
page1.addRow(row => {
row.addTextPanel('totalSpend', {
label: '💵 Total Monthly Acquisition Spend',
computedValue: () => formatCurrency(inputs().monthlyMarketingSpend + inputs().monthlySalesSpend),
customStyles: {
fontSize: '1.2rem',
fontWeight: '700',
color: '#dc2626',
textAlign: 'center',
padding: '15px',
background: '#fef2f2',
borderRadius: '8px'
}
});
});
// ============ PAGE 2: New Customers ============
const page2 = pages.addPage('new-customers', { mobileBreakpoint: 500 });
page2.addRow(row => {
row.addTextPanel('header2', {
label: 'Step 2 of 5: Customer Acquisition',
computedValue: () => 'How many customers do you acquire?',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page2.addSpacer({ height: '24px' });
page2.addRow(row => {
row.addSlider('newCustomersPerMonth', {
label: 'New Customers Per Month',
isRequired: true,
min: 1,
max: 500,
step: 5,
unit: 'customers',
defaultValue: 50,
onValueChange: (val) => {
if (val != null) updateInput('newCustomersPerMonth', val);
}
});
});
page2.addRow(row => {
row.addTextPanel('cacResult', {
label: '🎯 Your Customer Acquisition Cost (CAC)',
computedValue: () => formatCurrency(getCAC()),
customStyles: () => {
const cac = getCAC();
const color = cac > 500 ? '#dc2626' : cac > 200 ? '#ca8a04' : '#16a34a';
return {
fontSize: '1.5rem',
fontWeight: '700',
color: color,
textAlign: 'center',
padding: '20px',
background: '#f9fafb',
borderRadius: '12px',
border: `2px solid ${color}`
};
}
});
});
page2.addRow(row => {
row.addTextPanel('cacContext', {
computedValue: () => {
const cac = getCAC();
if (cac > 500) return '⚠️ Your CAC is higher than most B2B benchmarks';
if (cac > 200) return '📊 Your CAC is in the typical range';
return '✅ Your CAC is lower than average - good efficiency!';
},
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
textAlign: 'center',
marginTop: '10px'
}
});
});
// ============ PAGE 3: Customer Value ============
const page3 = pages.addPage('customer-value', { mobileBreakpoint: 500 });
page3.addRow(row => {
row.addTextPanel('header3', {
label: 'Step 3 of 5: Customer Lifetime Value',
computedValue: () => 'How much is each customer worth?',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page3.addSpacer({ height: '24px' });
page3.addRow(row => {
row.addSlider('avgMonthlyRevenue', {
label: 'Average Revenue Per Customer (Monthly)',
isRequired: true,
min: 10,
max: 2000,
step: 10,
unit: '/month',
defaultValue: 200,
onValueChange: (val) => {
if (val != null) updateInput('avgMonthlyRevenue', val);
}
});
});
page3.addRow(row => {
row.addSlider('avgCustomerLifetime', {
label: 'Average Customer Lifetime',
tooltip: 'How many months does a typical customer stay?',
isRequired: true,
min: 1,
max: 60,
step: 1,
unit: 'months',
defaultValue: 24,
onValueChange: (val) => {
if (val != null) updateInput('avgCustomerLifetime', val);
}
});
});
page3.addRow(row => {
row.addTextPanel('ltvResult', {
label: '💎 Customer Lifetime Value (LTV)',
computedValue: () => formatCurrency(getLTV()),
customStyles: {
fontSize: '1.5rem',
fontWeight: '700',
color: '#059669',
textAlign: 'center',
padding: '20px',
background: '#ecfdf5',
borderRadius: '12px',
border: '2px solid #6ee7b7'
}
});
});
// ============ PAGE 4: Results ============
const page4 = pages.addPage('results', { mobileBreakpoint: 500 });
page4.addRow(row => {
row.addTextPanel('header4', {
label: 'Step 4 of 5: Your Unit Economics',
computedValue: () => 'Here\'s your CAC analysis',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page4.addSpacer({ height: '24px' });
page4.addRow(row => {
row.addTextPanel('healthStatus', {
computedValue: () => getHealthLabel(),
customStyles: () => ({
fontSize: '1.3rem',
fontWeight: '800',
textAlign: 'center',
color: getHealthColor(),
padding: '15px',
background: '#f9fafb',
borderRadius: '12px',
border: `3px solid ${getHealthColor()}`
})
});
});
page4.addRow(row => {
row.addTextPanel('ratioDisplay', {
computedValue: () => {
const ratio = getLTVtoCACRatio();
return `LTV:CAC Ratio = ${ratio.toFixed(1)}:1`;
},
customStyles: {
fontSize: '1.5rem',
fontWeight: '700',
textAlign: 'center',
color: '#1e40af',
marginTop: '15px'
}
});
});
page4.addRow(row => {
row.addTextPanel('ratioContext', {
computedValue: () => {
const ratio = getLTVtoCACRatio();
if (ratio >= 5) return '🏆 Above 5:1 - Excellent! You might be under-investing in growth';
if (ratio >= 3) return '✅ 3:1 to 5:1 - Healthy range for sustainable growth';
if (ratio >= 1) return '⚠️ 1:1 to 3:1 - Below benchmark, optimize acquisition';
return '🚨 Below 1:1 - You\'re losing money on each customer!';
},
customStyles: {
fontSize: '0.9rem',
color: '#4b5563',
textAlign: 'center',
padding: '10px',
background: '#f3f4f6',
borderRadius: '6px',
marginTop: '10px'
}
});
});
page4.addRow(row => {
row.addTextPanel('paybackLabel', {
label: '⏱️ CAC Payback Period',
computedValue: () => `${getPaybackMonths().toFixed(1)} months`,
customStyles: {
fontSize: '1rem',
padding: '12px',
background: '#dbeafe',
borderRadius: '8px',
textAlign: 'center',
marginTop: '15px'
}
}, '1fr');
row.addTextPanel('annualCacLabel', {
label: '📅 Annual CAC Spend',
computedValue: () => formatCurrency(getAnnualCAC()),
customStyles: {
fontSize: '1rem',
padding: '12px',
background: '#fee2e2',
borderRadius: '8px',
textAlign: 'center',
marginTop: '15px'
}
}, '1fr');
});
const savingsSection = page4.addSubform('savingsSection', {
title: '💰 Optimization Opportunity',
isVisible: () => getPotentialSavings() > 0,
isCollapsible: false,
customStyles: {
marginTop: '1rem',
padding: '15px',
background: '#fef3c7',
borderRadius: '8px',
border: '2px solid #fcd34d'
}
});
savingsSection.addRow(row => {
row.addTextPanel('savingsAmount', {
computedValue: () => `Potential Annual Savings: ${formatCurrency(getPotentialSavings())}`,
customStyles: {
fontSize: '1.1rem',
fontWeight: '700',
color: '#92400e',
textAlign: 'center'
}
});
});
savingsSection.addRow(row => {
row.addTextPanel('savingsContext', {
computedValue: () => 'By optimizing your CAC to reach the benchmark 3:1 LTV:CAC ratio',
customStyles: {
fontSize: '0.85rem',
color: '#92400e',
textAlign: 'center'
}
});
});
// ============ 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: () => 'Enter your details to receive your CAC optimization report',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page5.addSpacer({ height: '24px' });
page5.addRow(row => {
row.addTextbox('name', {
label: 'Your Name',
isRequired: true,
placeholder: 'Jordan Marketing'
}, '1fr');
row.addEmail('email', {
label: 'Work Email',
isRequired: true,
placeholder: 'jordan@company.com'
}, '1fr');
});
page5.addRow(row => {
row.addTextbox('company', {
label: 'Company Name',
placeholder: 'Growth Co.'
}, '1fr');
row.addDropdown('businessModel', {
label: 'Business Model',
options: [
{ id: 'saas', name: 'SaaS' },
{ id: 'ecommerce', name: 'E-commerce' },
{ id: 'services', name: 'Services' },
{ id: 'marketplace', name: 'Marketplace' },
{ id: 'other', name: 'Other' }
],
placeholder: 'Select model'
}, '1fr');
});
page5.addRow(row => {
row.addCheckboxList('consent', {
options: [
{ id: 'report', name: '📄 Send me the detailed CAC analysis report', isRequired: true },
{ id: 'tips', name: '💡 Send me CAC optimization tips' },
{ id: 'consultation', name: '📞 I\'d like a free growth strategy call' }
],
defaultValue: ['report'],
orientation: 'vertical'
});
});
// ============ PDF REPORT ============
form.configurePdf('cac-report', pdf => {
pdf.configure({
filename: 'cac-analysis-report.pdf',
pageSize: 'A4',
allowUserDownload: true,
downloadButtonLabel: '📄 Download CAC Report',
header: {
title: 'Customer Acquisition Cost Analysis',
subtitle: 'Unit Economics Report'
},
footer: {
text: 'Generated by FormTs CAC Calculator',
showPageNumbers: true
}
});
pdf.addSection('Executive Summary', section => {
section.addRow(row => {
row.addField('Health Status', getHealthLabel());
row.addField('LTV:CAC Ratio', `${getLTVtoCACRatio().toFixed(1)}:1`);
});
section.addRow(row => {
row.addField('CAC', formatCurrency(getCAC()));
row.addField('LTV', formatCurrency(getLTV()));
});
section.addRow(row => {
row.addField('Payback Period', `${getPaybackMonths().toFixed(1)} months`);
row.addField('Annual CAC Spend', formatCurrency(getAnnualCAC()));
});
});
pdf.addSection('Your Inputs', section => {
const i = inputs();
section.addTable(
['Metric', 'Value'],
[
['Monthly Marketing Spend', formatCurrency(i.monthlyMarketingSpend)],
['Monthly Sales Spend', formatCurrency(i.monthlySalesSpend)],
['New Customers/Month', `${i.newCustomersPerMonth}`],
['Avg Revenue/Customer', `${formatCurrency(i.avgMonthlyRevenue)}/month`],
['Avg Customer Lifetime', `${i.avgCustomerLifetime} months`]
]
);
});
pdf.addPageBreak();
pdf.addSection('Optimization Recommendations', section => {
const ratio = getLTVtoCACRatio();
if (ratio < 3) {
section.addText('🎯 PRIORITY: Improve LTV:CAC Ratio');
section.addSpacer(5);
section.addText('To reduce CAC:');
section.addText('• Optimize ad targeting and creative');
section.addText('• Improve conversion rate optimization (CRO)');
section.addText('• Invest in organic channels (SEO, content)');
section.addText('• Implement referral programs');
section.addSpacer(10);
section.addText('To increase LTV:');
section.addText('• Reduce churn with better onboarding');
section.addText('• Upsell/cross-sell existing customers');
section.addText('• Improve customer success programs');
} else {
section.addText('✅ Your unit economics are healthy!');
section.addSpacer(5);
section.addText('Consider:');
section.addText('• Scaling acquisition spend');
section.addText('• Testing new channels');
section.addText('• Expanding to new markets');
}
});
pdf.addSection('Benchmarks by Industry', section => {
section.addTable(
['Industry', 'Typical CAC', 'Target LTV:CAC'],
[
['SaaS (SMB)', '$200-$500', '3:1 to 5:1'],
['SaaS (Enterprise)', '$1,000-$5,000', '3:1 to 5:1'],
['E-commerce', '$10-$50', '3:1+'],
['B2B Services', '$500-$2,000', '3:1 to 4:1'],
['Marketplace', '$20-$100', '2:1 to 3:1']
]
);
});
});
// ============ SUBMIT BUTTON ============
form.configureSubmitButton({
label: () => `💰 Get My Report (${getLTVtoCACRatio().toFixed(1)}:1 Ratio)`
});
form.configureSubmitBehavior({
sendToServer: true
});
}