Newsletter Signup HTML Template
Collect subscribers with a friendly headline, description, and accessible signup form.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stay in the Loop | Newsletter</title>
<style>
body { font-family: 'Inter', sans-serif; background: radial-gradient(circle at top,#fce7f3,#e0f2fe); min-height: 100vh; display: grid; place-items: center; margin: 0; }
.card { background: white; border-radius: 1.5rem; padding: 2.5rem; width: min(420px, 90vw); box-shadow: 0 30px 60px rgba(15, 23, 42, 0.15); text-align: center; }
h1 { margin-bottom: 0.5rem; }
p { color: #475569; margin-bottom: 1.5rem; }
form { display: flex; flex-direction: column; gap: 0.75rem; }
input { border-radius: 999px; border: 1px solid #c7d2fe; padding: 0.9rem 1.2rem; font-size: 1rem; }
button { border: none; border-radius: 999px; background: #2563eb; color: white; padding: 0.9rem; font-weight: 600; cursor: pointer; }
small { display: block; color: #94a3b8; margin-top: 0.75rem; }
</style>
</head>
<body>
<section class="card">
<h1>Stay in the loop</h1>
<p>Monthly insights on design systems, creative process, and tools we’re excited about.</p>
<form>
<input type="email" name="email" placeholder="Email address" required />
<button type="submit">Subscribe</button>
<small>No spam, unsubscribe anytime.</small>
</form>
</section>
</body>
</html>