会议调查电子邮件

简介

此示例演示如何构建一个包含简单交互式调查的 AMP 电子邮件。

电子邮件的主要内容，一张图片和对活动的简短描述。

最近的 AMP 会议这几天非常忙碌。我们希望您度过了一段美好的时光！

<amp-img class="m1" width="600" height="314" layout="responsive" src="https://amp.org.cn/static/img/sharing/default-600x314.png"></amp-img>
<p>It’s been a busy few days at the latest AMP conference. We hope you had a good time!</p>

为了进行调查，我们使用带有单选按钮输入字段的 amp-form。

表单的第二步，自由文本输入，最初是隐藏的，并在用户选择评分后显示，因为这会触发 change 事件。

当表单提交时，我们使用 <div submit-success> 向用户显示一条简短的确认消息。

<form method="post" action-xhr="https://amp.org.cn/documentation/examples/api/submit-form-input-text-xhr">
  <div class="m1">
    <p>How would you rate this year's conference?</p>

    <input type="radio" id="rating1" name="rating" value="3" on="change:step2.show" required>
    <label for="rating1">Great</label>

    <input type="radio" id="rating2" name="rating" value="2" on="change:step2.show">
    <label for="rating2">Not bad</label>

    <input type="radio" id="rating3" name="rating" value="1" on="change:step2.show">
    <label for="rating3">Meh</label>
  </div>
  <div class="m1" id="step2" hidden>
    <label class="block" for="info">Would you like to tell us more?</label>
    <textarea class="block" id="info" name="name" rows="5"></textarea>
  </div>
  <input type="submit" value="Send feedback">
  <input type="reset" value="Clear">

  <div class="m1" submit-success>
    Thank you for submitting feedback.
  </div>
</form>

需要进一步解释吗？

如果本页上的解释没有涵盖您的所有问题，请随时与其他 AMP 用户联系以讨论您的确切用例。

前往 Stack Overflow

无法解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的持续参与者，但我们也欢迎您为自己特别感兴趣的问题提供一次性贡献。

在 GitHub 上编辑示例

由 @fstanis 撰写