Lattice

Lattice is a free Astro one-page portfolio template for a creative developer or small studio, bundled with a contact form that posts directly to the Formgong form backend. It ships as a static Astro site with fonts and images included, so it deploys to any static host without a server, PHP, or serverless function.

What is Lattice?

Lattice is a dark, motion-led one-page website template built on Astro for a creative developer or small studio. It takes your content from a single JSON file plus an image folder and outputs a static site built into dist/ via npm run build. Form submissions are the other output: the page sends field data to Formgong and displays a thanks state only when the server answers success: true. The template is published by Formgong under the MIT license.

Key Features

• Astro framework — the site is built with Astro (astro.config.mjs, src/pages/index.astro, src/layouts/Base.astro), producing a static output directory with npm run build and a local dev server on port 4321.
• Single-file content model — every text on the page lives in src/content.json; the form access key sits under form.access_key in the same file.
• Serverless contact form — the form posts straight to https://formgong.com/submit and sends access_key, _lang, botcheck, name, email, phone, and message; no backend, PHP, or serverless function is required.
• Real success and error states — the page shows "received" only on a success: true answer and otherwise displays the server's returned message.
• Honeypot spam protection — a hidden botcheck field guards submissions.
• Bundled fonts — Montserrat and IBM Plex Mono ship as WOFF2 files (Latin and Latin Extended), so there are no requests to Google Fonts; licence texts sit beside the font files under SIL Open Font License 1.1.
• Included pages and assets — one responsive one-page layout, a privacy page, site.css and site.js, 6 font files, 12 images, 7 components.
• One-click deploys — Deploy buttons are provided for Netlify, Vercel, and Cloudflare Workers, and the build works on any static host with build command npm run build and output directory dist.

Who is it for?

• Creative developers: publish a one-page portfolio with project screenshots from the img/ folder and a working inquiry form without writing backend code.
• Small studios: put up a single-page presence with bundled fonts and a contact form routed to email, Telegram, Slack, or Discord through Formgong.
• Astro beginners and tinkerers: use a minimal project with no dependencies beyond bundled fonts to learn the Astro page and layout structure.

What can you do with Lattice?

• Launch a portfolio fast: replace the fictional sample photos and texts in src/content.json and public/img/, then deploy the static build to Netlify, Vercel, Cloudflare, or any static host.
• Wire up inquiries: create a form at formgong.com/new, copy the access key into form.access_key, and receive submissions by email with optional Telegram, Slack, or Discord forwarding.
• Start from a privacy-aware base: keep the bundled fonts instead of calling Google Fonts and reuse the included privacy page.

How does Lattice work?

Install with npm install, run npm run dev for local preview at http://localhost:4321, edit src/content.json for all copy and the form key, then run npm run build to produce the static dist folder for any host.

Pros and cons

• The sample names, texts, and photos are fictional and were generated with ChatGPT image generation (OpenAI); the template explicitly asks you to replace them before launch.
• Submissions depend on a Formgong access key, and the free plan is required to route them.

Pricing

Lattice itself is free and MIT licensed. The Formgong form backend it relies on offers a free plan.

FAQ

Is Lattice free?

Yes. Lattice is released under the MIT license, copyright Formgong, and the repository lists no paid tier. The only external service it uses is the Formgong form backend, which has a free plan.

Do I need a backend to run the contact form?

The form posts directly to https://formgong.com/submit, so no server, PHP, or serverless function is needed. You create a form on Formgong, copy its access key into form.access_key in src/content.json, and the form works.

Where do I edit the page text?

Every text of the page lives in src/content.json, alongside the form access key. Project screenshots go in the image folder, and the fictional sample photos should be replaced before launch.

What does the form send to Formgong?

The form submits the access key, language, botcheck honeypot field, name, email, phone, and message. The page confirms only when Formgong returns success: true, otherwise it shows the server's message.

Does Lattice load Google Fonts?

No. Montserrat and IBM Plex Mono are bundled as WOFF2 files covering Latin and Latin Extended, served from the project, with SIL Open Font License 1.1 texts stored next to the font files.