CODEWITHSUNDEEP
amp-htmlamp-email
ankita yadav
ankita yadav

Reputation: 19

How is dynamic data collected and stored in amp email?

I am very new to amp. I am not able to understand how will a user response data be visible to the amp email sender. For example if there is a form,how a sender will be able to collect data entered in the form by a amp mail recipient

Upvotes: 1

Views: 310

Answers (1)

esafwan
esafwan

Reputation: 18029

AMP for Email is very similar to HTML email, except that it lets email senders support many new features. It can contain features like form submission which you mentioned in the question apart from interactive elements, etc...

The sender of AMP needs to have its own backend system to collect the submission of a form within an AMP email. For example, see the below implementation: 

<!doctype html>
<html ⚡4email>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>
  <style amp-custom>
    h1 {
      margin: 1rem;
    }
  </style>
</head>
<body>
 <form method="post"
    action-xhr="https://example.com/subscribe" target="_top">
    <fieldset>      
      <label>
        <span>Email:</span>
        <input type="email"
          name="email"
          required>
      </label>
      <br>
      <input type="submit"
        value="Subscribe">
    </fieldset>
    <div submit-success>
      <template type="amp-mustache">
        Subscription successful!
      </template>
    </div>
    <div submit-error>
      <template type="amp-mustache">
        Subscription failed!
      </template>
    </div>
  </form>
</body>
</html>

The code above consist of a basic AMP Email with a form that allows users to subscribe using their Email. When the user submits the form, the email id is sent to the URL given in action-xhr attribute of the form tag using the POST method.

If the operation is successful, the submit-success block is shown. Or else submit-error block is shown. The implementation is pretty easy and straight forward. You can have a look at this link for a better understanding of this.

Upvotes: 1

Related Questions