Shoal

Shoal is a free Astro 7 theme for real estate agents, built by Formgong, that pairs a full-screen photo hero and six service tiles with a working contact form backend and one-file rebranding.

What is Shoal?

Shoal is a free real estate website theme built with Astro 7 and plain CSS, published by Formgong. It ships a full-screen photo hero, six photo tiles for services, an agent section, area guides, short notes, and a contact form wired to the Formgong form backend. Content is driven from a single src/config.ts file, and the build outputs a static site.

What makes Shoal stand out?

• Astro 7 with plain CSS — no animation library and one small script; fonts are self-hosted Newsreader and Metropolis.
• One-file rebrand — name, phone, office, service tiles, island guides, notes, and the form key all live in src/config.ts.
• Form that never fakes success — the contact form shows "Thank you" only when the backend answers success: true; errors and lost connections show an error, and it works as a plain HTML form without JavaScript.
• Formgong integration — set a PUBLIC_FORMGONG_ACCESS_KEY (starts with fk_) in .env or config.ts; spam is filtered with a hidden honeypot field.
• Included pages — home, about, buying, and selling pages, plus island area guides and notes.
• Quiet motion — headings and captions rise into view once on scroll, the header hides going down and returns white going up, service tiles lift on hover; prefers-reduced-motion is respected.
• Accessibility — native <dialog> for the form and menu, visible focus states.
• Deploy paths — Deploy to Cloudflare and Deploy with Vercel buttons, plus a no-build shoal-html.zip of plain HTML from the latest release.

Who is it for?

• Real estate agents — launch a personal site with hero, service tiles, and area guides using the fictional agent Dana Whitlock as a starting point.
• Realtors rebranding — replace name, phone, office, and photos in src/config.ts and public/img/ to make the site their own.
• Developers building for clients — the MIT-licensed code can be reused for client sites, with Unsplash-licensed photos replaced by their own.

What can you do with Shoal?

• Real estate agents: publish a static site with a full-screen hero, six service tiles, area guides, and notes, edited from one config file.
• Formgong users: connect the contact form with a free access key so messages arrive in the Formgong inbox, on Telegram, and by email.
• No-build users: download shoal-html.zip, replace fk_your_access_key and https://example.com, and upload the plain HTML files anywhere.
• Static-host deployers: run npm run build for a dist/ folder, setting url in src/config.ts for canonical links, sitemap, and form redirects.

How does Shoal work?

Create a free form at formgong.com/new, copy the access key, and place it in .env as PUBLIC_FORMGONG_ACCESS_KEY or in src/config.ts. Edit content in src/config.ts, replace photos in public/img/, set url to your domain, and run npm run build to produce a static dist/ site. On Cloudflare, worker.js injects the key as a Worker secret.

Pricing

Shoal is free, with MIT-licensed code and Unsplash-licensed photos; the Formgong access key is free at formgong.com/new. The footer "Theme Shoal by Formgong" credit is optional.

FAQ

Is Shoal free?

Yes. The code is MIT-licensed and the photos are under the Unsplash License, which allows free use but not resale on their own. A Formgong access key for the contact form is free at formgong.com/new.

Does the contact form work without Formgong?

Shoal's form is built for Formgong; with a placeholder key or another backend, nothing is sent to the review-page service and the credit link goes to formgong.com. Without JavaScript it still works as a plain HTML form.

Can I use Shoal without a build step?

Yes. Download shoal-html.zip from the latest release, replace fk_your_access_key and https://example.com with your own values, and upload the plain HTML files to any host.

What is the Formgong review page?

With a real access key, the build sends a POST to formgong.com/api/review-page with the key and site URL; Formgong creates a public review page where clients can leave reviews. You can switch it off in the Formgong dashboard or change the link in src/components/ContactForm.astro.

Are the photos included in the MIT license?

No. Photos in public/img/ are from Unsplash under the Unsplash License, separate from the MIT code license; replace them with your own listing and area photos.