CONVERSION CTA
内联订阅框Inline Newsletter Form
标题 + 一行承诺 + 输入框 + 按钮，嵌在页尾或文章中段的常驻转化位。
效果预览
每周一封，只讲有用的
you@example.com
适合用在哪
博客页尾、首页页脚上方、文章中段、侧边栏。
容易踩的坑
- 输入框用 placeholder 代替 label，输入后提示消失，读屏也读不出字段用途。
- 没设 type="email" 和 autocomplete="email"，手机弹出全键盘且不能自动填充。
- 提交失败只把按钮变红不说原因，用户不知道是格式错还是已订阅过。
设计提示词 · Prompt
内联订阅框（Inline Newsletter Form）：结构一行化——左侧标题 + 一句具体承诺（"每周一封，只讲有用的增长打法"，说清频率和价值），右侧横向输入框 + 内嵌按钮。提交后按钮原地变"✓ 已订阅"。承诺要具体到"频率 + 内容 + 退订自由"；"订阅我们的资讯"这种空话没人订。区块背景与页面区分（浅品牌底或深色块）。社交证明加成：按钮下加一行"已有 4,000+ 订阅者"。放文章中段比页尾转化高 2-3 倍。
Inline Newsletter Form: a single-row structure — on the left a heading + one specific promise ("One email a week, only useful growth tactics", stating frequency and value); on the right a horizontal input with an embedded button. After submitting, the button turns into "✓ Subscribed" in place. The promise should spell out "frequency + content + freedom to unsubscribe"; empty copy like "Subscribe to our news" gets no sign-ups. Set the block's background apart from the page (light brand tint or dark block). Social proof boost: add a line under the button, "Join 4,000+ subscribers". Placing it mid-article converts 2-3x better than at the page end.
常见搭配
同一页面里经常和「内联订阅框」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-newsl">
<h4 class="d-h3">每周一封，只讲有用的</h4>
<div class="d-newsl__form">
<span class="d-newsl__input">you@example.com</span>
<button class="d-btn d-btn--p">订阅</button>
</div>
<div class="d-newsl__meta">
<span>✓ 每周四发送</span><span>✓ 4,000+ 订阅</span><span>✓ 随时退订</span>
</div>
</div>