Form Lab
Dark, high-energy Astro theme for gyms, personal trainers, and training studios. Oversized italic display type, acid lime accents, coach and program collections, and a working BMI calculator.
One payment for Form Lab and everything else - all 31 themes, every future release, and the visual builder included.
See Form Lab in action
Every page and section is part of the download. Use these as launch-day templates - keep the structure, swap the copy.
Form Lab is built for training businesses that sell results, not equipment lists. The homepage opens on a full-bleed gym photograph with TRAIN BETTER set in oversized italic caps, then moves through coaching services, membership pricing, transformation goals, and coach profiles. Three content collections cover programs, coaches, and a fitness journal, so adding a new coach or program is one Markdown file. An interactive BMI calculator gives visitors a reason to engage before they ever fill in a form.
Best Fit For
- Gyms and training studios
- Personal trainers
- Strength and conditioning coaches
- CrossFit and functional fitness boxes
- Online coaching businesses
- Yoga and pilates studios
Full Page Set
Every page is real and editable - no placeholders, no "coming soon" stubs.
35 Sections Included
Every section is a ready-to-use Astro component. Add it to any page, customize via config, or remove what you don't need.
What's Included
Collections, Not Hardcoded Pages
Programs, coaches, and journal articles each live in their own Astro collection. Drop in a Markdown file and the grid, the detail page, and the homepage spotlight all update. Nobody has to touch a component to add a sixth coach.
A Tool, Not Just a Brochure
The BMI calculator runs client-side and returns a banded result in plain language rather than a bare number. It gives a first-time visitor something to do on the page, which is the step most fitness sites skip between landing and the contact form.
Fast Without Asking
143KB of JavaScript for the whole site, not the 963KB of jQuery plugins most fitness templates ship. Imagery is WebP throughout. Scroll reveals, the slider, the lightbox and the counters are small modules you can read in a sitting, and every one of them respects prefers-reduced-motion.
Dark by Design
Near-black surfaces with a single acid lime accent, chosen so training photography carries the color instead of competing with it. Oversized italic caps do the shouting; everything else stays quiet and readable.
Forms, newsletter, and analytics - pre-wired
Form Lab is ready to connect to your preferred providers. Pick from the options below, drop in a single API key, and your contact form, newsletter signup, and analytics are live - no backend, no JavaScript, no glue code.
Contact form
The Contact section's <form> renders with no JS. Set one provider in site.ts; the form action wires automatically.
- Formspree50 free submissions / month, no domain restriction
- FormSubmitFree, no signup - just an email confirmation
- Netlify FormsFree 100/month - Netlify hosting only
Newsletter
The Newsletter form sends subscribers directly to your ESP. The email input name auto-adjusts per provider.
- MailchimpStandard EMAIL field; honeypot supported
- ConvertKit (Kit)email_address field; works with any form ID
- Buttondownemail field; lightest, indie-friendly
Analytics
Layout.astro injects the right script tag based on the provider you choose. No client-side branching.
- Google Analytics 4Paste your G-XXXXXXXXXX measurement ID
- PlausiblePrivacy-friendly, ~1 KB script, no cookies
- UmamiSelf-hostable, also cookie-free
Tech Stack
Config-Driven Setup
Every theme uses a single src/config/site.ts file
for customization. Change your brand, navigation, form providers, analytics, and section content
without touching component code.
// src/config/site.ts
export const siteConfig = {
name: "Your Company",
tagline: "Your tagline here",
url: "https://yourdomain.com",
navigation: { sticky: true, links: [...], cta: {...} },
social: { twitter: "...", github: "...", linkedin: "..." },
seo: { title: "...", description: "...", ogImage: "/og.png" },
// ── Provider switches ────────────────────────────────
contactForm: { provider: "formspree", formspreeId: "your-id" },
newsletter: { provider: "convertkit", actionUrl: "https://..." },
analytics: { provider: "plausible", plausibleDomain: "you.com" },
// ── Section data ─────────────────────────────────────
team, video, timeline, comparison, gallery,
carousel, tabs, appDownload, map, footer,
} as const;Built to be edited by AI
Form Lab ships an AGENTS.md and
a CLAUDE.md at the project root.
Claude Code, Cursor, Copilot, and Codex read them the moment you open the folder.
So your agent starts knowing which file to edit, which design decisions are deliberate, and which parts of the theme break quietly if touched. You get the right change on the first pass instead of a confident guess.
- A task map. Every common request routed to the exact file, so no time is spent exploring.
- Design invariants. The decisions that make the theme worth buying, marked do-not-touch.
- The traps. The specific things that break this theme silently, written down.
- A done checklist. What to build, what to scroll, what to verify before claiming success.
# AGENTS.md - Form Lab
## Task map
| The client wants to change | Edit |
|---|---|
| Brand name, logo, favicon | site.ts -> identity |
| Colors | site.ts -> theme |
| Any homepage copy | site.ts -> home.<block> |
| Add a page or an article | new .md in src/content/ |
Rule: copy belongs in site.ts, never inside a component.
## Design invariants
Do not "improve" these. They are why the theme is worth its price.
- The accent stays loud. Do not mute or pastel it.
- Display headings stay oversized. The scale is the design.
## Traps
The things that break this theme silently, written down,
so your agent does not have to discover them by breaking them.
## Before you say you are done
npm run build # must succeed and emit every route
Scroll each page to the bottom. Report what you did not verify.Excerpt. The full file ships with the theme.
Full documentation, ready before you buy
Browse the install guide, the site.ts reference, provider setup, deploy instructions, and the Form Lab-specific page - all live now.
More themes from the collection.
August
Personal / Portfolio / SaaS
Slab
SaaS / Startup
Vertex
SaaS / Startup
Tally
SaaS / Startup
Or get every theme - these included - with the All-Access Pass.