Before
A phone number, a list of services and a generic contact form — every lead needs a call back just to learn the basics.
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.
Live demo
Click through the working build — every form, filter and calculator runs in your browser.
Guide: HVAC & Contractor Websites That Turn Visits into Service Calls
Industry
Home services
Services
Website & Software Development
Delivery record
Showcase build · live demo
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.
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
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.
Visual evidence
Delivery timeline
Phase 1
Phase 1: Lead-qualification flow, content and visual system
Phase 2
Phase 2: Service-area check, estimate and financing calculator, booking logic
Phase 3
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.