# HVAC company website with instant quote calculator

Northline Heating & Cooling — a home-services site with a postal-code service-area check, install price calculator with financing, maintenance plans and arrival-window booking, in about 11.2 KB of gzipped code.

> home-services · 2026-09-29T15:05:19.089Z

Project overview

Northline is a fictional heating and cooling contractor we built as a showcase for trades and home-services businesses. Homeowners want three things fast: do you service my area, roughly what will it cost, and when can someone come. The site answers each in seconds, and routes true emergencies straight to the phone.

[Open the live Northline demo](/demos/northline/index.html)

Client context

  - Industry: Home services / HVAC

  - Client size / environment: Local contractor — showcase build, fictional brand

  - Primary stakeholders: Dispatch, sales techs, homeowners on a phone

Challenge

Contractor sites are often slow, generic and end in a “request a quote” form that nobody answers quickly. We needed a site that qualifies the lead before it reaches dispatch — area, system, rough budget, preferred window — and still pushes no-heat emergencies to a phone call, not an inbox.

Scope delivered

  - Postal-code service-area check with neighbourhood names and the next open window

  - Install estimate: system type, home size, age and duct condition, giving a price range and monthly financing (amortized)

  - Honest furnace vs heat pump vs dual-fuel comparison table

  - Maintenance plan tiers and service cards that pre-select the booking type

  - Booking with arrival windows, validation, reference number — and urgent no-heat requests routed to phone

  - 24/7 emergency bar, sticky mobile call bar, self-hosted fonts, CSP-compatible build

Before / after

  - Before: A phone number, a list of services and a generic contact form — every lead needs a call back just to learn the basics.

  - After: Homeowners confirm coverage, see a realistic price range and monthly payment, and pick an arrival window. Dispatch receives a qualified request. About 11.2 KB of gzipped HTML, CSS and JavaScript.

Mobile — 390px layout, open menu and the sticky call bar
Desktop — emergency bar, headline and postal-code service check

Visual proof placeholders

  - 17 automated browser checks — postal-code validation and coverage, estimate recalculation, financing, service pre-selection, booking validation, urgent routing, mobile call bar

  - No horizontal overflow at 390px; zero JavaScript errors on desktop and mobile

  - Runs under the same strict Content Security Policy as this website

Delivery timeline

  - Phase 1: Lead-qualification flow, content and visual system

  - Phase 2: Service-area check, estimate and financing calculator, booking logic

  - Phase 3: Mobile pass, accessibility, automated QA and screenshots

Outcome

A contractor website that turns visits into qualified requests and keeps emergencies on the phone. The estimate and booking steps are ready to connect to a field-service or CRM system.

Technology stack

HTML5, CSS Grid/Flexbox, vanilla JavaScript, self-hosted fonts, WebP images, Playwright automated browser QA.

Visual evidence

Estimate — price range and monthly payment update as you change inputs
Services — each card links to a pre-filled booking
Furnace or heat pump — a plain comparison for cold climates
Maintenance plans — three tiers, cancel anytime
Recent jobs — neighbourhood and system type
Booking — arrival windows, validation and a reference number

---
Source page: https://amensecurity.ca/en/projects/hvac-website-quote-calculator
Markdown version for AI agents · Amen Security
Email: info@amensecurity.ca
Phone: +1 (204) 514-3536