← All templates
Newsletter
Newsletter signup
Single-field email capture. Pipe to Mailchimp or your list.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Newsletter</title>
<style>
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: linear-gradient(135deg, #ede9fe 0%, #fce7f3 100%); color: #111827; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.card { max-width: 460px; width: 100%; background: #fff; padding: 36px; border-radius: 16px; box-shadow: 0 24px 64px rgba(15,23,42,.10); text-align: center; }
.icon { width: 48px; height: 48px; margin: 0 auto 16px; background: #4f46e5; border-radius: 12px; display: grid; place-items: center; color: #fff; }
h1 { font-size: 24px; margin: 0 0 8px; letter-spacing: -0.02em; }
p.lead { color: #6b7280; margin: 0 0 24px; font-size: 15px; }
form { display: flex; gap: 8px; }
input { flex: 1; padding: 12px 14px; font-size: 14px; border: 1px solid #d1d5db; border-radius: 10px; box-sizing: border-box; font-family: inherit; }
input:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
button { padding: 12px 20px; background: #4f46e5; color: #fff; border: 0; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
button:hover { background: #4338ca; }
.small { font-size: 12px; color: #9ca3af; margin: 16px 0 0; }
@media (max-width: 420px) { form { flex-direction: column; } }
</style>
</head>
<body>
<div class="card">
<div class="icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
</div>
<h1>Get the weekly digest</h1>
<p class="lead">One short email every Friday. No spam, unsubscribe anytime.</p>
<form action="https://formserve.io/f/your-endpoint-key" method="POST">
<input name="email" type="email" placeholder="you@example.com" required>
<button type="submit">Subscribe</button>
</form>
<p class="small">We'll never share your address.</p>
</div>
</body>
</html>
Make it yours
- Copy the HTML above and paste it into your page.
-
Replace
your-endpoint-keyin theactionattribute with the endpoint key from your Formserve dashboard. - Style it to match your site — every class is yours to override.
Don't have a Formserve account yet? Create one free.