amp form display different content based the server response

Question

I know I can use submit-success and submit-error. But I need more options.

For example, if the server returns {"result": "0"}, I'd like to display a message if result=0, show an image if result=1, another form if result=2, etc.

Answer 1

You can accomplish this using mustache sections. The idea is to encode the different result types in the JSON response, for example:

{
  "message": {
    "text": "Hello World"
  }
}

or for an image:

{
  "image": {
    "src": "/my-image.png",
    "width": 300,
    "height": 200
  }
}

Then, you can render each result type differently in the form submit-success div:

<form ...>
  <fieldset>
    ...
  </fieldset>
  <div submit-success>
    <template type="amp-mustache">

      {{#message}}
      <p>{{text}}</p>
      {{/message}}

      {{#image}}
      <amp-img src={{src}} layout=responsive width={{width}} height={{height}}>
       </amp-img>
      {{/image}}

    </template>
  </div>
</form>