FOOTER & SHELL
订阅页脚Newsletter Footer
深色底、大标题、单行邮箱订阅。适合内容型产品把访客沉淀成可反复触达的名单。
效果预览
每周三一封，只写做站心得
没有广告，也不转发别人的内容。任何时候可以退订。
you@email.com订阅
我们会遵守隐私政策，不会把你的邮箱给第三方。
适合用在哪
博客、周刊、内容社区、独立开发者产品的页脚。
容易踩的坑
- 输入框占位符当作唯一标签，读屏用户不知道该填什么，应加 sr-only label。
- 半透明白底输入框在深色底上边界对比度不足 3:1，用户找不到输入区域。
- 未做双重确认就直接入库，垃圾邮箱和拼写错误会拉低送达率。
设计提示词 · Prompt
订阅页脚（Newsletter Footer）：深色底（#17171b）、白字、圆角 11px、内边距 13-18px。一行 12px 加粗标题（说清楚订阅会收到什么、多久一封，如「每周三一封，只写做站心得」），一行 9px 半透明说明，然后一行表单：flex 输入框（flex:1，半透明白底 + 细描边 + 占位符）+ 白底深字的按钮。表单下方一行 8px 更淡的说明（如「随时可退订，不发广告」，降低提交顾虑）。提交后用整块替换为「已订阅，去邮箱确认」的成功态。
Newsletter Footer: dark background (#17171b), white text, 11px radius, 13-18px padding. One 12px bold title line (say what subscribers get and how often, e.g. "One email every Wednesday, only site-building notes"), one 9px semi-transparent line of explanation, then a single-row form: a flex input (flex:1, semi-transparent white background + thin border + placeholder) + a button with white background and dark text. Below the form, an even fainter 8px note (e.g. "Unsubscribe anytime, no ads") to lower submission hesitation. After submission, replace the whole block with a success state: "Subscribed — check your inbox to confirm".
常见搭配
同一页面里经常和「订阅页脚」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="sh-news"> <b>每周三一封，只写做站心得</b> <p>没有广告，也不转发别人的内容。任何时候可以退订。</p> <div class="sh-news__f"><i>you@email.com</i><em>订阅</em></div> <div class="sh-news__note">我们会遵守隐私政策，不会把你的邮箱给第三方。</div> </div>