Conference Survey Email
Introduction
This sample demonstrates how to build an AMP-powered email that contains a simple interactive survey.
The main content of the email, an image and a short description of the event.

It’s been a busy few days at the latest AMP conference. We hope you had a good time!
<amp-img class="m1" width="600" height="314" layout="responsive" src="https://amp.dev/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>
To make the survey, we use an amp-form
with radio button input fields.
The second step of the form, free text input, is hidden initially and gets displayed after the user selects a rating, as this triggers a change
event.
When the form is submitted, we display a short confirmation message to the user by using <div submit-success>
.
<form method="post" action-xhr="https://amp.dev/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 上的示例-
Written by @fstanis