AMP Email 不支持 JavaScript，但可通过 amp-bind 和状态管理动态控制问题的逐级显示，本文详解实现原理、完整代码及关键限制与注意事项。
amp email 不支持 javascript，但可通过 `amp-bind` 和状态管理动态控制问题的逐级显示，本文详解实现原理、完整代码及关键限制与注意事项。
在 AMP Email 中实现“答完上一题才显示下一题”的交互效果，核心在于利用 AMP 的声明式数据绑定机制（amp-bind）配合 <amp-selector> 或按钮事件更新状态，并通过 [hidden] 属性动态控制 DOM 元素的可见性。需特别注意：AMP Email 的运行环境极度受限——不执行 JS、不支持 localStorage、无传统表单提交逻辑，所有交互必须基于 AMP 组件原生能力实现。
✅ 正确实现方式：状态驱动 + 条件渲染
以下是一个精简、可落地的 AMP Email 表单示例，严格遵循 AMP for Email 规范，已在 Gmail（支持 amp-bind）中验证可用：
<!DOCTYPE html>
<html ⚡4email data-css-strict>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
<style amp-custom>
body { font-family: Arial, sans-serif; margin: 0; padding: 16px; }
.question { margin-bottom: 24px; }
.btn { background: #4CAF50; color: white; border: none; padding: 10px 16px; font-size: 16px; cursor: pointer; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
</style>
</head>
<body>
<amp-state id="formState">
<script type="application/json">
{
"currentQuestion": 1,
"answers": {}
}
</script>
</amp-state>
<form
action-xhr="https://your-api.com/submit"
method="POST"
target="_top"
>
<!-- Question 1 -->
<div class="question" [hidden]="formState.currentQuestion !== 1">
<h3>1. Would you love to partner with KNOTOPIAN?</h3>
<p>If Yes, pick a date to schedule a quick sync-up.</p>
<input type="date" name="q1_date" required />
<button type="button" on="tap:AMP.setState({formState: {currentQuestion: 2}})" class="btn">Next →</button>
</div>
<!-- Question 2 -->
<div class="question" [hidden]="formState.currentQuestion !== 2">
<h3>2. Would you like to see our portfolio?</h3>
<p>We’ve delivered jaw-dropping eLearning in just 7 days!</p>
<input type="text" name="q2_feedback" placeholder="Your thoughts?" required />
<button type="button" on="tap:AMP.setState({formState: {currentQuestion: 3}})" class="btn">Next →</button>
</div>
<!-- Question 3 (final) -->
<div class="question" [hidden]="formState.currentQuestion !== 3">
<h3>3. Ready to explore collaboration?</h3>
<p>We’re available 24×7 and won a LearnX Gold Award!</p>
<input type="email" name="q3_email" placeholder="Your email" required />
<button type="submit" class="btn">Submit All Answers</button>
</div>
</form>
</body>
</html>? 关键要点说明
- data-css-strict 是必需属性：启用严格的 CSS 验证，避免因样式问题导致邮件被拒收；
- 禁用 <amp-selector> 用于多选逻辑：它不适用于“线性流程”控制；应使用 on="tap:AMP.setState(...)" 显式切换状态；
- [hidden] 是唯一可靠显示控制方式：不要依赖 CSS 类（如 .hide/.show），因部分邮箱客户端会忽略内联 class 绑定；
- 状态需集中管理：<amp-state> 存储当前题号和用户输入（如 formState.answers.q1 = event.value 可扩展），但注意：AMP Email 无法持久化中间状态，所有答案必须在最终 submit 时一并发送；
- 按钮类型必须为 type="button"：避免意外触发表单提交；仅最后一题使用 type="submit"；
- Gmail 是主要支持平台：Yahoo Mail、Outlook 等不支持 amp-bind，其用户将看到全部问题静态展示（需降级兼容设计）。
⚠️ 重要限制与建议
- ❌ 无法真正“保存中间答案”：AMP Email 没有本地存储能力，amp-bind 状态仅在当前会话内存中存在，页面刷新即丢失；
- ✅ 推荐降级方案：对不支持 amp-bind 的客户端，可借助 @supports (display: -ms-grid) 等 CSS 特性检测，或通过 <style amp-nonblocking> 提供纯 HTML 备份视图；
- ✅ 服务端需校验完整性：因前端无法保证用户完成全部步骤，后端必须校验必填字段是否齐全；
- ✅ 测试务必覆盖真实环境：使用 AMP Email Playground 预览，并通过 Gmail 账号实测接收效果。
通过合理运用 amp-bind 状态机与 [hidden] 绑定，你可以在支持的邮箱（主要是 Gmail）中构建出流畅的分步表单体验——既符合 AMP 安全沙箱约束，又显著提升用户参与度。
