DEV Community

hey atlas
hey atlas

Posted on • Originally published at aitoolsinsiderhq.com

I built a free one-file gym & fitness website template with a working free-trial booking widget (no React, no DB)

#webdev #css #opensource #html

Most local gyms, fitness studios and personal trainers still have no real website. They live entirely inside Instagram and a phone number, and when someone wants to try a class they have to DM and wait.

So I built a free, open-source template that fixes the one thing that actually matters for a gym: letting a stranger book a free trial class in a few taps, without any booking SaaS, database or monthly fee.

It is one index.html file. No build step, no React, no backend.

What it does

  • A clean boutique-gym landing page (hero, classes, schedule, trainers, pricing, gallery, map, hours).
  • A working "book a free trial class" widget: the visitor picks a class, a day and a time, types their name, and hits confirm.
  • That confirm button opens a pre-filled WhatsApp message to the gym's own number with the whole booking written out. The owner just replies to confirm. No Calendly, no Mindbody, no per-booking cut.
  • A 3-tier membership pricing strip.
  • ExerciseGym JSON-LD structured data baked in for SEO.

Why one file with no database

For a single-location gym, a real booking backend is overkill. The owner already lives in WhatsApp. So instead of standing up auth + a DB + a calendar service, the booking is just a deep link:

const text = `Hi! I'd like to book a FREE TRIAL:
%0A• Class: ${cls}
%0A• Day: ${day}
%0A• Time: ${time}
%0A• Name: ${name}`;
window.open(`https://wa.me/${PHONE}?text=${text}`);
Enter fullscreen mode Exit fullscreen mode

The whole "form" is plain HTML + a few lines of vanilla JS that assemble that string. Zero dependencies, loads instantly, hosts free on GitHub Pages / Netlify / Vercel.

Make it yours

Everything a gym needs to change lives in one config block at the top. Search the file for the word EDIT, change the studio name, phone, classes, schedule and prices, and you are done. Swap three CSS color variables and the same template works for a yoga studio, a CrossFit box, a boxing gym or a PT business.

Get it

Free to use, fork and ship. If you run a gym or studio (or build sites for people who do), I would love feedback on the booking flow. This is the third in a small series of one-file vertical templates (salon and restaurant came first) — tell me which vertical you want next.

Top comments (0)