Newsletter Signup Template

What's included

Newsletter landing pages have one job: convince a stranger to trust you with their inbox. This template strips away navigation clutter and puts the signup form above the fold on every screen size. Like every LaunchStatic file, it ships as a single HTML document with embedded CSS and a tiny inline script for demo mode.

• Masthead block — italic serif newsletter name and a schedule tagline (weekly cadence, send day, read time)
• Value headline and lead — one sentence on what subscribers learn, plus social proof numbers you can swap for real stats
• Email signup form — optional first-name field, required email input, and submit button wired for Formspree via data-endpoint
• Success state — inline confirmation message when the form submits in demo mode or after a real Formspree post
• Perks list — three subscriber benefits with icon bullets to answer "why should I subscribe?"
• Trust note — anti-spam reassurance directly below the form
• Warm editorial theme — cream background and gold accent suited to writing-focused brands; changeable via CSS variables

Use cases

Email remains the highest-ROI channel for indie creators who own their audience. This page fits anyone who publishes on Substack or Beehiiv but wants a custom domain landing page that matches their site design. Solo founders writing a pre-launch diary can pair this template with the Waitlist template — use the waitlist page for product signups and the newsletter page for ongoing content subscribers.

Developers documenting their build-in-public journey get a fast path to "subscribe for weekly updates" without adding Mailchimp's bloated embed script. Consultants and coaches can highlight subscriber perks like office hours, template drops, or early-access pricing. Even established newsletters benefit from a lightweight archive-adjacent signup page that loads instantly when shared on social media.

The Formspree integration means you are not locked into one email provider. Collect addresses via Formspree, then sync to ConvertKit, Buttondown, or a plain CSV export. For conversion tactics beyond layout, read the Waitlist Conversion Playbook — many of the same principles apply to newsletter signups.

Customization

The visual identity lives in the :root block. --accent controls the submit button and perk icons; --bg sets the warm cream default. For a tech newsletter, switch to a dark palette similar to the Waitlist template. For a design-focused letter, keep the serif masthead font (--font: Georgia) and tighten the max-width.

Rename Draft & Ship to your newsletter title and update the tagline with your real send schedule. Replace the social proof line ("1,847 readers") with honest numbers — even "142 readers in 12 countries" converts better than no proof at all. Edit the three perk bullets to describe tangible subscriber value: exclusive essays, downloadable resources, or community access.

To connect a live form, create a free Formspree account and replace YOUR_FORM_ID in the data-endpoint attribute. Full wiring steps are in How to add Formspree to a static site and the Formspree tool guide. For Netlify Forms instead, remove the demo script and add data-netlify="true" to the form tag — both backends work on static hosts with zero server code.

Add a privacy policy link in the footer before you collect emails in the EU or California. Our privacy policy how-to walks through the minimum disclosures for a simple signup form.

Deployment checklist

A newsletter page fails quietly when the form does not work — you will not notice until weeks later when subscriber count stays flat. Run this checklist on staging before promoting the URL.

1. Set a real Formspree endpoint — confirm data-endpoint no longer contains the YOUR_FORM_ID placeholder
2. Submit a test email — verify the entry appears in your Formspree dashboard or connected ESP
3. Check mobile form UX — email keyboard should appear on tap; submit button must be visible without horizontal scroll
4. Update page metadata — title and description should name your newsletter, not "Draft & Ship"
5. Add canonical and OG tags — mirror the patterns on this detail page so Twitter and LinkedIn previews look professional
6. Deploy to static host — follow Cloudflare Pages Complete Guide or pick a workflow from Deploy Guides
7. Link from your main site — add a Subscribe nav item on your homepage or blog so the signup page is not an orphan URL

After launch, track signup rate with Umami or Plausible UTM parameters. The Static Site SEO Handbook covers metadata and analytics setup for one-page sites.

FAQ

How is this different from the Waitlist template?

The Waitlist template uses a dark, product-launch aesthetic with a single email field and early-access perks. This newsletter template uses a warmer editorial design, adds an optional first-name field, and frames perks around ongoing content rather than a one-time product drop. Pick Waitlist for pre-launch validation; pick Newsletter for recurring publication.

Can I integrate with ConvertKit or Buttondown directly?

Yes. Replace the Formspree form markup with your provider's embed code, or point the form action to their API endpoint. The layout stays the same — only the <form> innards change. Formspree is the default because it works on any static host without provider-specific build plugins.

Does the demo script work offline?

When YOUR_FORM_ID is still in the endpoint, submitting the form shows the inline success message without a network request. That lets you preview the full UX locally. Once you set a real endpoint, the script posts to Formspree and the browser handles the redirect or JSON response per your Formspree settings.

Do I need double opt-in?

Depends on your provider and jurisdiction. Formspree can forward to ESPs that enforce double opt-in automatically. Mention your confirmation flow in the success message copy ("Check your inbox for a confirmation link") so subscribers know what to expect. Consult your ESP documentation for GDPR and CAN-SPAM compliance details.

License

This template is released under the MIT License. Use it for personal newsletters, client projects, or commercial publications. No attribution required. The MIT comment in the downloaded HTML source documents your right to modify and redistribute the code.