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>

Precisa de explicações mais detalhadas?

Se as explicações nesta página não respondem a todas as suas perguntas, entre em contato com outros usuários de AMP para discutir seu caso de uso específico.

Ir para o Stack Overflow

Falta explicar algum recurso?

O projeto AMP incentiva fortemente sua participação e contribuições! Esperamos que você se torne um participante assíduo de nossa comunidade de código aberto, mas também agradecemos contribuições pontuais para problemas que você tenha particular interesse.

Editar amostra no GitHub

Written by @fstanis