components-newsletter-signup
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseComponents: Newsletter Signup
组件：Newsletter订阅表单
Guides newsletter signup form design for list growth. Email subscribers spend 138% more than non-subscribers; top popups convert at 23%+.
When invoking: On first use, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.
用于指导newsletter订阅表单的设计，实现用户列表增长。电子邮件订阅者的消费额比非订阅者高138%；优质弹窗的转化率可达23%以上。
调用规则：首次使用时如果合适，可以先用1-2句话介绍该技能覆盖的内容及其重要性，再提供核心输出。如果是后续调用或者用户要求跳过介绍，直接输出核心内容即可。
Initial Assessment
初步评估
Check for product marketing context first: If or exists, read it for audience and value proposition.
.claude/product-marketing-context.md.cursor/product-marketing-context.mdIdentify:
- Placement: Header, footer, popup, inline, sidebar
- Incentive: What subscribers receive
- Platform: Web, mobile, both
优先检查产品营销上下文：如果存在或，请读取该文件了解受众和价值主张。
.claude/product-marketing-context.md.cursor/product-marketing-context.md识别以下信息：
- 放置位置：头部、页脚、弹窗、行内、侧边栏
- 激励措施：订阅者可获得的权益
- 适用平台：网页、移动端、两者均支持
Form Design
表单设计
Minimal Fields
最小字段原则
- Email only when possible; highest conversion
- Add name only if needed for personalization
- Wrong number of fields significantly impacts conversion
- 尽可能仅保留邮箱字段，转化率最高
- 仅当需要个性化内容时才添加姓名字段
- 字段数量不合理会严重影响转化率
Value Proposition
价值主张
- Clear: what subscribers receive, how often
- Transparent: avoid disappointing subscribers
- Incentive: lead magnet, discount, exclusive content
- 清晰明确：说明订阅者可获得的内容、推送频率
- 公开透明：避免让订阅者产生预期落差
- 激励措施：lead magnet、折扣、独家内容
Visual Design
视觉设计
- Clearly clickable submit button
- Mobile-first; responsive layout
- Appropriate input types (e.g., for mobile keyboards)
type="email" - Trust marks or security indicators
- 提交按钮清晰可点击
- 移动端优先，响应式布局
- 使用合适的输入类型（例如移动端键盘适配）
type="email" - 添加信任标识或安全提示
Placement
放置位置
| Placement | Best For | Pros | Cons |
|---|---|---|---|
| Header | High visibility | Always visible | Limited space |
| Footer | Secondary capture | Non-intrusive | Lower visibility |
| Footer bar | Persistent | Sticky | Can annoy |
| Popup | High intent | High conversion | Intrusive |
| Inline | Content pages | Contextual | Depends on scroll |
- Avoid hiding forms behind unclicked buttons/links
- Don't place competing forms nearby
| 放置位置 | 适用场景 | 优势 | 劣势 |
|---|---|---|---|
| 头部 | 高曝光需求 | 始终可见 | 空间有限 |
| 页脚 | 次一级用户捕获 | 无侵扰性 | 曝光量较低 |
| 页脚栏 | 持久展示需求 | 粘性展示 | 可能引发用户反感 |
| 弹窗 | 高意向用户转化 | 转化率高 | 有侵扰性 |
| 行内 | 内容页嵌入 | 场景相关 | 转化效果依赖用户滚动行为 |
- 不要将表单隐藏在未点击的按钮/链接后方
- 不要在表单附近放置功能冲突的其他表单
Accessibility
无障碍设计
| Requirement | Practice |
|---|---|
| Labels | |
| Placeholders | Don't replace labels; supplement only |
| Error messages | Clear, associated with field |
| Keyboard | Full tab order; submit via Enter |
| Touch targets | ≥44×44px for submit button |
| 要求 | 实践规范 |
|---|---|
| 标签 | 每个输入框对应 |
| 占位符 | 不要替代标签，仅作为补充信息 |
| 错误提示 | 清晰明确，与对应字段关联 |
| 键盘操作 | 完整的tab跳转顺序，支持按Enter提交 |
| 触控目标 | 提交按钮尺寸≥44×44px |
Technical
技术规范
- Validation: Client-side; server-side required
- Privacy: Link to privacy policy; GDPR/CCPA compliance
- Double opt-in: When required by jurisdiction or best practice
- 校验：必须同时支持客户端和服务端校验
- 隐私：链接到隐私政策，符合GDPR/CCPA合规要求
- 双重确认订阅：当司法管辖区要求或最佳实践推荐时使用
Output Format
输出格式
- Form structure (fields, copy)
- Placement recommendation
- Value proposition suggestions
- Accessibility checklist
- 表单结构（字段、文案）
- 放置位置建议
- 价值主张优化建议
- 无障碍设计检查清单
Related Skills
相关技能
- components-footer: Footer often hosts signup forms
- components-cta: Submit button is a CTA
- components-trust-badges: Trust marks near form
- components-footer：页脚通常会放置订阅表单
- components-cta：提交按钮属于CTA的一种
- components-trust-badges：表单附近的信任标识组件