Design Atlas
한국어
▭ Landing page patterns

Newsletter signup

뉴스레터 가입

A minimal one-field form that captures an email from visitors not ready to sign up or pay yet.

Also known as: Email captureSubscribe form
···
html
<div class="signup">
  <h3>Get product updates</h3>
  <p>One email a week. Unsubscribe anytime.</p>
  <div class="form" id="form">
    <div class="input"><span id="typed"></span><i class="caret"></i></div>
    <button id="submit">Subscribe</button>
  </div>
  <div class="success" id="success"><span class="check">&check;</span> You're subscribed</div>
</div>
css
.signup{width:min(90%,520px);display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.5vmin,10px);
  text-align:center}
.signup h3{margin:0;font-size:clamp(11px,2.6vmin,18px);font-weight:800}
.signup p{margin:0;font-size:clamp(7px,1.4vmin,11px);color:var(--muted)}
.form{display:flex;gap:clamp(4px,1vmin,8px);width:100%;margin-top:clamp(4px,1vmin,6px)}
.input{flex:1;text-align:left;border:1px solid var(--line);border-radius:8px;background:var(--surface);
  padding:clamp(6px,1.5vmin,10px) clamp(8px,1.8vmin,12px);font-size:clamp(7px,1.4vmin,11px);color:var(--fg);
  display:flex;align-items:center}
.caret{width:1px;height:1em;background:var(--muted);margin-left:2px;animation:blink 1s step-end infinite}
.form button{font-size:clamp(7px,1.4vmin,11px);font-weight:700;padding:0 1.3em;border-radius:8px;border:none;
  background:var(--accent);color:#fff}
.success{display:none;align-items:center;gap:6px;font-size:clamp(8px,1.6vmin,12px);font-weight:700;
  color:var(--accent-3);margin-top:clamp(4px,1vmin,6px)}
.success.show{display:flex}
.form.hide{display:none}
.check{width:clamp(14px,2.8vmin,20px);height:clamp(14px,2.8vmin,20px);border-radius:50%;background:var(--accent-3);
  color:#fff;display:grid;place-items:center;font-size:.7em}
@keyframes blink{50%{opacity:0}}
js
const EMAIL = 'you@example.com';
const typed = document.getElementById('typed');
const form = document.getElementById('form');
const success = document.getElementById('success');
function reset() {
  form.classList.remove('hide');
  success.classList.remove('show');
  typed.textContent = '';
}
function run() {
  reset();
  let i = 0;
  const type = setInterval(function () {
    typed.textContent = EMAIL.slice(0, i);
    i++;
    if (i > EMAIL.length) {
      clearInterval(type);
      setTimeout(function () {
        form.classList.add('hide');
        success.classList.add('show');
      }, 400);
    }
  }, 90);
}
run();
setInterval(run, 4600);

Not every visitor is ready to buy or sign up. This section's job is to not lose them entirely — capture just an email so there's a channel to reach them later. Keep it to one field and one button, as light as it can be.

Feedback matters: the instant someone submits, the form should switch to a success state (a checkmark, "You're subscribed") — leaving the form as-is makes visitors unsure whether it worked, so they either resubmit or leave. Stating what they'll get and how often ("one email a week, product news only") in a single line lowers the barrier to signing up.

Asking for a password or a full name alongside the email makes a newsletter signup feel heavier than it should, and drop-off climbs. And sending anything other than what was promised — sales pitches instead of the newsletter — breaks the trust that got the email in the first place.

When to use

Fits content or blog-style pages where most visitors won't convert on the first visit. If a strong CTA (like a free trial) already exists, don't place a weaker email-only CTA next to it — they compete.