Formgong

Website template

Contour: a free developer portfolio website template

Available asHTMLWordPressShopifyAstroNext.jsNuxtSvelteKitHugoEleventyGhost

A one-page site for a freelance developer or a small studio that builds websites and AI features for agencies, in plain HTML: index.html, one stylesheet, one script and a privacy page. The demo developer, Ada Ferrer, her clients, projects and notes are fictional.

Short answer: Contour is free under the MIT license. Download contour.zip, replace fk_your_access_key in index.html with your Formgong access key, rewrite privacy.html for your business and upload the folder to any static host. Project briefs then arrive in your inbox.

See it working

No ratings yet. Be the first to rate Contour.

Rate it:

Contour home page
Contour: the first screen of the demo.

Get this template Live demo

The demo form is real: it posts to a Formgong demo form. Demo messages are kept for seven days and are not emailed to anyone.

Get this template

HTML

Plain HTML files with no build step. They run on any static host.

Download contour.zip Live demo

  1. Download contour.zip and unzip it.
  2. Create a free form at formgong.com/new and copy its access key. It starts with fk_ and is safe to put in a web page.
  3. Open index.html in a text editor and replace every fk_your_access_key with your key.
  4. Upload the folder to a static host such as Cloudflare Pages, Netlify or GitHub Pages.
  5. Send a test message from the live site and check that it reaches your Formgong inbox.

All free HTML templates

WordPress

A block theme with the same look. The form comes from the free Formgong plugin.

Download contour-wordpress.zip WordPress demo

  1. Download contour-wordpress.zip. Don't unzip it.
  2. In WordPress, open Appearance → Themes → Add New Theme → Upload Theme, choose the file, click Install Now, then Activate.
  3. Install the free Formgong plugin (Plugins → Add New, search for "Formgong"). Create a free key at formgong.com/new and paste it under Settings → Formgong.
  4. Optional: for the demo pages and menu, download contour-wordpress-pages.xml and import it under Tools → Import → WordPress. Then pick Home under Settings → Reading → A static page.
  5. Send a test message from your site and check that it reaches your Formgong inbox.

WordPress version: what you can edit and what is in the zip · All free WordPress themes

Shopify

An Online Store 2.0 theme with the same look, for any Shopify plan with an online store.

Download Contour-1.0.1.zip Shopify demo

  1. Download Contour-1.0.1.zip. Don't unzip it.
  2. In Shopify admin, open Online Store → Themes → Add theme → Upload zip file, and choose the file.
  3. Create a free key at formgong.com/new. Click Customize, open Theme settings → Formgong and paste it. Without a key the theme's Formgong forms stay hidden.
  4. Add your products, photos and menus in the theme editor. Shopify never copies them with a theme, so it starts with placeholders. Publish when you're ready.

Shopify version: what you can edit and what is in the zip · All free Shopify themes

Astro

The Astro version of the same page. You need Node.js.

Download contour-astro.zip

  1. Unzip it, run npm install, then npm run dev and open localhost:4321. npm run build puts the static site in dist/.
  2. Create a free form at formgong.com/new, copy its access key and paste it over fk_your_access_key in src/content.json. Every text on the page is in that file.
  3. Send a test message from your site and check that it reaches your Formgong inbox.

All free Astro themes

Next.js

A Next.js (App Router) version of the same page, built as a static export. You need Node.js.

Download contour-nextjs.zip

  1. Unzip it, run npm install, then npm run dev and open localhost:3000. npm run build puts the static site in out/.
  2. Create a free form at formgong.com/new, copy its access key and paste it over fk_your_access_key in content.json. Every text on the page is in that file.
  3. Send a test message from your site and check that it reaches your Formgong inbox.

All free Next.js templates

Nuxt

A Nuxt version of the same page. You need Node.js with npm 11 or newer (npm 10 stops during install), or pnpm.

Download contour-nuxt.zip

  1. Unzip it, run npm install, then npm run dev and open localhost:3000. npm run generate puts the static site in .output/public/.
  2. Create a free form at formgong.com/new, copy its access key and paste it over fk_your_access_key in app/content.json. Every text on the page is in that file.
  3. Send a test message from your site and check that it reaches your Formgong inbox.

All free Nuxt templates

SvelteKit

A SvelteKit version of the same page. You need Node.js.

Download contour-sveltekit.zip

  1. Unzip it, run npm install, then npm run dev and open localhost:5173. npm run build puts the static site in build/.
  2. Create a free form at formgong.com/new, copy its access key and paste it over fk_your_access_key in src/lib/content.json. Every text on the page is in that file.
  3. Send a test message from your site and check that it reaches your Formgong inbox.

All free SvelteKit templates

Hugo

A Hugo site with the page as a theme you can copy into another Hugo site. You need Hugo 0.146 or newer.

Download contour-hugo.zip

  1. Unzip it, run hugo server in the folder and open localhost:1313. hugo puts the static site in public/.
  2. Create a free form at formgong.com/new, copy its access key and paste it over fk_your_access_key in data/content.json. Every text on the page is in that file.
  3. Send a test message from your site and check that it reaches your Formgong inbox.

All free Hugo themes

Eleventy

An Eleventy version of the same page. You need Node.js.

Download contour-eleventy.zip

  1. Unzip it, run npm install, then npm run dev and open localhost:8080. npm run build puts the static site in _site/.
  2. Create a free form at formgong.com/new, copy its access key and paste it over fk_your_access_key in src/_data/sitedata.json. Every text on the page is in that file.
  3. Send a test message from your site and check that it reaches your Formgong inbox.

All free Eleventy templates

Ghost

A Ghost theme. The home page has the template's design; posts, pages, tags and authors use the same header, footer and colours.

Download contour-ghost.zip

  1. Download contour-ghost.zip. Don't unzip it. In Ghost Admin, open Settings → Design & branding → Change theme → Upload theme, then activate it.
  2. Under Settings → Design & branding → Customize → Homepage, paste a free key from formgong.com/new into Formgong access key.
  3. Send a test message from your site and check that it reaches your Formgong inbox.

The home page texts are written into the theme files, so you change them there, not in Ghost Admin. Ghost Admin only takes the access key.

All free Ghost themes

Use with AI

A prompt for ChatGPT, Claude, v0, Lovable or Bolt that builds a site in Contour's style: the sections in order, the colours, the fonts, the motion and a contact form that sends to Formgong.

Prompt for Contour
Build a website for a freelance front-end developer or small studio that builds for design agencies in the style of the free "Contour" template (live demo: https://contour.formgong.com).
Write plain HTML, CSS and a little vanilla JavaScript in one index.html, unless this tool builds in its own stack (v0, Lovable and Bolt use React): then keep the same sections, look and form logic.
Use my business name and details where I give them. Where a section needs photos, names, prices, reviews or other copy I haven't given, use neutral placeholder images (CSS gradients or inline SVG, sized for the layout) and short placeholder text that is clearly marked for me to replace.

Sections, top to bottom:
1. Header with the menu.
2. Hero on a blueprint grid: a huge headline, "I build it.", with a subline.
3. Manifesto: two big lines, "Hold the vision." and "Cut what slows", with a 12-column ruler between them.
4. Work: case studies that show how each project was built; on wide screens the section holds while three cases change one after another, with a 01 / 03 counter.
5. Services: rows.
6. Process: "Your design on the surface. My code underneath.", four steps.
7. Field notes: three post rows.
8. Call to action: "Tell me what you're making." with the brief form.
9. Footer with legal links.

Colours (define them as CSS variables):
- Background: #f4f4f0
- Raised background: #ecece6
- Ink: #0e0e0d
- Muted text: #65655f
- Lines: #0e0e0d24
- Strong lines: #0e0e0d52
- Accent (blue): #2f5bff
- Text on accent: #ffffff
- Error: #c02b24

Fonts (Google Fonts): Geist for text and headings, Geist Mono for labels and numbers.

Motion and hover:
- A loader plots the monogram; layout boxes and guides draw themselves; the headline inks in and the subline types itself. Then contour lines appear on a <canvas> and the ground lifts under the pointer.
- Service rows fill on hover; a line draws itself across the four process steps.
- A command palette on Ctrl K (or the Menu button on phones) jumps to any section.
- Smooth scrolling. Reduced motion or no JavaScript shows every section at once.
- Wrap every animation in @media (prefers-reduced-motion: no-preference), so visitors who ask for less motion get the final state.
- Hide content for reveal animations only from JavaScript (add a class such as js to <html> first and hide only under it), so every section is visible without JavaScript.

Contact form, sent to Formgong (a hosted form backend, no server code):
- Brief form fields: name, email, company (studio), budget, message (the brief). Put a short privacy line under the button that links to a privacy page. Use these name attributes: name, email, company, budget, message. Add a hidden field subject with the value "New project brief" so the message is easy to recognise in the inbox.
- The form is <form action="https://formgong.com/submit" method="POST"> with <input type="hidden" name="access_key" value="fk_your_access_key"> and <input type="hidden" name="_lang" value="en">. I will replace fk_your_access_key with my own key from https://formgong.com/new. The key is public and safe in the page.
- Add a honeypot: a text input named botcheck, hidden with CSS (position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)), with tabindex="-1" and autocomplete="off".
- Submit with fetch: POST https://formgong.com/submit, body new FormData(form), header Accept: application/json. Disable the button while it sends.
- Show the thank-you message only when the JSON response has success === true. On anything else (an error response, a non-2xx status, a network error) show the error message, keep what the visitor typed and enable the button again.
- Keep the name attributes exactly as listed: Formgong stores each value under its field name.
- Without JavaScript the plain form POST must still work: Formgong then shows its own thank-you page. To send visitors to my own page instead, add <input type="hidden" name="_redirect" value="https://example.com/thanks/"> (I will put my real URL there).
- Do not add a backend, API route, server action, database or email library.

Accessibility: a visible label on every field, a visible focus style, alt text on images, and text contrast of at least 4.5:1.
  1. Copy the prompt and paste it into the AI tool. Add your business name, services and contact details at the end.
  2. Create a free form at formgong.com/new and copy its access key. It starts with fk_ and is safe to put in a web page. Replace fk_your_access_key in the code the tool writes.
  3. Send a test message and check that it reaches your Formgong inbox. The page should say thanks only after the server answers success: true.

Prompts for every template

What is inside

  • A blueprint hero: a loader plots the monogram, layout boxes and guides draw themselves, a huge headline inks in and the subline types itself. After the intro, contour lines appear on a canvas and the ground lifts under the pointer.
  • Pinned case studies: on wide screens the projects section holds while three cases change one after another, with a 01 / 03 counter and three steps. On phones the cases stack.
  • Services, process and notes: rows that fill on hover, a line that draws itself across four process steps, and three post rows.
  • A command palette: Ctrl K (or the Menu button on phones) jumps to any section and switches the theme, the accent colour and the layout grid.
  • A brief form that sends: name, email, studio, budget and the brief, with a hidden subject, a honeypot and a short privacy line linking to privacy.html. It shows thanks only when the server answers success: true.
  • Motion: GSAP with ScrollTrigger and SplitText, and Lenis smooth scrolling, all served from the template's own js/vendor folder. Reduced motion or no JavaScript shows every section at once.
  • Images: three project images generated for this template with FLUX 1.1 [pro] ultra (Black Forest Labs), with no text or logos. Fonts: Geist and Geist Mono (SIL OFL).

Questions

Do I need a build step?

No. It is plain HTML, CSS and JavaScript. Edit index.html, keep the folder structure and upload it to Cloudflare Pages, Netlify, GitHub Pages or any web host.

Can I use GSAP in my own site?

Yes. GSAP, including ScrollTrigger and SplitText, is free under GreenSock's standard no-charge license, and its licence file ships in js/vendor. Lenis is MIT.

Why is there a privacy page?

The brief form collects names and emails, so the GDPR asks you to say why and for how long at the point of collection. privacy.html is a short starting point and the line under the form links to it; rewrite it for your own business.

Sources

Checked on 08.10.2026 against these public pages: MIT License (Open Source Initiative).

← Formgong