Components: Newsletter Signup
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.
Initial Assessment
Check for project context first: If .claude/project-context.md or .cursor/project-context.md exists, read it for audience and value proposition.
Identify:
- 1. Placement: Header, footer, popup, inline, sidebar
- Incentive: What subscribers receive
- Platform: Web, mobile, both
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
Visual Design
- - Clearly clickable submit button
- Mobile-first; responsive layout
- Appropriate input types (e.g.,
type="email" for mobile keyboards) - Trust marks or security indicators
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 | INLINECODE3 for each input; for/id association |
| 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 |
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
Output Format
- - Form structure (fields, copy)
- Placement recommendation
- Value proposition suggestions
- Accessibility checklist
Related Skills
- - signup-login-page-generator: Full account signup; form design principles apply
- landing-page-generator: Lead capture landing page contains signup form; LP exchanges value for email
- email-marketing: Full email marketing strategy; EDM, newsletter, deliverability, content types
- footer-generator: Footer often hosts signup forms
- cta-generator: Submit button is a CTA
- trust-badges-generator: Trust marks near form
组件:新闻通讯注册
指导新闻通讯注册表单设计,助力邮件列表增长。邮件订阅者的消费额比非订阅者高出138%;优质弹窗的转化率可达23%以上。
调用方式:在首次使用时,如有帮助,可用1-2句话说明该技能涵盖的内容及其重要性,然后提供主要输出。在后续使用或用户要求跳过时,直接提供主要输出。
初始评估
首先检查项目上下文: 如果存在 .claude/project-context.md 或 .cursor/project-context.md,请读取其中的受众信息和价值主张。
确定:
- 1. 位置:页眉、页脚、弹窗、内联、侧边栏
- 激励措施:订阅者将获得什么
- 平台:网页端、移动端、两者兼有
表单设计
最少字段
- - 仅需邮箱时尽量采用;转化率最高
- 仅在需要个性化时添加姓名
- 字段数量不当会显著影响转化率
价值主张
- - 清晰明确:订阅者将收到什么内容、发送频率
- 透明公开:避免让订阅者失望
- 激励措施:引流诱饵、折扣、独家内容
视觉设计
- - 清晰可点击的提交按钮
- 移动优先;响应式布局
- 适当的输入类型(例如,移动键盘使用 type=email)
- 信任标识或安全指示
位置选择
| 位置 | 最适合 | 优点 | 缺点 |
|---|
| 页眉 | 高可见性 | 始终可见 | 空间有限 |
| 页脚 |
次要捕获 | 不打扰用户 | 可见性较低 |
|
页脚栏 | 持续展示 | 固定显示 | 可能引起反感 |
|
弹窗 | 高意向用户 | 转化率高 | 具有侵入性 |
|
内联 | 内容页面 | 上下文相关 | 依赖滚动位置 |
- - 避免将表单隐藏在未点击的按钮/链接后面
- 不要在附近放置竞争性表单
无障碍性
| 要求 | 实践 |
|---|
| 标签 | 每个输入框使用 <label>;for/id 关联 |
| 占位符 |
不要替代标签;仅作为补充 |
|
错误消息 | 清晰明确,与字段关联 |
|
键盘操作 | 完整的Tab顺序;通过回车键提交 |
|
触摸目标 | 提交按钮尺寸≥44×44像素 |
技术要求
- - 验证:客户端验证;必须进行服务器端验证
- 隐私:链接到隐私政策;符合GDPR/CCPA要求
- 双重确认:在司法管辖区要求或最佳实践推荐时使用
输出格式
- - 表单结构(字段、文案)
- 位置建议
- 价值主张建议
- 无障碍性检查清单
相关技能
- - signup-login-page-generator:完整账户注册;表单设计原则适用
- landing-page-generator:潜在客户捕获落地页包含注册表单;落地页以价值换取邮箱
- email-marketing:完整邮件营销策略;EDM、新闻通讯、送达率、内容类型
- footer-generator:页脚通常包含注册表单
- cta-generator:提交按钮即是一个行动号召
- trust-badges-generator:表单附近的信任标识