會議問卷電子郵件

簡介

此範例示範如何建構以 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