Ductwise — Free HVAC Website Template
Ductwise gives a heating and cooling company a graphite, sheet-metal look with a temperature-scale accent that runs from glacier blue to ember orange. A season switch flips the hero, emergency line, call-to-action and accent colour between heating and cooling, and picks a default from the current month. A mobile call bar keeps the 24/7 number one tap away. Visitors can estimate system size and installed cost, check a repair quote against the age of their system, compare plans and request a visit with symptoms and an arrival window.
Key features
- Heating and cooling season switch that changes the hero copy, photo, thermostat dial, emergency line and accent colour, remembered on the device
- Emergency no-heat and no-cooling line in the hero, a top strip on every page and a sticky call bar on phones
- Six service cards and a services page with symptoms, what each visit includes and example price ranges for five service areas
- Repair-or-replace check that multiplies system age by the repair quote and shows a verdict on a colour scale
- Three maintenance plans with a monthly or yearly price switch and a full comparison table
- System size and cost estimator: floor area, climate, insulation, ceiling height and system type give tons, BTU loads, a cost range and a suggested plan, clearly marked as an estimate
- Service request form with system type cards, a symptoms checklist, urgency with an emergency call prompt, date and two-hour arrival windows, validation and a live summary
- Contact page with office hours that highlight today and show open or closed, plus an illustrated service area map
- Financing example, certification badges in text only, and reviews with initials avatars and a rating breakdown
- Inline SVG icons, no icon fonts; content stays visible without JavaScript and motion respects reduced-motion settings
Best for
- HVAC contractors and heating and cooling companies
- Furnace, boiler and heat pump installers
- Air conditioning repair and maintenance businesses
- Developers who want a jQuery-free Bootstrap 5 home services starter
At a glance
- Bootstrap 5.3.8 with vanilla JavaScript, no jQuery
- 5 pages: index.html, services.html, plans.html, booking.html, contact.html
- Palette, seasonal accents and fonts set as CSS custom properties in css/style.css
- Archivo Expanded headings with IBM Plex Sans body text
- Inline SVG icons, thermostat dial and service area map; no icon fonts or chart libraries
- Free for personal and commercial use; attribution optional but welcome. Full terms: uicookies.com/license
How to use it
Unzip the folder and open index.html in a browser. Edit the copy in the five HTML files and replace the photos in img/ with your own. Colours, including the heating and cooling accents, and fonts are CSS custom properties at the top of css/style.css. Estimator rates and example prices live in small data objects in js/main.js. The booking and contact forms are front-end only, so connect a form service before launch, then upload the folder to any static host.
Frequently asked questions
Is Ductwise free for a commercial HVAC website?
Yes. Ductwise is free for personal and commercial use, including a live heating and cooling business or a client project. Attribution to uiCookies is optional but always welcome, and the full terms are on the uiCookies license page.
What is Ductwise built with?
Ductwise uses Bootstrap 5.3.8, self-hosted, with one vanilla JavaScript file and no jQuery or other libraries. Icons, the thermostat dial and the service area map are inline SVG, and every section stays readable if JavaScript is turned off.
Which pages and sections are included?
There are five pages. The home page has the seasonal hero, services, how a visit works, plans, financing, certifications, reviews and an FAQ. The services page details five service areas and a repair-or-replace check, the plans page has the comparison table and size estimator, and there are booking and contact pages.
Do the booking and contact forms send anything?
No. Both forms validate in the browser and then show a confirmation that says clearly they are front-end only. Connect a form service or your booking software before launch so requests reach your dispatch team.
How accurate is the system size and cost estimator?
It is a rule-of-thumb estimate for budgeting, and the page says so. It uses per-square-foot loads by climate with factors for insulation and ceiling height, plus example installed prices. You can change those numbers in js/main.js to match your own pricing.
