Criando formulários em uma página AMP

Como criar um formulários em uma página AMP utilizando componente amp-form.

Primeiro, você deverá incluir a seguinte biblioteca em sua página

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

 

O componente amp-form permite o uso de formulários e campos em um documento AMP.

AMP-forms permite que o envio do formulário seja feito pelo protocolo HTTP e XHR (XMLHttpRequest). Para que o envio das informações do formulário seja feita pelo protocolo HTTP será necessário que uma nova página seja carregada, enquanto o envio por XHR não requer que a página seja recarregada.

Customizando as mensagens

Customizando as mensagens de sucesso: amp-form-submit-success e amp-form-submit-error.

<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;
}
</style>

Envio do Formulário recarregando a página

Utilize o atributo action para especificar a página de destino que deverá processar os dados do formulário. Isto irá funcionar apenas para requisições do tipo GET.

A URL deve estar com protocolo HTTPS.

O exemplo a seguir simula um campo de busca:

<form method="GET"
  class="p2"
  action="/components/amp-form/submit-form"
  target="_top">
  <div class="ampstart-input inline-block relative mb3">
    <input type="search"
      placeholder="Search..."
      name="googlesearch">
  </div>
  <input type="submit"
    value="OK"
    class="ampstart-btn caps">
</form>

Envio do Formulário com atualização de Página

Utilize o atributo action-xhr para enviar os dados do formulário via XMLHttpRequest (XHR).

O componente amp-form irá exibir os elementos submit-success ou submit-error baseado na resposta do servidor.

<form method="post"
  class="p2"
  action-xhr="/components/amp-form/submit-form-input-text-xhr"
  target="_top">
  <div class="ampstart-input inline-block relative m0 p0 mb3">
    <input type="text"
      class="block border-none p0 m0"
      name="name"
      placeholder="Name..."
      required>
    <input type="email"
      class="block border-none p0 m0"
      name="email"
      placeholder="Email..."
      required>
  </div>
  <input type="submit"
    value="Subscribe"
    class="ampstart-btn caps">
  <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>

Documentação completa em inglês: clique aqui.