Developing an Online Calculator
An online calculator is one of the most effective lead generation tools on a website. A visitor enters project data, sees an approximate cost or calculation result, and is highly likely to leave a contact. Calculator pages have 2–5x higher conversion than static price lists.
Calculator types
Cost — "How much will website development / repair / SEO cost". Parameters are refined step by step, final number is a range.
ROI / Payback — "How much you'll save / earn with our product". Current metrics are entered, savings are output.
Technical — mortgage calculator, material calculation, unit converter. Formula is fixed.
Quiz with result — "We'll match a plan for you". Multi-step form, result is recommendation.
Formula architecture
Formula is calculated on client in real-time. For complex formulas with branching, describe logic as config rather than hardcode if-else:
interface CalculatorConfig {
inputs: InputDefinition[];
formula: FormulaDefinition;
output: OutputDefinition;
}
interface InputDefinition {
id: string;
type: 'number' | 'select' | 'checkbox' | 'range' | 'toggle';
label: string;
default: number | string | boolean;
min?: number;
max?: number;
step?: number;
options?: { value: string; label: string; multiplier?: number }[];
}
type FormulaFn = (inputs: Record<string, number>) => number;
Example config for website cost calculator:
const websiteCalculator: CalculatorConfig = {
inputs: [
{
id: 'page_count',
type: 'range',
label: 'Number of pages',
default: 5,
min: 1,
max: 50,
step: 1,
},
{
id: 'site_type',
type: 'select',
label: 'Site type',
default: 'landing',
options: [
{ value: 'landing', label: 'Landing page', multiplier: 1 },
{ value: 'corporate', label: 'Corporate', multiplier: 1.8 },
{ value: 'ecommerce', label: 'E-commerce', multiplier: 3 },
{ value: 'custom', label: 'Complex project', multiplier: 5 },
],
},
{
id: 'has_cms',
type: 'toggle',
label: 'Content Management System (CMS)',
default: false,
},
{
id: 'has_seo',
type: 'checkbox',
label: 'SEO optimization',
default: false,
},
],
};
Calculation result
const calculate = (inputs: Record<string, number | string | boolean>): CalculationResult => {
const basePrice = 50_000;
const typeMultipliers: Record<string, number> = {
landing: 1,
corporate: 1.8,
ecommerce: 3,
custom: 5,
};
const pageCount = inputs.page_count as number;
const siteType = inputs.site_type as string;
const hasCms = inputs.has_cms as boolean;
const hasSeo = inputs.has_seo as boolean;
let price = basePrice * typeMultipliers[siteType] * (1 + (pageCount - 5) * 0.1);
if (hasCms) price += 15_000;
if (hasSeo) price += 25_000;
return {
total: Math.round(price),
breakdown: [
{ label: 'Base price', value: basePrice },
{ label: 'Site type multiplier', value: price - basePrice },
],
};
};