Leven Coaching

Cost Calculator

Sub headline. Please replace with the text you'd like.

<div>

<!DOCTYPE html>

<head>

<title>Leadership Development ROI Calculator - Leven Coaching</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

background: white;

padding: 20px;

min-height: 100vh;

}

.container {

max-width: 900px;

margin: 0 auto;

background: white;

}

.content {

padding: 40px 30px;

}

.section {

margin-bottom: 40px;

}

.section-title {

font-size: 22px;

color: #1AA5E2;

margin-bottom: 20px;

font-weight: 600;

border-bottom: 2px solid #1AA5E2;

padding-bottom: 10px;

}

.input-group {

margin-bottom: 20px;

}

.input-group label {

display: block;

font-size: 15px;

color: #333;

margin-bottom: 8px;

font-weight: 500;

}

.input-group input {

width: 100%;

padding: 12px 15px;

border: 2px solid #e0e0e0;

border-radius: 8px;

font-size: 16px;

transition: border-color 0.3s;

}

.input-group input:focus {

outline: none;

border-color: #1AA5E2;

}

.input-row {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 20px;

}

.result-box {

background: #1594CC;

color: white;

padding: 25px;

border-radius: 12px;

margin-bottom: 20px;

}

.result-box.success {

background: #1594CC;

}

.result-box.warning {

background: #1594CC;

}

.result-box h3 {

font-size: 18px;

margin-bottom: 10px;

font-weight: 600;

}

.result-box .amount {

font-size: 36px;

font-weight: 700;

margin-bottom: 5px;

}

.result-box .description {

font-size: 14px;

opacity: 0.9;

}

.comparison-grid {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 20px;

margin-top: 20px;

}

.comparison-card {

background: #f8f9fa;

padding: 20px;

border-radius: 10px;

border-left: 4px solid #1AA5E2;

}

.comparison-card h4 {

font-size: 16px;

color: #333;

margin-bottom: 10px;

}

.comparison-card .value {

font-size: 28px;

font-weight: 700;

color: #1AA5E2;

margin-bottom: 5px;

}

.comparison-card .label {

font-size: 13px;

color: #666;

}

.roi-summary {

background: #1AA5E2;

color: white;

padding: 30px;

border-radius: 15px;

text-align: center;

margin-top: 30px;

}

.roi-summary h2 {

font-size: 24px;

margin-bottom: 15px;

}

.roi-summary .big-number {

font-size: 48px;

font-weight: 700;

margin-bottom: 10px;

}

.roi-summary .subtitle {

font-size: 16px;

opacity: 0.9;

}

.cta-section {

background: #f8f9fa;

padding: 30px;

border-radius: 15px;

text-align: center;

margin-top: 30px;

}

.cta-section h3 {

font-size: 22px;

color: #333;

margin-bottom: 15px;

}

.cta-section p {

font-size: 16px;

color: #666;

margin-bottom: 20px;

}

.cta-button {

display: inline-block;

background: #1AA5E2;

color: white;

padding: 15px 40px;

border-radius: 30px;

text-decoration: none;

font-weight: 600;

font-size: 16px;

transition: transform 0.3s, box-shadow 0.3s;

border: none;

cursor: pointer;

}

.cta-button:hover {

transform: translateY(-2px);

box-shadow: 0 10px 25px rgba(26, 165, 226, 0.4);

}

.benefits-list {

background: #f8f9fa;

padding: 25px;

border-radius: 10px;

margin-top: 20px;

}

.benefits-list h4 {

font-size: 18px;

color: #333;

margin-bottom: 15px;

font-weight: 600;

}

.benefits-list ul {

list-style: none;

}

.benefits-list li {

padding: 8px 0;

padding-left: 25px;

position: relative;

color: #555;

font-size: 15px;

}

.benefits-list li:before {

content: "✓";

position: absolute;

left: 0;

color: #1AA5E2;

font-weight: bold;

}

.modal {

display: none;

position: fixed;

z-index: 1000;

left: 0;

top: 0;

width: 100%;

height: 100%;

background-color: rgba(0,0,0,0.5);

}

.modal.active {

display: flex;

align-items: center;

justify-content: center;

}

.modal-content {

background: white;

padding: 40px;

border-radius: 15px;

max-width: 500px;

width: 90%;

box-shadow: 0 20px 60px rgba(0,0,0,0.3);

}

.modal-content h2 {

font-size: 24px;

color: #333;

margin-bottom: 15px;

}

.modal-content p {

font-size: 16px;

color: #666;

margin-bottom: 25px;

}

.modal-content input {

width: 100%;

padding: 12px 15px;

border: 2px solid #e0e0e0;

border-radius: 8px;

font-size: 16px;

margin-bottom: 20px;

transition: border-color 0.3s;

}

.modal-content input:focus {

outline: none;

border-color: #1AA5E2;

}

.modal-buttons {

display: flex;

gap: 15px;

}

.modal-buttons button {

flex: 1;

padding: 12px 25px;

border-radius: 8px;

font-size: 16px;

font-weight: 600;

cursor: pointer;

transition: all 0.3s;

}

.modal-buttons .submit-btn {

background: #1AA5E2;

color: white;

border: none;

}

.modal-buttons .submit-btn:hover {

background: #1590c8;

}

.modal-buttons .cancel-btn {

background: #f0f0f0;

color: #333;

border: none;

}

.modal-buttons .cancel-btn:hover {

background: #e0e0e0;

}

.success-message {

display: none;

background: #d4edda;

color: #155724;

padding: 20px;

border-radius: 8px;

margin-top: 20px;

border: 1px solid #c3e6cb;

}

.success-message.active {

display: block;

}

@media (max-width: 768px) {

.input-row, .comparison-grid {

grid-template-columns: 1fr;

}

.header h1 {

font-size: 24px;

}

.result-box .amount {

font-size: 28px;

}

.roi-summary .big-number {

font-size: 36px;

}

</style>

</head>

<body>

<h2 class="section-title">1. Company Profile</h2>

<label for="numManagers">Number of Managers/Leaders</label>

</div>

<label for="avgManagerSalary">Average Manager Salary ($)</label>

</div>

<label for="totalEmployees">Total Number of Employees</label>

</div>

<label for="avgEmployeeSalary">Average Employee Salary ($)</label>

</div>

<label for="turnoverRate">Annual Voluntary Turnover Rate (%)</label>

</div>

<label for="avgTeamSize">Average Team Size per Manager</label>

</div>

<h2 class="section-title">2. Manager Turnover & Performance Issues</h2>

<label for="managersLeft">Managers Who Left (Last 12 Months)</label>

</div>

<label for="strugglingPct">% of Managers "Struggling" or Need Development</label>

</div>

<h2 class="section-title">3. Coaching Investment</h2>

<label for="leadersCoached">Number of Leaders to Coach</label>

</div>

<div style="font-size: 14px; color: #666; margin-bottom: 5px;">Total Annual Coaching Investment</div>

<div style="font-size: 13px; color: #888; margin-top: 5px;">@ $5,000 per leader annually</div>

</div>

<h2 class="section-title">Your Results</h2>

<h3>Cost of Manager Turnover (Last 12 Months)</h3>

<div class="description">Includes recruiting, training, lost productivity, and team impact</div>

</div>

<h3>Annual Cost of Underperforming Managers</h3>

<div class="description">Team disengagement, excess turnover, and reduced productivity</div>

</div>

<h3>Total Annual Leadership Problem Cost</h3>

<div class="description">What you're losing every year to underdeveloped leadership</div>

</div>

<h4>Cost Per Manager Coached</h4>

<div class="label">Annual investment per person</div>

</div>

<h4>Break-Even Point</h4>

<div class="label">Manager departures prevented needed</div>

</div>

<h2>Your Potential ROI</h2>

<div class="subtitle">Conservative estimate with 25% improvement in manager performance</div>

<strong>Potential Annual Savings: <span id="annualSavings">$0</span></strong>

</div>

<h4>Qualitative Benefits Not Quantified Above:</h4>

<ul>

<li>Improved employee engagement scores</li>

<li>Stronger succession pipeline and bench strength</li>

<li>Better culture and team morale</li>

<li>Reduced HR firefighting time</li>

<li>Competitive advantage in talent attraction</li>

<li>Knowledge retention and institutional memory</li>

<li>Faster time-to-productivity for new managers</li>

<li>Enhanced leadership brand and reputation</li>

</ul>

</div>

<h3>Ready to Stop Losing Leaders and Start Developing Them?</h3>

<p>Get your personalized ROI report sent to your inbox and schedule a free 30-minute Leadership Development Audit.</p>

<button class="cta-button" onclick="openEmailModal()">Get My ROI Report</button>

✓ Success! Your ROI report has been sent to your email. We'll be in touch soon!

</div>

<h2>Get Your ROI Report</h2>

<p>Enter your email to receive a detailed PDF of your leadership development ROI analysis.</p>

<button class="cancel-btn" onclick="closeEmailModal()">Cancel</button>

<button class="submit-btn" onclick="submitEmail()">Send My Report</button>

</div>

// Get all input elements

const inputs = {

numManagers: document.getElementById('numManagers'),

avgManagerSalary: document.getElementById('avgManagerSalary'),

totalEmployees: document.getElementById('totalEmployees'),

avgEmployeeSalary: document.getElementById('avgEmployeeSalary'),

turnoverRate: document.getElementById('turnoverRate'),

avgTeamSize: document.getElementById('avgTeamSize'),

managersLeft: document.getElementById('managersLeft'),

strugglingPct: document.getElementById('strugglingPct'),

leadersCoached: document.getElementById('leadersCoached')

};

// Get result elements

const results = {

turnoverCost: document.getElementById('turnoverCost'),

underperformCost: document.getElementById('underperformCost'),

totalProblemCost: document.getElementById('totalProblemCost'),

costPerLeader: document.getElementById('costPerLeader'),

breakEven: document.getElementById('breakEven'),

roiPercent: document.getElementById('roiPercent'),

annualSavings: document.getElementById('annualSavings'),

coachingCostDisplay: document.getElementById('coachingCostDisplay')

};

function formatCurrency(amount) {

return '$' + Math.round(amount).toLocaleString();

}

function formatPercent(percent) {

return Math.round(percent) + '%';

}

function calculate() {

// Get input values

const numManagers = parseInt(inputs.numManagers.value) || 0;

const avgManagerSalary = parseInt(inputs.avgManagerSalary.value) || 0;

const totalEmployees = parseInt(inputs.totalEmployees.value) || 0;

const avgEmployeeSalary = parseInt(inputs.avgEmployeeSalary.value) || 0;

const turnoverRate = parseFloat(inputs.turnoverRate.value) || 0;

const avgTeamSize = parseInt(inputs.avgTeamSize.value) || 0;

const managersLeft = parseInt(inputs.managersLeft.value) || 0;

const strugglingPct = parseFloat(inputs.strugglingPct.value) || 0;

const leadersCoached = parseInt(inputs.leadersCoached.value) || 1;

// Calculate coaching cost at $5,000 per leader

const coachingCost = leadersCoached * 5000;

// Update coaching cost display

results.coachingCostDisplay.textContent = formatCurrency(coachingCost);

// Calculate cost per manager turnover

const recruitingCost = 8000;

const interviewCost = 3500;

const onboardingCost = 5000;

const lostProductivity = (avgManagerSalary * 0.5 * (60/365)) + (avgEmployeeSalary * avgTeamSize * 0.2 * (60/365));

const directCost = recruitingCost + interviewCost + onboardingCost + lostProductivity;

const teamProductivityDecline = avgEmployeeSalary * avgTeamSize * 0.2 * (3/12);

const knowledgeLoss = avgManagerSalary * 0.15;

const culturalImpact = 5000;

const indirectCost = teamProductivityDecline + knowledgeLoss + culturalImpact;

const costPerManagerTurnover = directCost + indirectCost;

const totalTurnoverCost = costPerManagerTurnover * managersLeft;

// Calculate cost per struggling manager

const strugglingManagers = Math.round(numManagers * (strugglingPct / 100));

const excessTurnoverCost = avgTeamSize * 0.15 * (avgEmployeeSalary * 1.5);

const lostTeamProductivity = avgTeamSize * avgEmployeeSalary * 0.15;

const managerProductivityLoss = avgManagerSalary * 0.30;

const costPerStrugglingManager = excessTurnoverCost + lostTeamProductivity + managerProductivityLoss;

const totalUnderperformCost = costPerStrugglingManager * strugglingManagers;

// Total problem cost

const totalProblemCost = totalTurnoverCost + totalUnderperformCost;

// Coaching metrics

const costPerLeader = coachingCost / leadersCoached;

const breakEven = Math.ceil(coachingCost / costPerManagerTurnover * 10) / 10;

// ROI calculation (conservative: 25% improvement)

const preventedTurnover = Math.max(1, managersLeft * 0.25);

const improvedManagers = strugglingManagers * 0.25;

const savings = (preventedTurnover * costPerManagerTurnover) + (improvedManagers * costPerStrugglingManager);

const netBenefit = savings - coachingCost;

const roi = coachingCost > 0 ? (netBenefit / coachingCost) * 100 : 0;

// Update results

results.turnoverCost.textContent = formatCurrency(totalTurnoverCost);

results.underperformCost.textContent = formatCurrency(totalUnderperformCost);

results.totalProblemCost.textContent = formatCurrency(totalProblemCost);

results.costPerLeader.textContent = formatCurrency(costPerLeader);

results.breakEven.textContent = breakEven.toFixed(1);

results.roiPercent.textContent = formatPercent(roi);

results.annualSavings.textContent = formatCurrency(savings);

}

// Add event listeners to all inputs

Object.values(inputs).forEach(input => {

input.addEventListener('input', calculate);

});

// Initial calculation

calculate();

// Email Modal Functions

function openEmailModal() {

document.getElementById('emailModal').classList.add('active');

}

function closeEmailModal() {

document.getElementById('emailModal').classList.remove('active');

}

function submitEmail() {

const name = document.getElementById('userName').value.trim();

const email = document.getElementById('userEmail').value.trim();

const company = document.getElementById('userCompany').value.trim();

if (!name || !email) {

alert('Please enter your name and email address.');

return;

}

// Basic email validation

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!emailRegex.test(email)) {

alert('Please enter a valid email address.');

return;

}

// Collect all the calculator data

const calculatorData = {

name: name,

email: email,

company: company,

inputs: {

numManagers: inputs.numManagers.value,

avgManagerSalary: inputs.avgManagerSalary.value,

totalEmployees: inputs.totalEmployees.value,

avgEmployeeSalary: inputs.avgEmployeeSalary.value,

turnoverRate: inputs.turnoverRate.value,

avgTeamSize: inputs.avgTeamSize.value,

managersLeft: inputs.managersLeft.value,

strugglingPct: inputs.strugglingPct.value,

leadersCoached: inputs.leadersCoached.value

results: {

turnoverCost: results.turnoverCost.textContent,

underperformCost: results.underperformCost.textContent,

totalProblemCost: results.totalProblemCost.textContent,

coachingCost: results.coachingCostDisplay.textContent,

costPerLeader: results.costPerLeader.textContent,

breakEven: results.breakEven.textContent,

roiPercent: results.roiPercent.textContent,

annualSavings: results.annualSavings.textContent

timestamp: new Date().toISOString()

};

// Send to your email service

// OPTION 1: Using a form service like Formspree

sendViaFormspree(calculatorData);

// OPTION 2: Using your own email service (uncomment and configure)

// sendViaCustomService(calculatorData);

// Close modal and show success message

closeEmailModal();

document.getElementById('successMessage').classList.add('active');

// Reset form

document.getElementById('userName').value = '';

document.getElementById('userEmail').value = '';

document.getElementById('userCompany').value = '';

}

function sendViaFormspree(data) {

// Replace YOUR_FORMSPREE_ID with your actual Formspree form ID

// Get one free at https://formspree.io

const formspreeEndpoint = 'https://formspree.io/f/YOUR_FORMSPREE_ID';

fetch(formspreeEndpoint, {

method: 'POST',

headers: {

'Content-Type': 'application/json'

body: JSON.stringify({

_subject: `New ROI Calculator Lead: ${data.name}`,

_replyto: data.email,

name: data.name,

email: data.email,

company: data.company,

data: JSON.stringify(data, null, 2)

})

.then(response => {

if (!response.ok) {

console.error('Error sending email');

}

})

.catch(error => {

console.error('Error:', error);

});

}

// Alternative: Send to your own backend

function sendViaCustomService(data) {

// Replace with your actual API endpoint

fetch('https://your-domain.com/api/roi-calculator', {

method: 'POST',

headers: {

'Content-Type': 'application/json'

body: JSON.stringify(data)

})

.then(response => response.json())

.then(result => {

console.log('Success:', result);

})

.catch(error => {

console.error('Error:', error);

});

}

// Close modal when clicking outside

window.onclick = function(event) {

const modal = document.getElementById('emailModal');

if (event.target === modal) {

closeEmailModal();

}

</script>

</body>

</html>

</div>