AMP by Example
Playground

Introduction
Introduction

Components
Components

Advanced
Advanced

Samples & Templates
Samples & Templates

AMP Ads
AMP Ads

Edit in Playground View Demo

amp-form

Edit on Github

Introduction

The amp-form extension allows the usage of forms and input fields in an AMP document. amp-form allows HTTP and XHR (XMLHttpRequest) form submissions. An HTTP form submission loads a new page, while an XHR form submission doesn't require a page reload.

Show Hidden Code Hide Code
<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>

Setup

Import the library.

  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
Show Hidden Code Hide Code
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
  <link rel="canonical" href="https://ampbyexample.com/components/amp-form/">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

Customize success or error messages by using amp-form-submit-success and amp-form-submit-error classes.

  <style amp-custom>
  form.amp-form-submit-success [submit-success],
  form.amp-form-submit-error [submit-error]{
    margin-top: 16px;
  }
  form.amp-form-submit-success [submit-success] {
    color: green;
  }
  form.amp-form-submit-error [submit-error] {
    color: red;
  }
  form.amp-form-submit-success.hide-inputs > input {
    display: none
  }
  .horizontal-display {
    display: flex;
    align-items: center;
  }
  form > input {
    margin: 0 16px;
  }
  form label {
    margin: 8px;
  }
  form {
    margin: 0;
    padding: 16px;
  }
  form select {
    margin-top: 0;
  }
  </style>
</head>
<body>

Form Submission with Page Reload

Use the action attribute to specify a server-endpoint which should handle the form input. This works only for GET requests. The URL must be HTTPS. The following sample uses type="search" to emulate a search. The search button will trigger a page reload.

Please find security considerations to check best practices when choosing GET or POST methods.

You can find the code for the server endpoint used in this demo at /backend/amp-form.go.

  <form method="GET" action="/components/amp-form/submit-form" target="_top">
    <input type="search" class="data-input" placeholder="Search..." name="googlesearch">
    <input type="submit" value="OK" class="button button-primary other-input">
  </form>

Form Submission with Page Update

Use the action-xhr attribute to submit the form via XMLHttpRequest (XHR). You can use amp-mustache templates to show custom success or error messages, using data sent by the server endpoint as JSON. For example, if the server sends {"foo": "bar"}, you can use use {{foo}} in the template to render bar.

The amp-form component displays submit-success or submit-error elements based on the response and renders the template data inside these two elements. The submit-success and submit-error elements must be direct children of form.

  <form method="post" action-xhr="/components/amp-form/submit-form-input-text-xhr" target="_top">
    <input type="text" class="data-input" name="name" placeholder="Name..." required>
    <input type="email" class="data-input" name="email" placeholder="Email..." required>
    <input type="submit" value="Subscribe" class="button button-primary">
    <div submit-success>
      <template type="amp-mustache">
        Success! Thanks {{name}} for trying the
        <code>amp-form</code> demo! Try to insert the word "error" as a name input in the form to see how
        <code>amp-form</code> handles errors.
      </template>
    </div>
    <div submit-error>
      <template type="amp-mustache">
        Error! Thanks {{name}} for trying the
        <code>amp-form</code> demo with an error response.
      </template>
    </div>
  </form>

Hiding input fields after success

Use the amp-form-submit-success class to hide input fields after a successful submission. The following CSS rule hides all form input fields after successful form submission:

form.amp-form-submit-success > input {
  display: none
}
  <form class="hide-inputs" method="post" action-xhr="/components/amp-form/submit-form-input-text-xhr" target="_top">
    <input type="text" class="data-input" name="name" placeholder="Name..." required>
    <input type="submit" value="Subscribe" class="button button-primary">
    <div submit-success>
      <template type="amp-mustache">
        Success! Thanks {{name}} for trying the
        <code>amp-form</code> demo! Try to insert the word "error" as a name input in the form to see how
        <code>amp-form</code> handles errors.
      </template>
    </div>
    <div submit-error>
      <template type="amp-mustache">
        Error! Thanks {{name}} for trying the
        <code>amp-form</code> demo with an error response.
      </template>
    </div>
  </form>

Other form input samples

amp-form supports all HTML5 form types with the exception of file, password and image. Use type="date" for input fields that should contain a date.

  <form method="post" action-xhr="/components/amp-form/submit-form-xhr" target="_top">
    <input name="select-date" type="date" value="2020-12-30" class="data-input">
    <input type="submit" value="OK" class="button button-primary">
    <div submit-success>
      <template type="amp-mustache">
        Success! Thanks for trying the
        <code>amp-form</code> demo!
      </template>
    </div>
    <div submit-error>
      <template type="amp-mustache">
        Error!
      </template>
    </div>
  </form>

Use type="month" for input fields that should contain a month.

  <form method="post" action-xhr="/components/amp-form/submit-form-xhr" target="_top">
    <input name="select-month" type="month" value="2020-12" class="data-input">
    <input type="submit" value="OK" class="button button-primary other-input">
    <div submit-success>
      <template type="amp-mustache">
        Success! Thanks for trying the
        <code>amp-form</code> demo!
      </template>
    </div>
    <div submit-error>
      <template type="amp-mustache">
        Error!
      </template>
    </div>
  </form>

Use type="week" for input fields that should contain a week.

  <form method="post" action-xhr="/components/amp-form/submit-form-xhr" target="_top">
    <input type="week" name="week_year" class="data-input">
    <input type="submit" value="OK" class="button button-primary other-input">
    <div submit-success>
      <template type="amp-mustache">
        Success! Thanks for trying the
        <code>amp-form</code> demo!
      </template>
    </div>
    <div submit-error>
      <template type="amp-mustache">
        Error!
      </template>
    </div>
  </form>

Use type="datetime-local" for input fields that should contain a date and time.

  <form method="post" action-xhr="/components/amp-form/submit-form-xhr" target="_top">
    <input name="select-datetime" type="datetime-local" value="2020-12-30T12:34:56" class="data-input">
    <input type="submit" value="OK" class="button button-primary other-input">
    <div submit-success>
      <template type="amp-mustache">
        Success! Thanks for trying the
        <code>amp-form</code> demo!
      </template>
    </div>
    <div submit-error>
      <template type="amp-mustache">
        Error!
      </template>
    </div>
  </form>

Use type="time" for input fields that should contain a time.

  <form method="post" action-xhr="/components/amp-form/submit-form-xhr" target="_top">
    <input type="time" name="time_now" class="data-input">
    <input type="submit" value="OK" class="button button-primary other-input">
    <div submit-success>
      <template type="amp-mustache">
        Success! Thanks for trying the
        <code>amp-form</code> demo!
      </template>
    </div>
    <div submit-error>
      <template type="amp-mustache">
        Error!
      </template>
    </div>
  </form>

Use type="checkbox" to let the user select ZERO or MORE options of a limited number of choices.

  <form method="post" action-xhr="/components/amp-form/submit-form-xhr" target="_top">
    <div class="horizontal-display">
      <label>
        <input type="checkbox" name="animal1" value="Cats"> I like cats</label>
      <label>
        <input type="checkbox" name="animal2" value="Dogs"> I like dogs </label>
      <input type="submit" value="OK" class="button button-primary other-input">
    </div>
    <div submit-success>
      <template type="amp-mustache">
        Success! Thanks for trying the
        <code>amp-form</code> demo!
      </template>
    </div>
    <div submit-error>
      <template type="amp-mustache">
        Error!
      </template>
    </div>
  </form>

Use type="email" for input fields that should contain an e-mail address.

  <form method="post" action-xhr="/components/amp-form/submit-form-xhr" target="_top">
    <input type="email" name="email" placeholder="Email..." class="data-input">
    <input type="submit" value="OK" class="button button-primary">
    <div submit-success>
      <template type="amp-mustache">
        Success! Thanks for trying the
        <code>amp-form</code> demo!
      </template>
    </div>
    <div submit-error>
      <template type="amp-mustache">
        Error!
      </template>
    </div>
  </form>

Use type="hidden" to define a field not visible to a user.

  <form method="post" action-xhr="/components/amp-form/submit-form-xhr" target="_top">
    <input type="hidden" name="city" value="London">
    <input type="submit" value="OK" class="button button-primary">
    <div submit-success>
      <template type="amp-mustache">
        Success! Thanks for trying the
        <code>amp-form</code> demo!
      </template>
    </div>
    <div submit-error>
      <template type="amp-mustache">
        Error!
      </template>
    </div>
  </form>

Use type="number" for input fields that should contain a numeric value.

  <form method="post" action-xhr="/components/amp-form/submit-form-xhr" target="_top">
    <input type="number" name="quantity" min="1" max="5" class="data-input">
    <input type="submit" value="OK" class="button button-primary other-input">
    <div submit-success>
      <template type="amp-mustache">
        Success! Thanks for trying the
        <code>amp-form</code> demo!
      </template>
    </div>
    <div submit-error>
      <template type="amp-mustache">
        Error!
      </template>
    </div>
  </form>

Use type="radio" to let a user select ONLY ONE of a limited number of choices.

  <form method="post" action-xhr="/components/amp-form/submit-form-xhr" target="_top">
    <div class="horizontal-display">
      <input type="radio" name="favourite animal" value="cat" checked> Cat
      <input type="radio" name="favourite animal" value="dog"> Dog
      <input type="radio" name="favourite animal" value="other"> Other
      <input type="submit" value="OK" class="button button-primary other-input">
    </div>
    <div submit-success>
      <template type="amp-mustache">
        Success! Thanks for trying the
        <code>amp-form</code> demo!
      </template>
    </div>
    <div submit-error>
      <template type="amp-mustache">
        Error!
      </template>
    </div>
  </form>
Cat Dog Other

Use type="range" for input fields that should contain a value within a range.

  <form method="post" action-xhr="/components/amp-form/submit-form-xhr" target="_top">
    <input type="range" name="points" min="0" max="10">
    <input type="submit" value="OK" class="button button-primary other-input">
    <div submit-success>
      <template type="amp-mustache">
        Success! Thanks for trying the
        <code>amp-form</code> demo!
      </template>
    </div>
    <div submit-error>
      <template type="amp-mustache">
        Error!
      </template>
    </div>
  </form>

Use type="tel" for input fields that should contain a telephone number.

  <form method="post" action-xhr="/components/amp-form/submit-form-xhr" target="_top">
    <input type="tel" name="my_tel" class="data-input" placeholder="Telephone...">
    <input type="submit" value="OK" class="button button-primary other-input">
    <div submit-success>
      <template type="amp-mustache">
        Success! Thanks for trying the
        <code>amp-form</code> demo!
      </template>
    </div>
    <div submit-error>
      <template type="amp-mustache">
        Error!
      </template>
    </div>
  </form>

Use type="url" for input fields that should contain a URL address.

  <form method="post" action-xhr="/components/amp-form/submit-form-xhr" target="_top">
    <input type="url" class="data-input" placeholder="URL..." name="website">
    <input type="submit" value="OK" class="button button-primary other-input">
    <div submit-success>
      <template type="amp-mustache">
        Success! Thanks for trying the
        <code>amp-form</code> demo!
      </template>
    </div>
    <div submit-error>
      <template type="amp-mustache">
        Error!
      </template>
    </div>
  </form>

Use type="reset" to clear input fields.

  <form method="post" action-xhr="/components/amp-form/submit-form-xhr" target="_top">
    <input type="text" class="data-input" placeholder="Some text...">
    <input type="submit" value="OK" class="button button-primary ">
    <input type="reset" value="Reset" class="button button-primary other-input">
    <div submit-success>
      <template type="amp-mustache">
        Success! Thanks for trying the
        <code>amp-form</code> demo!
      </template>
    </div>
    <div submit-error>
      <template type="amp-mustache">
        Error!
      </template>
    </div>
  </form>

Use select element for dropdowns.

  <form method="post" action-xhr="https://ampbyexample.com/components/amp-form/submit-form-xhr" target="_top">
    <select name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    <input type="submit" value="OK" class="button button-primary ">
    <div submit-success>
      <template type="amp-mustache">
        Success! Thanks for trying the
        <code>amp-form</code> demo!
      </template>
    </div>
    <div submit-error>
      <template type="amp-mustache">
        Error!
      </template>
    </div>
  </form>
</body>
</html>