Insurance Quote Form: Auto, Home & Life Insurance Calculators

Insurance quotes involve complex risk calculations that most form builders can't handle. Age, driving history, property value, coverage levels - each factor affects the premium differently. Here's how to build quote forms that calculate accurate estimates in real time.

The insurance industry runs on risk assessment. Every quote is a calculation: take the base rate, multiply by risk factors, adjust for coverage selections, and show the result. Visual form builders struggle with this because the logic branches in too many directions.

We'll build forms for auto, home, and life insurance - the three most common types. Each has different data requirements and pricing models, but they all follow the same pattern: collect information, assess risk, calculate premium.

The Basic Structure

Start with insurance type selection. This determines which sections appear next. A single form can handle multiple insurance types by showing the relevant fields based on user selection.

const coverageSection = form.addSubform('coverage', {
    title: 'Coverage Details'
});

coverageSection.addRow(row => {
    row.addDropdown('insuranceType', {
        label: 'Insurance Type',
        options: [
            { id: 'auto', name: 'Auto Insurance' },
            { id: 'home', name: 'Home Insurance' },
            { id: 'life', name: 'Life Insurance' },
            { id: 'health', name: 'Health Insurance' }
        ],
        isRequired: true
    });
});

Each insurance type has its own section that appears only when selected. This keeps the form focused - users see only the fields relevant to their quote request.

Auto Insurance: Vehicle and Driver Data

Auto insurance quotes need vehicle details and driver information. The vehicle's age, make, and usage pattern all affect the premium. So does the driver's age, gender, and driving history.

Vehicle Information

const autoSection = form.addSubform('auto', {
    title: 'Vehicle Information',
    isVisible: () => insuranceType.value() === 'auto'
});

autoSection.addRow(row => {
    row.addDropdown('vehicleYear', {
        label: 'Vehicle Year',
        options: generateYearOptions(1990, 2026),
        isRequired: () => insuranceType.value() === 'auto'
    });
    row.addTextbox('vehicleMake', {
        label: 'Make',
        placeholder: 'e.g., Toyota',
        isRequired: () => insuranceType.value() === 'auto'
    });
    row.addTextbox('vehicleModel', {
        label: 'Model',
        placeholder: 'e.g., Camry',
        isRequired: () => insuranceType.value() === 'auto'
    });
});

autoSection.addRow(row => {
    row.addInteger('annualMileage', {
        label: 'Annual Mileage',
        min: 0,
        max: 100000,
        defaultValue: 12000
    });
    row.addDropdown('usage', {
        label: 'Primary Use',
        options: [
            { id: 'commute', name: 'Commute to Work' },
            { id: 'pleasure', name: 'Pleasure/Personal' },
            { id: 'business', name: 'Business Use' }
        ]
    });
});

Notice the isVisible and isRequired conditions. The entire section only appears for auto insurance, and fields are only required when visible. This prevents validation errors for hidden fields.

Driver Information

Driver details matter more than vehicle details for pricing. A 19-year-old in a Honda Civic pays more than a 45-year-old in a sports car - age is that significant a risk factor.

const driversSection = form.addSubform('drivers', {
    title: 'Driver Information',
    isVisible: () => insuranceType.value() === 'auto'
});

const driverCount = form.state(1);

driversSection.addRow(row => {
    row.addInteger('driverCount', {
        label: 'Number of Drivers',
        min: 1,
        max: 6,
        defaultValue: 1,
        onValueChange: (val) => driverCount.set(val ?? 1)
    });
});

// Primary driver always shown
driversSection.addRow(row => {
    row.addDatepicker('driverDob', {
        label: 'Date of Birth',
        maxDate: () => subtractYears(new Date(), 16).toISOString()
    });
    row.addDropdown('driverGender', {
        label: 'Gender',
        options: [
            { id: 'male', name: 'Male' },
            { id: 'female', name: 'Female' }
        ]
    });
});

driversSection.addRow(row => {
    row.addCheckbox('hasAccidents', {
        label: 'Any accidents in the past 5 years?'
    });
    row.addCheckbox('hasViolations', {
        label: 'Any traffic violations in the past 3 years?'
    });
});

The date picker's maxDate ensures drivers are at least 16. Checkboxes for accidents and violations are simple yes/no but have major pricing impact.

Home Insurance: Property Assessment

Home insurance pricing depends on the property itself - type, age, size, and value. Older homes cost more to insure because of outdated wiring, plumbing, and materials.

const homeSection = form.addSubform('home', {
    title: 'Property Information',
    isVisible: () => insuranceType.value() === 'home'
});

homeSection.addRow(row => {
    row.addDropdown('propertyType', {
        label: 'Property Type',
        options: [
            { id: 'single-family', name: 'Single Family Home' },
            { id: 'condo', name: 'Condo/Townhouse' },
            { id: 'multi-family', name: 'Multi-Family' },
            { id: 'mobile', name: 'Mobile Home' }
        ]
    });
    row.addInteger('yearBuilt', {
        label: 'Year Built',
        min: 1900,
        max: 2026
    });
});

homeSection.addRow(row => {
    row.addInteger('squareFootage', {
        label: 'Square Footage',
        min: 100,
        max: 50000
    });
    row.addMoney('homeValue', {
        label: 'Estimated Home Value',
        currency: '$',
        min: 50000,
        max: 10000000
    });
});

The money field for home value handles currency formatting automatically. Min/max constraints prevent obviously invalid entries like $100 homes or $1 billion mansions.

Coverage Selection

Insurance isn't one-size-fits-all. Users choose coverage levels that balance protection against cost. Higher liability limits and lower deductibles mean higher premiums.

const coverageOptions = form.addSubform('coverageOptions', {
    title: 'Coverage Options',
    isVisible: () => insuranceType.value() === 'auto'
});

coverageOptions.addRow(row => {
    row.addDropdown('liability', {
        label: 'Liability Coverage',
        options: [
            { id: '50-100', name: '$50,000/$100,000' },
            { id: '100-300', name: '$100,000/$300,000' },
            { id: '250-500', name: '$250,000/$500,000' }
        ],
        defaultValue: '100-300'
    });
});

coverageOptions.addRow(row => {
    row.addDropdown('deductible', {
        label: 'Deductible',
        options: [
            { id: '250', name: '$250' },
            { id: '500', name: '$500' },
            { id: '1000', name: '$1,000' },
            { id: '2500', name: '$2,500' }
        ],
        defaultValue: '500'
    });
});

coverageOptions.addRow(row => {
    row.addCheckbox('comprehensive', {
        label: 'Comprehensive Coverage',
        defaultValue: true
    });
    row.addCheckbox('collision', {
        label: 'Collision Coverage',
        defaultValue: true
    });
});

Deductible selection is a key pricing lever. A $2,500 deductible significantly reduces the premium compared to $250, but means more out-of-pocket cost when filing a claim.

Real-Time Premium Calculation

Here's where the form becomes a calculator. Every field change triggers a premium recalculation. Users see exactly how their choices affect the price.

// Base rates by insurance type
const baseRates: Record<string, number> = {
    'auto': 1200,
    'home': 800,
    'life': 400,
    'health': 350
};

// Risk multipliers
const getAutoMultiplier = () => {
    let multiplier = 1;

    // Age-based adjustment
    const age = calculateAge(driverDob.value());
    if (age < 25) multiplier *= 1.5;
    else if (age > 65) multiplier *= 1.2;

    // Usage adjustment
    if (usage.value() === 'business') multiplier *= 1.3;

    // Mileage adjustment
    const miles = annualMileage.value() ?? 12000;
    if (miles > 20000) multiplier *= 1.2;

    // Accident/violation history
    if (hasAccidents.value()) multiplier *= 1.4;
    if (hasViolations.value()) multiplier *= 1.25;

    return multiplier;
};

const getHomeMultiplier = () => {
    let multiplier = 1;

    // Property age adjustment
    const age = 2026 - (yearBuilt.value() ?? 2000);
    if (age > 50) multiplier *= 1.3;
    else if (age > 25) multiplier *= 1.15;

    // Value-based adjustment
    const value = homeValue.value() ?? 250000;
    multiplier *= value / 250000;

    return multiplier;
};

// Computed annual premium
pricingSection.addRow(row => {
    row.addPriceDisplay('annualPremium', {
        label: 'Estimated Annual Premium',
        computedValue: () => {
            const type = insuranceType.value();
            if (!type) return null;

            const base = baseRates[type];
            let multiplier = 1;

            if (type === 'auto') multiplier = getAutoMultiplier();
            else if (type === 'home') multiplier = getHomeMultiplier();

            return base * multiplier;
        },
        variant: 'highlight',
        suffix: '/year'
    });
});

The pricing logic uses multipliers that compound. A 24-year-old with an accident history who drives for business could see a multiplier of 1.5 × 1.4 × 1.3 = 2.73x the base rate. That's $3,276 instead of $1,200.

Multi-Policy Discounts

Bundling policies is a major sales driver. If someone already has auto insurance, offer a discount on home insurance. Track which policies they're interested in and apply bundle pricing.

const bundleDiscount = () => {
    const types = selectedTypes.value() ?? [];
    if (types.length >= 3) return 0.85; // 15% off for 3+
    if (types.length === 2) return 0.90; // 10% off for 2
    return 1;
};

pricingSection.addRow(row => {
    row.addCheckboxList('selectedTypes', {
        label: 'Policies You Need',
        options: [
            { id: 'auto', name: 'Auto Insurance' },
            { id: 'home', name: 'Home Insurance' },
            { id: 'life', name: 'Life Insurance' }
        ]
    });
});

pricingSection.addRow(row => {
    row.addPriceDisplay('bundleTotal', {
        label: 'Bundle Price',
        computedValue: () => {
            const total = calculateTotalPremium();
            return total * bundleDiscount();
        },
        originalPrice: () => calculateTotalPremium(),
        variant: 'success'
    });
});

The originalPrice property shows a strikethrough price, making the bundle discount visually obvious. Green "success" variant reinforces the savings.

Lead Capture and Follow-Up

Insurance quotes are leads, not sales. The form should capture contact information and buying intent for agent follow-up.

const contactSection = form.addSubform('contact', {
    title: 'Get Your Official Quote'
});

contactSection.addRow(row => {
    row.addTextbox('fullName', {
        label: 'Full Name',
        isRequired: true
    });
    row.addEmail('email', {
        label: 'Email',
        isRequired: true
    });
});

contactSection.addRow(row => {
    row.addTextbox('phone', {
        label: 'Phone Number',
        pattern: '^[0-9\\-\\+\\(\\)\\s]+$'
    });
    row.addDropdown('contactPreference', {
        label: 'Preferred Contact Method',
        options: [
            { id: 'email', name: 'Email' },
            { id: 'phone', name: 'Phone Call' },
            { id: 'text', name: 'Text Message' }
        ]
    });
});

contactSection.addRow(row => {
    row.addDropdown('timeline', {
        label: 'When do you need coverage?',
        options: [
            { id: 'immediate', name: 'Immediately' },
            { id: '30-days', name: 'Within 30 days' },
            { id: '60-days', name: 'Within 60 days' },
            { id: 'shopping', name: 'Just shopping around' }
        ]
    });
});

The timeline question helps prioritize leads. "Immediately" gets a callback today. "Just shopping around" goes to the nurture sequence.

Compliance Disclaimers

Insurance is heavily regulated. Quotes must include disclaimers about accuracy, not being binding offers, and privacy policy links. Add these as text panels that don't require user interaction.

form.addRow(row => {
    row.addTextPanel('disclaimer', {
        computedValue: () => `This quote is an estimate only and does not constitute
            an offer of insurance. Final premiums are subject to
            underwriting review and may differ based on credit history,
            claims history, and other factors. Coverage is not bound
            until an application is approved and payment is received.`,
        customStyles: {
            'font-size': '12px',
            'color': '#666',
            'margin-top': '20px'
        }
    });
});

Life Insurance: Health Questions

Life insurance quotes require health information that other types don't. Age, smoking status, and health conditions significantly affect premiums.

const lifeSection = form.addSubform('life', {
    title: 'Health Information',
    isVisible: () => insuranceType.value() === 'life'
});

lifeSection.addRow(row => {
    row.addDatepicker('dateOfBirth', {
        label: 'Date of Birth',
        isRequired: () => insuranceType.value() === 'life'
    });
    row.addDropdown('gender', {
        label: 'Gender',
        options: [
            { id: 'male', name: 'Male' },
            { id: 'female', name: 'Female' }
        ]
    });
});

lifeSection.addRow(row => {
    row.addRadioButton('smokingStatus', {
        label: 'Tobacco Use (past 12 months)',
        options: [
            { id: 'never', name: 'Never used' },
            { id: 'former', name: 'Former user (quit 12+ months ago)' },
            { id: 'current', name: 'Current user' }
        ],
        orientation: 'vertical'
    });
});

lifeSection.addRow(row => {
    row.addMoney('coverageAmount', {
        label: 'Coverage Amount',
        currency: '$',
        min: 50000,
        max: 5000000,
        step: 50000,
        defaultValue: 500000
    });
    row.addDropdown('termLength', {
        label: 'Term Length',
        options: [
            { id: '10', name: '10 Years' },
            { id: '20', name: '20 Years' },
            { id: '30', name: '30 Years' }
        ],
        defaultValue: '20'
    });
});

Smoking status is the biggest life insurance factor after age. A smoker might pay 2-3x what a non-smoker pays for the same coverage. Former smokers get intermediate rates.

Putting It All Together

A complete insurance quote form combines all these elements: insurance type selection, type-specific data collection, coverage options, real-time pricing, and lead capture. The form adapts based on selections, showing only relevant fields.

The key is reactive pricing that updates instantly. Every field change recalculates the premium so users understand how their choices affect cost. This transparency builds trust and helps users make informed decisions.