Craftline

Craftline is a free Astro theme for local service businesses — plumbers, electricians, cleaners, handymen and contractors — built around a scroll-driven CSS 3D house story and a quote form that only reports success when the form backend confirms it. It runs on Astro 7 with Tailwind CSS 4 and TypeScript, and is maintained on GitHub by formgong.

What is Craftline?

Craftline is a static website template for local trade businesses, built with Astro 7, Tailwind CSS 4 and TypeScript and distributed under the MIT license. It takes a single configuration file of business details — name, phone, address, service areas, opening hours, social links and accent color — and produces a static multi-page site in dist/ that any static host can serve. Page content comes from Markdown service files plus JSON testimonial and FAQ collections.

Key Features

• One-file rebranding — name, phone, address, service areas, hours, social links, accent color and the form key all live in src/config.ts; the logo, favicon and OG image are replaced separately.
• CSS 3D scroll story — the home page hero follows a six-chapter narrative (a leak at 11:40 pm, a form sent from a phone, a van, a fixed price, a dry floor) using a CSS 3D house with transform-style: preserve-3d, scroll-driven animations and no JavaScript, WebGL or animation library.
• Honest quote form — the success state appears only when the backend JSON response has success: true; without JavaScript it falls back to a plain HTML POST that redirects to /thanks/.
• Formgong backend — the form posts to Formgong, a hosted form backend with a free plan covering 1,000 submissions a month, with email and optional Telegram delivery.
• Pages included — home, about, contact, thanks, 404, a services index with per-service pages, and a generated robots.txt.
• Motion and accessibility — native cross-document View Transitions, sections fading in via animation-timeline: view(), stat counters, a build-time generated pipe network, labels on every field, AA contrast and a prefers-reduced-motion fallback.
• Generated JSON-LD — schema.org markup built from the config, with a schemaType setting for Plumber, Electrician, HVACBusiness, RoofingContractor, GeneralContractor or LocalBusiness.
• No-build HTML option — craftline-html.zip from the latest GitHub release ships plain HTML files needing only an access key and domain substitution.

Who is it for?

• Plumbers, electricians and HVAC contractors: launch a single-business site with click-to-call buttons, service pages and a working quote form.
• Cleaners, handymen and general contractors: reuse the trade-specific layout by switching schemaType and rewriting captions and service content.
• Astro developers: use the scroll-driven 3D scene and <script>-free animation approach as a reference implementation.

What can you do with Craftline?

• Deploy in one click: the Cloudflare and Vercel buttons copy the repository to your GitHub, build it and request your Formgong access key; the form works from the first deploy once url in src/config.ts is set.
• Drop it on any static host: npm run build outputs a static site in dist/, and Vercel or Netlify can read PUBLIC_FORMGONG_ACCESS_KEY from build environment variables.
• Swap the form backend: any service accepting a standard form POST works by setting PUBLIC_FORMGONG_ENDPOINT and adjusting the single success check in src/components/QuoteForm.astro.

How does Craftline work?

Create a free form at formgong.com/new, copy its access key starting with fk_, then add it to a .env file as PUBLIC_FORMGONG_ACCESS_KEY or set it in src/config.ts. Set url to your domain, edit src/config.ts and the content files, then run npm run dev locally or npm run build for deployment. Node 22.12 or newer is required.

Pros and cons

• The demo business (Northside Plumbing & Heating) and its reviews, prices and trust figures are samples that must be replaced.
• Theme colors require keeping 4.5:1 contrast between theme.accent and theme.accentText.
• The scroll story was verified in Chrome and WebKit; browsers without scroll-driven animations get a static house and caption pictures.

Pricing

Craftline is free under the MIT license. The Formgong form backend has a free plan covering 1,000 submissions a month.

FAQ

Is Craftline free?

Yes. Craftline is released under the MIT license, and the illustrations, icons and Urbanist font (SIL Open Font License 1.1) are covered by compatible terms. The only optional cost is the Formgong form backend, whose free plan covers 1,000 submissions per month.

Does the quote form work without JavaScript?

Yes. Without JavaScript the form performs a normal POST to Formgong's submit endpoint, and a hidden _redirect field sends the visitor to /thanks/ on the domain set in the config. With JavaScript, the success state appears only on a confirmed success: true response.

Can I use a different form backend?

Any service that accepts a standard form POST works. Point PUBLIC_FORMGONG_ENDPOINT at its URL, rename the hidden fields to match, and adjust the single success check in src/components/QuoteForm.astro if the response shape differs.

What do I need to change before launching?

Replace the sample business details in src/config.ts, clear the sample trust figures and their note, swap the logo and favicon, regenerate the OG and touch-icon images, and update sample prices written into the FAQ and story copy. Search for the dollar sign to find price mentions.