Giới thiệu
Newsletter signup form thu thập email người dùng để gửi bản tin. Thiết kế gọn nhẹ, tập trung vào conversion: tiêu đề hấp dẫn, ô email lớn, nút CTA nổi bật, tùy chọn checkbox fréquence.
Ví dụ hoàn chỉnh
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Newsletter Signup</title>
<style>
* { box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #fafafa; padding: 40px 20px; }
.newsletter-card {
max-width: 480px;
margin: 0 auto;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 16px;
padding: 40px;
box-shadow: 0 4px 24px rgba(0,0,0,0.05);
text-align: center;
}
.newsletter-icon {
width: 64px;
height: 64px;
margin: 0 auto 20px;
background: linear-gradient(135deg, #1eadef, #512c94);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 28px;
}
h1 { margin: 0 0 8px; font-size: 26px; color: #1a1a1a; }
.subtitle { margin: 0 0 28px; color: #666; font-size: 15px; line-height: 1.6; }
.form-group { text-align: left; margin-bottom: 20px; }
label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px; color: #333; }
input[type="text"], input[type="email"] {
width: 100%;
padding: 14px 16px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 8px;
transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus { outline: none; border-color: #1eadef; box-shadow: 0 0 0 3px rgba(30,173,239,0.15); }
.checkbox-group {
display: flex;
align-items: flex-start;
gap: 10px;
text-align: left;
font-size: 14px;
color: #444;
}
.checkbox-group input { width: 18px; height: 18px; margin-top: 2px; accent-color: #1eadef; flex-shrink: 0; }
.btn-subscribe {
width: 100%;
margin-top: 8px;
padding: 16px;
font-size: 16px;
font-weight: 600;
color: #fff;
background: linear-gradient(135deg, #1eadef, #512c94);
border: none;
border-radius: 8px;
cursor: pointer;
transition: transform 0.1s, box-shadow 0.2s;
}
.btn-subscribe:hover { box-shadow: 0 6px 20px rgba(30,173,239,0.3); }
.btn-subscribe:active { transform: scale(0.98); }
.privacy-note { margin-top: 16px; font-size: 12px; color: #999; }
.privacy-note a { color: #1eadef; text-decoration: none; }
.privacy-note a:hover { text-decoration: underline; }
@media (max-width: 480px) {
.newsletter-card { padding: 28px 20px; }
h1 { font-size: 22px; }
}
</style>
</head>
<body>
<div class="newsletter-card">
<div class="newsletter-icon"><i class="fas fa-envelope"></i></div>
<h1>Đăng ký nhận bản tin</h1>
<p class="subtitle">Nhận các bài viết mới nhất, mẹo hay và ưu đãi độc quyền trực tiếp vào hòm thư của bạn. Không spam, hủy đăng ký bất cứ lúc nào.</p>
<form>
<div class="form-group">
<label for="name">Tên của bạn</label>
<input type="text" id="name" name="name" placeholder="Nguyễn Văn An" required autocomplete="name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="email@example.com" required autocomplete="email">
</div>
<div class="checkbox-group">
<input type="checkbox" id="daily" name="frequency" value="daily">
<label for="daily">Nhận bản tin hàng ngày (mặc định hàng tuần)</label>
</div>
<button type="submit" class="btn-subscribe">Đăng ký ngay</button>
<p class="privacy-note">Bằng cách đăng ký, bạn đồng ý với <a href="#">Chính sách bảo mật</a> và <a href="#">Điều khoản sử dụng</a>.</p>
</form>
</div>
</body>
</html>
Yếu tố chuyển đổi (Conversion-focused)
- Headline rõ lợi ích: "Nhận bài viết mới, mẹo hay, ưu đãi độc quyền".
- Social proof: Thêm "Đã có 10.000+ người đăng ký" nếu có.
- Ít trường bắt buộc: Chỉ Email là bắt buộc, Name tùy chọn.
- Checkbox tần suất: Cho phép chọn daily/weekly, giảm unsubscribe.
- CTA button nổi bật: Gradient, full-width, hover effect.
- Trust signals: Link privacy policy, "không spam".
Biến thể: Inline Newsletter (trong footer/content)
.newsletter-inline {
display: flex;
gap: 12px;
max-width: 500px;
margin: 0 auto;
}
.newsletter-inline input { flex: 1; }
.newsletter-inline button { white-space: nowrap; }
@media (max-width: 480px) {
.newsletter-inline { flex-direction: column; }
}