AMP Email 不支持 JavaScript，但可通过 amp-bind 和状态管理实现基于用户选择的动态题干切换；本文详解如何用 amp-state、[hidden] 绑定与 amp-selector 构建可交互的多步问卷流程，并指出常见失效原因及修复方案。
amp email 不支持 javascript，但可通过 `amp-bind` 和状态管理实现基于用户选择的动态题干切换；本文详解如何用 `amp-state`、`[hidden]` 绑定与 `amp-selector` 构建可交互的多步问卷流程，并指出常见失效原因及修复方案。
在 AMP Email 中实现“答完上一题才显示下一题”的交互逻辑，核心在于利用 AMP 的声明式响应式绑定机制替代传统 JS 控制流。由于 Gmail、Yahoo 等主流邮件客户端仅支持有限的 AMP for Email 组件（且禁用脚本执行），你无法使用 React 或原生事件监听器来驱动 DOM 变更——必须完全依赖 amp-bind 的状态驱动渲染。
✅ 正确实现要点
-
启用严格 CSS 模式
邮件客户端可能因样式隔离策略导致 [hidden] 绑定失效。务必在 标签中添加 data-css-strict 属性： -
用 amp-state 管理当前题号与答案 初始化状态时明确设置起始题号，并为每道题预留独立字段（便于后续提交）：
<amp-state id="formState"><script type="application/json"> { "currentQuestion": 1, "answer1": "", "answer2": "", "answer3": "", "answer4": "", "answer5": "" } </script></amp-state> -
使用 amp-selector 触发题号切换
amp-selector 是邮件中唯一支持“点击即更新状态”的交互组件（<amp-selector layout="container" name="navSelector" keyboard-select-mode="focus"><div option="1" selected role="button" tabindex="0">Q1</div> <div option="2" role="button" tabindex="0">Q2</div> <div option="3" role="button" tabindex="0">Q3</div> <!-- ... --> </amp-selector>
-
用 [hidden] 动态控制题干显隐
每个通过绑定表达式控制是否隐藏。注意：不能用 amp-mustache 包裹多个 （模板仅用于服务端渲染静态内容，不参与运行时绑定）——所有题干需写在模板外，直接使用 [hidden]： <!-- Question 1 --> <section><label>1. Would you love to partner with KNOTOPIAN?</label> <input type="date" name="question1" on="change:AMP.setState({formState: {currentQuestion: 2, answer1: event.value}})"></section><!-- Question 2 --><section><label>2. Would you give us a chance to display our portfolio?</label> <input type="date" name="question2" on="change:AMP.setState({formState: {currentQuestion: 3, answer2: event.value}})"></section><!-- 后续题目依此类推 --> -
提交按钮条件显示
仅当到达最后一题时显示提交按钮，并确保 type="submit" 与 form 关联：<button type="submit" class="submit-btn"> Submit All Answers </button>
⚠️ 关键注意事项
-
amp-bind 在 Gmail/Yahoo 中需显式启用：确保 中引入了 amp-bind 扩展脚本，且未被 CDN 缓存旧版本：
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
- 禁止使用 event.targetOption：amp-selector 的 event.targetOption 在部分客户端（如 Gmail iOS）存在兼容性问题，推荐改用预设 option 值 + select 事件直接赋值。
- 输入框需绑定 on="change:..." 而非 on="input:..."：邮件客户端对实时输入事件支持极弱，change（失焦或回车确认）更可靠。
- 服务端接收时需处理空值：用户可能跳过某题，后端应允许 question2 等字段为空。
- 测试务必使用真实环境：本地预览或浏览器打开 .html 文件无法模拟邮件客户端限制，必须通过 AMP Email Playground 或实际发送至 Gmail 测试。
✅ 完整可运行片段（精简版）
<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-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script><style amp-custom>
section { margin: 20px 0; }
.submit-btn { background: #4CAF50; color: white; border: none; padding: 12px 24px; }
</style>
通过以上结构，你就能在严格受限的 AMP Email 环境中，构建出真正可用的分步式交互表单——无需妥协用户体验，也无需绕过 AMP 规范。记住：状态即 UI，绑定即逻辑，约束即保障。
