Free plumber website template

Live demo Download ZIP Build without code GitHub

Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.

MIT license · Made by 8B, an AI website builder · Plain text: ferrule.md, data: ferrule.json

Plumber website template: first screen on a phone

About this plumber website template

Plumber website template: one free HTML page for a plumbing and heating firm, with seven services, eight prices, a five-step visit, recent jobs, the engineers, boiler or heat pump advice, an emergency number and a call-back form. Condensed capitals fill the width, blue for cold work, orange for hot. Claude Code, Cursor or Codex adapt it through AGENTS.md.

At a glance, October 2026. One 103 KB index.html with its CSS and JavaScript inside, 13 sections, 19 Unsplash photos credited in CREDITS.md, Geist and Instrument Sans from Google Fonts, GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.4 smooth scroll loaded from jsDelivr.

Most websites for plumbers must win two customers: the household planning a new boiler, and the one standing in water at midnight. Services, prices, the steps of a visit and recent jobs serve the planner; a dark emergency block turns the phone number into one giant line. It fits a plumbing and heating company, a gas engineer, a heat pump installer or a firm issuing landlord gas certificates; among plumbing websites it suits those that publish fixed prices.

When vibe coding with Claude Code or Cursor, start with what customers hold the firm to: the eight prices, the seven services' tags, the call-back and 90 minute emergency promises, guarantees and zeroed Gas Safe numbers. Sheffield sits in the title, headline, emergency line and footer; the area select lists five towns. Each giant line's --len must equal its character count. Keep the ids, data-8b attributes except data-8b-placeholder, the classes AGENTS.md lists and the data-area-text span. Every specific in this plumbing website template is demo content: ask the owner.

Pick it when one firm does both trades and wants the split to show: plumbing in blue, heating in orange, prices in writing and a line that answers at night. An electrician or locksmith would keep the structure but rewrite most services. A builder who measures a house before pricing extensions is better served by the home renovation template. The weak spot: the area select rewrites one line on the first screen, while the headline, emergency promise, footer and title keep saying Sheffield.

Good for:

Plumbing and heating companyPlumber, gas engineer, boiler or heat pump installerNeighbour trades with fixed prices and a callout line (electrician, drainage, locksmith, roofer, HVAC)Any local service business that wants giant uppercase type, rounded photo bands and one hot accent

Turn the plumber website template into your site with an AI agent

With an AI coding agent

Files (PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/plumber-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/plumber-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/plumber-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/plumber-website-template/main/CREDITS.md

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my plumbing and heating firm: trading and legal name, towns, services, fixed and emergency prices, hours, engineers and registration numbers, jobs, reviews, guarantees, phone, email, address>. Start with the prices, service tags, area select and emergency number. Keep ids, data-8b attributes except data-8b-placeholder, the classes AGENTS.md lists and the data-area-text span; reset each giant line's --len to its character count. Ask me for anything missing; never invent prices, hours, addresses, licence or Gas Safe numbers, reviews or contacts.

In a terminal

npx degit 8bsite/plumber-website-template my-site

Plumber website design and motion

Palette

#f2f2f2 page ground, the phone menu overlay, and the emergency block's ground before it darkens#0e0e0e text, the black Book a visit pill, dark hover fills, the second screen, the emergency block, the footer, finished step numbers#ff5b1f hot orange: the main Book a visit and Send request buttons, the Hot side and Most booked tags, the heat pump card, the asterisks, the emergency number, the end of the visit line#c63d00 darker orange for small text on the light ground: the first screen's tagline, area line and note, the service tags, the contact tagline and hours, the form's status line#ffffff white pills, review cards, job cards, the form and its fields, step number pills, text on the dark blocks and the blue card#2a4cff cold blue: the Cold side tag, the Keep a boiler card, the start of the visit line, focus outlines#c9c9c9 pill, card and field outlines, hairlines between rows, the visit line's track, footer address and base text#5c5c5c secondary text: price notes and dotted leaders, step texts, job and engineer lines, review names, form labels, service words before they darken

Fonts

Instrument Sans: condensed uppercase display at weight 400 and 88% width: the headline and section heading lines, the seven service words, the emergency number, the footer wordmark and the phone menu's links, plus smaller capitals for price names and prices, step and job titles, engineer names, card titles and questions
Geist: body text, leads, taglines and small notes at weights 400 and 500, and the labels of buttons, pills, tags and form fields

Condensed capitals carry the page: each line is sized by its character count to fill its box, and lines stagger on a twelve-column grid with orange notes in the gaps. Six section heads pair two such lines with a lead on the right; prices and questions keep theirs in a side column. Most photos are rounded panoramic bands, most buttons and tags are outlined pills, and a six-armed outline asterisk recurs. The second screen, emergency block and footer are dark.

This plumbing web design keeps photos moving in their frames: bands open from slits, settle from a zoom or widen to the screen edges, and dotted leaders and rules draw once. The loud moment is the emergency block: the ground turns to night and the number warms to orange.

Every value of this plumber website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.

What is on the plumber website page

Navigation
Fixed row of outlined pills: wordmark, area select, four section links, phone and a black Book a visit; Menu pill and full-screen overlay on phones; hides on scroll down
The bar slides away as you scroll down and returns as you scroll up, and a hovered pill fills from a thin horizontal slit, dark on the white pills and orange on the black one.
Plumbing and heating engineers for Sheffield
Two screens: a wide rounded photo band over a three-line staggered uppercase headline with an orange tagline, a note, the asterisk and a Book a visit button, then a dark screen with a statement and the cold side and hot side lists
On load the photo band opens from a slightly smaller frame and the headline lines rise, while the photo drifts sideways and the asterisk spins in slow loops. As you scroll the first screen holds still: the band widens to the screen edges under a dark shade, the headline lines slide out to alternating sides, and the second screen's statement slides in over the full-screen photo.
What we fix and fit
Index of seven services as giant words, each with a note, a price tag and a panoramic photo strip
The heading's two lines slide in from opposite sides with your scroll. As each service row crosses the middle of the screen its photo opens from a slit and settles from a zoom while the word darkens from grey and steps right, then the photo closes again as the row leaves.
Prices we put in writing
Fixed price board of eight jobs with dotted leaders, beside a heading, a lead and a note marked with the asterisk
The heading lines slide in from opposite sides and each dotted leader draws from left to right once as its row arrives, while on wide screens the heading column stays in place as the board scrolls past.
How a visit goes
Five steps of a visit zig-zagging either side of a vertical line that fills from blue to orange
A vertical line fills downward with a blue to orange gradient as you scroll, and each step's number pill fills black and its title darkens as the fill reaches it.
Recent jobs
Four recent jobs as panoramic photo cards that stack as you scroll, each with a title, three tags and a line
The four job cards stick at stepped heights and stack as you scroll, each covered card shrinking slightly and dimming as the next slides over it with its photo drifting inside the frame.
Who turns up
Four engineers in tall capsule portraits on a staggered row, each with a name, two tags and a line
Each tall portrait opens from a horizontal slit while its photo settles from a zoom, once, as it scrolls into view.
Boiler or heat pump?
Boiler or heat pump advice: a blue card and an orange card that part to reveal a heat pump photo between them
The blue and orange cards start pressed together over the heat pump photo and part to the sides as you scroll, up and down on narrow screens, while the photo settles from a zoom.
What the neighbours say
Six short reviews on white cards in one continuous moving row
The six cards run in one endless sideways row on a 70 second loop that pauses on hover and while the row is off screen.
Burst pipe, no heat, no hot water? Call us, day or night.
Dark emergency block: heading, the phone number as a giant orange link filling the width, three first steps and a gas flame photo
As the block rises its ground darkens from the page grey to near black and the heading turns light, while the phone number grows to the full width and warms from black to orange and the asterisk turns.
Before you ask
Questions and answers (native <details>) with the asterisk as the toggle, beside a heading and a phone line
A thin rule draws across above each question once on arrival, and the asterisk toggle turns on hover, then turns and fills orange while its answer is open.
Tell us what's leaking, banging or cold
Closing photo band, a giant three-line heading with a call-back tagline, phone and email pills, the address and a call-back form
The closing photo band arrives as wide as the screen and taller than its frame, then draws in to its rounded shape with your scroll while the photo settles from a zoom.
Footer
Dark footer: one-line description, five links, address, phone, email, a drawn rule, the wordmark filling the width, copyright with the Design: 8B credit, Gas Safe number and Book a visit
The thin rule above the wordmark draws from left to right once.

Before you publish the plumber website site

Replace social preview image, favicon, phone number, email address and contact form (sends nothing yet) and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
Book a visit buttons in the nav bar, the phone menu, the first screen and the footer lead to #contact now; point them to your online booking page, or keep #contact once the form is connected.
Send request button of the call-back form in contact lead to nothing is sent: a script checks name and phone and shows a thank-you line now; point them to your form endpoint (Formspree, Netlify Forms) or the form of your booking system.
The call-back form sends nothing yet. With JavaScript a script checks name and phone and shows the thank-you line; without it the browser posts the form to #contact on the same page, which a static host does not handle. Connect it to a form service.
The area select changes only the small line "Engineers out across ... every day." in the first screen; the h1, the emergency line, the footer and the page title still name Sheffield.

Questions about this plumber website template

Can I use this plumber website design on a client's site for free?

Yes: the MIT license lets a freelancer doing website design for plumbers use it on a client's domain free. The Unsplash photos and the fonts keep their own licences, listed in CREDITS.md. Keep the header comment and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it.

Where do call-back requests go when someone presses Send request?

Nowhere yet. A script stops the submit, checks that name and phone are filled, shows a thank-you line and clears the form. Connect Formspree or Netlify Forms as AGENTS.md describes, or delete the form and its script. The thank-you line promises a call within the working hour and the hours say Monday to Saturday: match both to the office.

How do I get Claude Code, Cursor or Codex to rework it for my firm?

Download index.html and AGENTS.md into one folder with the curl lines near the start of AGENTS.md, open that folder in the agent and paste the prompt from this page with the angle brackets filled in. Give the agent the files, not the demo address: a page fetched by URL reaches it as a summary, not as the code.

What must stay in place for the scroll effects to work?

The section ids, the data-8b-section, data-8b-motion and data-8b-part attributes, the classes AGENTS.md lists, and the reviews loop's data-loop-row and data-8b-items. Each giant line needs a --len equal to its character count, spaces included. Keep the data-area-text span while the area select stays. CSS sets stepped offsets for up to five job cards; a sixth needs its own rule.

Can it serve as an HVAC website template?

Partly. The hot side covers boilers, radiators, underfloor heating, heat pumps, flues and smart controls, but the page never mentions air conditioning or ventilation. For HVAC website design in the US, the services and the price board need rewriting for cooling work, and the pounds, VAT, Gas Safe and CP12 references need local equivalents.

Can I get a plumbing site without editing any code?

Yes: 8B's AI website builder turns a one-sentence description into a new site with its own design, not this template. Designing and restyling are free; publishing with hosting and SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT through the 8B connector.

Not a plumber website? More free templates