#BlackLivesMatter
AMP
  • email

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>.

How would you rate this year's conference?

Thank you for submitting feedback.
<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>
Ti servono altre spiegazioni?

Se le spiegazioni riportate in questa pagina non rispondono a tutte le tue domande, non esitare a contattare altri utenti AMP per discutere il tuo caso d'uso specifico.

Vai a Stack Overflow
Ci sono funzioni non descritte?

Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.

Modifica esempio in GitHub