WaitlistKit documentation

Quick start

1. Open index.html in your browser and pick a template.
2. Copy that file from the templates folder into a new folder and rename it index.html.
3. Open it in a text editor (VS Code, Sublime Text, even Notepad) and change the brand name, headline and text.
4. Scroll to the bottom of the file and find the block called WAITLIST SETTINGS. Set your launch date and your email provider.
5. Upload the file to a web host.

What is in the download:

WaitlistKit/
  index.html                  gallery of all templates
  documentation.html          this guide
  README.md                   short version of this guide
  LICENSE.txt
  CHANGELOG.md
  google-sheets-script.gs     free email collection with Google Sheets
  previews/                   preview images used by the gallery
  templates/
    01-obsidian.html          dark, developer tools
    02-aurora.html            dark gradient, consumer apps
    03-editorial.html         newspaper, newsletters
    04-brutalist.html         yellow and black, agencies
    05-glassmorphism.html     frosted glass, fintech
    06-retro-y2k.html         neon retro
    07-pastel-ai.html         soft pastel, AI products
    08-luxury.html            cream and gold, fashion
    09-neon-gaming.html       red neon, games
    10-clean-saas.html        white and blue, B2B SaaS
    11-split-screen.html      split panel, studios
    12-nature-wellness.html   warm organic, wellness
    13-bold-startup.html      orange, indie launches
    14-crypto-web3.html       dark and gold, web3
    15-animated-saas.html     animated gradient, SaaS

Each template is self-contained. Its styles and script are inside the file, so the one HTML file is all you upload.

Launch date

In the settings block, put your date between the quotes:

launchDate: "2026-12-01T09:00:00",

The format is year, month, day, the letter T, then the time in 24-hour form. Written like this, the countdown ends at 9:00 in each visitor's own time zone.

To end at the same moment for everyone, add your offset from UTC. This example is 9:00 in Karachi (UTC+5):

launchDate: "2026-12-01T09:00:00+05:00",

When the countdown reaches zero

The timer stops at 00 and the page adds the class wl-launched to the <html> element. Two ways to use that:

• Send visitors to your live site: set launchUrl: "https://yourproduct.com".
• Change the page with CSS, for example hide the timer:

.wl-launched .countdown { display: none; }

Removing the countdown

Delete the countdown block in the HTML (the element that contains id="d", id="h", id="m" and id="s"). The script notices it is gone and carries on with the form.

Collecting emails

Out of the box every template is in demo mode: the form shows the thank-you message but saves nothing. Choose one of the options below, then change provider and endpoint in the settings block.

Formspree

1. Create an account at formspree.io and add a new form.
2. Copy the form endpoint. It looks like https://formspree.io/f/abcd1234.
3. Paste it into the settings:

provider: "formspree",
endpoint: "https://formspree.io/f/abcd1234",

Getform, Basin and Formspark work the same way: use their endpoint with provider: "custom".

Google Sheets

1. Create a new Google Sheet.
2. In the sheet choose Extensions, then Apps Script. Delete the sample code and paste in everything from google-sheets-script.gs.
3. Click Deploy, then New deployment. Choose the type Web app. Set Execute as to Me and Who has access to Anyone.
4. Click Deploy and approve the permissions Google asks for. Copy the Web app URL. It ends in /exec.
5. Paste it into the settings:

provider: "googlesheets",
endpoint: "https://script.google.com/macros/s/AKfy.../exec",

Each signup becomes a row with the date, email, page, referrer and campaign tags.

Web3Forms

1. Go to web3forms.com, enter your email address and you will be sent an access key.
2. Paste the key into the settings. No endpoint is needed.

provider: "web3forms",
accessKey: "00000000-0000-0000-0000-000000000000",

The access key is meant to be public, so it is safe to leave in the page.

Mailchimp

1. In Mailchimp open Audience, then Signup forms, then Embedded forms.
2. In the generated code find the line that starts with <form action=" and copy the address inside the quotes. It looks like https://yourname.us21.list-manage.com/subscribe/post?u=...&id=...
3. Paste it into the settings:

provider: "mailchimp",
endpoint: "https://yourname.us21.list-manage.com/subscribe/post?u=XXXX&id=XXXX",

If your audience uses double opt-in, people get Mailchimp's confirmation email before they appear in the list.

Netlify Forms

This works only when the page is hosted on Netlify. Set the provider:

provider: "netlify",

Then add this hidden form anywhere inside <body>. Netlify reads it when you deploy so it knows which fields to store:

<form name="waitlist" data-netlify="true" hidden>
  <input name="email"><input name="page"><input name="referrer">
  <input name="joined_at"><input name="utm_source"><input name="utm_medium">
  <input name="utm_campaign"><input name="ref">
</form>

Your own API or a webhook

provider: "custom",
endpoint: "https://api.yoursite.com/waitlist",

The page sends a POST with a JSON body. Reply with any 2xx status for success. Anything else shows the error message. Your server must allow requests from your page's domain (CORS).

{
  "email": "sam@example.com",
  "page": "https://yoursite.com/",
  "referrer": "https://news.ycombinator.com/",
  "joined_at": "2026-10-02T17:45:12.000Z",
  "utm_source": "twitter"      // only when present in the page URL
}

What the visitor sees

• A wrong email address shows a short message under the form and nothing is sent.
• While sending, the button is disabled and reads "Sending…".
• If the request fails, the form stays so they can try again.
• On success the form is replaced by the thank-you message and the share links. The browser remembers this, so the same visitor sees the thank-you message next time.

All settings

Add any setting that is not already in the block as a new line. For example, to translate the messages and fire an analytics event:

textInvalid: "Bitte gib eine gültige E-Mail-Adresse ein.",
textFailed: "Das hat nicht geklappt. Bitte versuch es noch einmal.",
textSending: "Wird gesendet…",
onSuccess: function (email) {
  if (window.plausible) plausible("Waitlist signup");
}

The thank-you message itself is plain HTML: search the file for id="successMsg" and edit the text.

Signup counter

Some templates show a line such as "1,247 developers already waiting". That number comes from signupCount. Set it to your real number and update it when you like. On a visitor's screen it goes up by one after they join.

The number is not fetched from your form provider, so it does not change by itself between visits. Set signupCount: null if you would rather write your own text, or delete that line from the HTML.

To show the counter somewhere else, add the attribute to any element:

<span data-wl-count></span>                       1,247
<span data-wl-count data-wl-suffix="+"></span>    1,247+
<span data-wl-count="compact"></span>             1.2k

Customising

Colours

Most templates keep their colours as variables at the top of the <style> block. Change them there and the whole page follows:

:root {
  --accent: #6EE7B7;
  --bg: #0A0A0B;
  --text: #E8E8EA;
}

Also update <meta name="theme-color"> in the head so the phone browser bar matches.

Fonts

Fonts load from Google Fonts through the <link> in the head. Replace the family name in that link and in the font-family rules. To avoid Google Fonts, delete the link and the page falls back to system fonts.

Logo

Swap the text logo for an image:

<img src="logo.svg" alt="Your brand" height="28">

Social links

Search the file for href="#" and replace each # with your profile address. Delete the links you do not use.

Search and sharing

In the head, edit the <title>, the description and the two og: tags. To show a picture when the link is shared, upload a 1200 by 630 image and uncomment the og:image line. Replace the favicon line with your own icon.

Analytics

Paste your analytics snippet just before </head>.

Putting it online

The page is a static file, so any host works. Make sure the file is named index.html.

• Netlify: open app.netlify.com/drop and drag in the folder that holds your index.html.
• Cloudflare Pages: Workers and Pages, Create, Pages, Upload assets, then drag in the folder.
• Vercel: run npx vercel in the folder, or import a Git repository.
• GitHub Pages: put index.html in a repository and switch on Pages in the settings.
• Any other host: upload index.html to the public folder with your host's file manager or FTP.

Before you share the link, submit the form once with your own email and check that it arrived.

Privacy and consent

You are collecting personal data, so the rules where you and your visitors live apply to you. This is general information, not legal advice.

• Say what people are signing up for, near the form.
• Link to a privacy policy that names the service storing the emails.
• Only email people about what they signed up for, and let them unsubscribe.
• The templates load fonts from Google Fonts. If that is a concern in your country, remove the font link or host the fonts yourself.

The kit itself sets no cookies. It stores one small flag in the visitor's browser to remember that they have joined.

Troubleshooting

The countdown shows 00 : 00 : 00 : 00

The launch date is in the past, or its format is wrong. Use "YYYY-MM-DDTHH:MM:SS" with the letter T in the middle.

The form says "Something went wrong"

Open the browser console (F12, then Console) and submit again. The real error is printed there. Usual causes: a typo in endpoint, an empty endpoint or accessKey, or your own API not allowing requests from the page's domain.

The form works but no emails are saved

Check that provider is not still "demo". With Google Sheets, deploy the script again as a new version and confirm access is set to Anyone.

I joined once and now I only see the thank-you message

The browser remembers the signup. Open the page in a private window to see the form again, or clear the site data.

Testing from a file on my computer

Demo mode works by double-clicking the file. Some providers refuse requests from a file:// page, so test real signups from the uploaded page.

License

One purchase lets you use the templates on unlimited sites, for yourself and for clients, including commercial work. You may not resell, share or redistribute the templates or their source. The full text is in LICENSE.txt.

Need help? Reply to your purchase receipt email.