Mainline — Free Plumbing Website Template
Mainline gives a plumbing company a clean, light website in deep navy and clear aqua, with Sora headings, wave-line details and hi-vis yellow kept for the emergency band. Prices are the point: call-out fees switch to the current time band, example jobs carry real price ranges, and the booking form moves a gauge needle as the customer picks the problem, urgency, time window and postcode. A sticky Call now bar keeps the phone number under the thumb on mobile, and the area map and postcode checker answer the first question every caller asks.
Key features
- Hi-vis yellow emergency band with three steps to take before calling and a large tap-to-call number
- Call-out fee board with daytime, evening and night tabs that opens on the band for the current time
- Example job list with job numbers, typical durations and price ranges
- Booking board in the hero showing the next free slot and the call-out fee for the current time
- Booking form with problem cards, urgency, time windows, address, up to four photo previews and a front-end success state with a reference number
- Live price estimate with an SVG gauge needle and a breakdown of dispatch, out-of-hours and travel fees
- Postcode checker on the home and areas pages, driven by a small district list in js/main.js
- Illustrated SVG service map with twelve clickable, keyboard-accessible districts in three travel zones
- Services page with sticky section chips, what-is-included lists and price tables for six services
- Sticky Call now and Book online bar on mobile, plus office hours with an open-now status on the contact page
Best for
- Local plumbing companies and sole-trader plumbers
- Drain clearance and leak detection specialists
- Bathroom and kitchen installers who publish their prices
- Emergency plumbing services with a 24-hour phone line
At a glance
- Bootstrap 5.3.8 with vanilla JavaScript, no jQuery
- 5 pages: index.html, services.html, booking.html, areas.html, contact.html
- Palette and fonts set as CSS custom properties in css/style.css
- Sora headings with Public Sans body text
- Inline SVG icons, wave dividers, service map, price gauge and guarantee seal; 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 and fonts are CSS custom properties at the top of css/style.css. Call-out fees, travel zones, postcode districts and job price ranges are small lists at the top of js/main.js. The booking and contact forms are front-end only, so connect them to a form service, then upload the folder to any static host.
Frequently asked questions
Is Mainline free for a plumbing business or a client site?
Yes. Mainline is free for personal and commercial use, including a live plumbing website or a client build. Attribution to uiCookies is optional but always welcome, and the full terms are on the uiCookies license page.
What is Mainline built with?
Mainline uses Bootstrap 5.3.8, self-hosted, and one vanilla JavaScript file with no jQuery or other libraries. Icons, the service map, the estimate gauge and the guarantee seal are inline SVG, and every section stays readable with JavaScript turned off.
Which pages are included?
There are five pages. The home page covers emergencies, services, prices, areas, licensing and guarantee, reviews and a FAQ. The services page lists six services with prices, the booking page has the estimate form, the areas page has the district map and postcode checker, and the contact page has the message form and office hours.
How do I change the prices and postcodes?
Open js/main.js. The call-out fee bands, travel zones, postcode districts and the price range for each job type are short lists at the top of the file. The booking estimate, postcode checkers and the district card all read from them, so the prices shown in the HTML should be updated to match.
Does the booking form send bookings or upload photos?
No. The form validates in the browser, shows photo previews and a success message with a reference number, but nothing leaves the page. Point it at a form service or booking system that accepts file uploads before taking real bookings.
