Free Coming Soon Page Template (HTML, CSS & JS, 2026)
A polished coming-soon / launching-soon page template with a live countdown timer and an email signup — responsive, accessible and ready to collect subscribers before you launch.
This free coming soon page template is a polished pre-launch page in HTML, CSS and a little JavaScript: a headline, a live countdown timer to your launch date and an email signup to collect subscribers. It’s responsive, accessible, and dependency-free — put it up while you build, and start growing a launch list.
What you get
- A centered, responsive hero with headline and subtext.
- A live countdown timer (days / hours / minutes / seconds) to a launch date.
- An accessible email signup with a success message via
aria-live. - CSS-variable theming and zero dependencies.
Try it live
The complete template runs live below — edit the HTML, CSS and JavaScript and watch the preview update instantly. Open it in XCODX Studio when you want to make it your own.
How it's built
A full-height centered hero with a headline, a short pitch, an email-capture field, and a live countdown to your launch date. The countdown is a few lines of vanilla JavaScript that recompute the days, hours, minutes and seconds every second from a single target date — change one constant and the timer follows. Everything is centered with flexbox and scales down cleanly to a phone.
- One
launchDateconstant drives the entire countdown - Flexbox centering that holds from desktop to mobile
- An email field ready to wire to your mailing-list provider
- No dependencies — the timer is about thirty lines of plain JS
How to customize
- Launch date: change the
launchdate incountdown.js. Once it passes, the timer shows "We’re live!". - Collect real emails: replace the TODO with a POST to a hosted service (Mailchimp, Buttondown, ConvertKit) or your own API.
- Brand it: change
--accent, the background gradient, and the fonts; add a logo image above the headline. - Social links: add a small row of links to your social accounts under the form.
- Keep it fast: it’s tiny already — see modern web performance checklist before you add heavy assets.
Frequently asked questions
How does the countdown timer work?
padStart for two-digit numbers and tabular-nums so the digits don’t jitter as they change.How do I collect the email signups?
TODO in the submit handler with a request to an email-collection service or your own backend. Hosted services like Mailchimp, ConvertKit or Buttondown give you a form endpoint or API you can POST the email to; if you build it yourself, send a fetch POST to your API over HTTPS and store the address.Is the coming soon page responsive?
clamp()), the countdown units wrap and scale with viewport-based spacing, and the signup form’s input flexes while the button stays sized. It looks right from small phones to large screens without any extra work.Do I need JavaScript for the countdown?
Build this coming-soon page live in XCODX Studio. See also the landing page template, contact form template and how to speed up JavaScript.