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.
4 comentários sobre “Criando formulários em uma página AMP”