Free speech therapist website template

Speech therapist website template: one free HTML file for a children's speech and language practice, with five areas of help, a four-step first visit, a parent and therapist message thread, four therapist cards, fees and a call request form. The look is soft sky blue, indigo and cream. AGENTS.md lets Claude Code, Cursor or Codex adapt it.

At a glance, October 2026. One 104 KB index.html with its CSS and JavaScript inside, 12 sections, 21 Unsplash photos credited in CREDITS.md, Miranda Sans and Platypi from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.4 smooth scroll loaded from jsDelivr.

This speech therapy website template fits a small practice that sees children in a clinic, at home, at nursery or online and books by phone. A paediatric clinic, an occupational therapy service or an early years team can reuse it by renaming the five help cards. Anyone searching for therapist website templates, therapy website templates or website templates for therapists will find the same bones here: help areas, a first visit, named practitioners and fixed fees.

Give the agent the facts only your practice has: registrations, therapist names and working days, the ages each help card serves, fees, step timings, service areas and hours. The demo invents all of them, including the Exeter address and the HCPC claim. Replace the two-part wordmark first, in the nav and the footer. Vibe coding with Claude Code, Cursor or Codex works well when the agent asks for these facts instead of filling gaps.

Choose this when the practice is small, family facing and sells by phone: named therapists, a priced list, a message thread and one form. A larger clinic with a blog, a patient login or a booking calendar needs more pages. A vet practice that books visits through a form has its own template. The weak spot is edges: the form field borders and the card outlines are very pale against white. If nobody on your team edits HTML, the 8B builder is the no-code route.

Good for:

Palette

Fonts

• Platypi: serif for the wordmark, section headings, the child's words on the help cards, the large menu links and the avatar letter
• Miranda Sans: sans for body text, card titles, buttons, labels, badges and form fields, in regular and medium weights

A floating pill nav sits over soft panels with 32 pixel corners: the sky panel of the opening, then the first-visit, message-thread, places, fee and contact panels. Help is a six column bento of five cards, two of them with photos. Photos sit in stadium, arch, circle and ellipse windows, and the four therapist portraits rise from the card base as arches. Three tall pinned sections alternate with ordinary ones. Headings are serif, body text sans.

Speech therapy website design here leans on play rather than clinic: a child's old word is struck through beside the word it is heading for, and buttons fill from the middle on hover. The nav bar slides away on the way down and returns on the way up.

Every value of this speech therapist 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.

• Navigation
  Two-part wordmark, four links, phone, a Book a free call button and a menu overlay

  The bar slides out of view after a short scroll down and returns after a short scroll up; this keeps running with reduced motion.

• Your child has so much to say. We help the words find their way out, together.
  A sky-blue panel with the h1, a short lead and a Book a free call button

  On load the heading, lead and button rise 22 pixels into place one after another, while two soft round glows drift in the sky in a CSS loop that pauses off screen.

• What we help with
  Five cards of what the practice helps with, each showing a child's word today and soon

  Each card travels in from below, tilted, and straightens as it scrolls up, then the old word is struck through and the target word rises in.

• We talk, play, plan and practise.
  A held stage: four step cards stack up one over another while the heading words light in turn

  Pinned for about three screens of scrolling: each step card rises over the one before, which shrinks slightly, and the matching heading word is highlighted.

• Play is the method, not the reward.
  Four play photos with a caption each

  Each photo opens from a small stadium-shaped window to full size while the image settles, and the heading, lead and captions rise, once on scroll.

• Ten minutes a day, and someone to ask.
  A held stage: a message thread between a parent and a therapist that plays out message by message

  On screens 900 pixels or wider it is pinned for two screens and the messages after the first pop in one by one while the list lifts to keep the newest in view; on phones each pops in as it scrolls into view.

• Who you'll see, every time
  Four therapist cards with roles, working days and a photo

  The heading rises, each portrait opens from a small window and the weekday chips pop in, once on scroll.

• Where we meet
  A held stage: four places to meet open one after another in a single photo window

  Pinned for about three screens: each place's photo opens from a small pill into its full shape while the previous text fades, and an index of the four names lights the current one.

• Families, in their own words
  Three columns of parent quotes and photos moving at different speeds

  On screens 600 pixels or wider the three columns start 220, 60 and 320 pixels lower and rise to their places; on phones each note and photo slides in from alternating sides.

• Fees, plainly
  A price list of five items and four questions on one panel

  The heading and lead rise once; the four questions are native details elements that open without JavaScript.

• Book a free call
  A sky panel that opens from a stadium window, with details and a call request form

  The sky panel grows from a small stadium-shaped window to the full rounded panel as you scroll, while the details and the form rise into place.

• Visit
  Wordmark with a line, address, contact, page links and the legal line

  The four footer columns rise once on scroll.

• 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 free call buttons in the top bar, the menu, the first screen and the footer lead to #contact, the request form now; point them to your booking calendar or call-back page, or keep them on the form.
• The contact form (Request a call) lead to action="#contact"; a script checks that name and phone or email are filled, shows a thank-you line and nothing is sent now; point them to a form endpoint (Formspree, Netlify Forms, your own) and remove the preventDefault script.
• Phone links in the top bar, menu, contact and footer lead to tel: the placeholder number now; point them to your number.
• Email links in the contact section and footer lead to mailto: the placeholder address now; point them to your address.
• Three sections are held for 200 to 300 vh of scrolling each (first visit, message thread, places); below 900 px wide the thread section is not held and its messages simply pop in.
• The form sends nothing until you connect an endpoint; the phone or email field is plain text with no format check, and the five age options are fixed in the markup.
• Text contrast is fine (the secondary indigo is above 6:1 on every panel), but the form field borders (sky on white, about 1.4:1) and the card outlines (about 1.1:1) are very pale; darken them if the form must meet WCAG non-text contrast.
• gsap, ScrollTrigger, SplitText and Lenis load from a CDN near the end of the body, and the motion scripts after them wait for those files.

Pet boarding

Free

Accountant

Free

Florist

Free

All 55 templates