會議問卷調查電子郵件

簡介

這個範例示範如何建立一個以 AMP 技術驅動的電子郵件，其中包含一個簡單的互動式問卷調查。

電子郵件的主要內容，包含活動圖片和簡短描述。

在最近的 AMP 會議中，這幾天非常忙碌。我們希望您玩得愉快！

<amp-img class="m1" width="600" height="314" layout="responsive" src="https://amp.dev.org.tw/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.dev.org.tw/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 撰寫