Formgong

Website template

Somna: a free website template for sleepwear and pyjama shops

Available asHTML

A warm, print-led store in plain HTML: a home page, a Shop all catalogue and a page for each product, with one CSS file, one small script and self-hosted fonts. The demo brand, Somna, and its prints, products and prices are fictional.

Short answer: Somna is free under the MIT license. Download somna.zip, replace every fk_your_access_key in the .html files with your Formgong access key (find and replace across the folder), and upload the folder to any static host.

See it working

No ratings yet. Be the first to rate Somna.

Rate it:

Somna home page
Somna: 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 somna.zip Live demo

  1. Download somna.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. Replace every fk_your_access_key with your key. It is in all the .html files, so use find and replace across the folder.
  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.

What is inside

  • A print-led storefront: an announcement bar, a header that sits over the full-screen photo hero and turns solid on scroll, New in / Best sellers / Cotton & linen tabs over a swipeable product row, peach collection tiles and two large photo promos.
  • Story sections: a large serif brand statement, a featured print with its product card, two photo cards, a peach "makers" block, an FAQ, a newsletter, a perks row and a peach footer.
  • A catalogue with filter and sort: category pills, a lifestyle tile between product cards, and a drawer that filters by type, colour and size and sorts by price or name without reloading.
  • Product cards and pages: a second photo on hover and a wishlist heart; on each of the eight product pages a gallery, size picker, accordions and related products.
  • Three working forms: a size question on every product page (it sends the product name) and two newsletter sign-ups. Each shows thanks only when the server answers success: true.
  • Motion: text fades up, cards appear in a short wave and large photos settle as you scroll; reduced motion or no JavaScript shows everything at once.
  • Images: fifteen WebP photos generated for this template with FLUX.2 [pro] (Black Forest Labs). The people are not real; no stock photos.

Questions

Is there a real cart and checkout?

No. The bag and the wishlist are demo UI. Link Add to bag to your own shop or payment provider, or take orders by message with a Formgong form. Formgong does not take payments.

How do I add a product?

Copy an article with class card in collections/all/index.html and set data-cat, data-color, data-size and data-price, which the filters read. For its page, copy a folder in products/ and edit the text and photos.

Sources

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

← Formgong