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>

Bạn cần được giải thích thêm?

Nếu bạn vẫn còn thắc mắc sau khi đọc hướng dẫn trên trang này, hãy liên hệ với những người dùng AMP khác để thảo luận về trường hợp sử dụng cụ thể của bạn.

Truy cập Stack Overflow

Một tính năng chưa được giải thích?

Dự án AMP đặc biệt khuyến khích sự tham gia và đóng góp của bạn! Chúng tôi hi vọng bạn sẽ trở thành một người tham gia tích cực trong cộng đồng mã nguồn mở của chúng tôi, nhưng chúng tôi cũng chào mừng các đóng góp đơn lẻ về vấn đề mà bạn đặc biệt quan tâm.

Chỉnh sửa mẫu trên GitHub

Written by @fstanis