Tutoriais AMP

Criando formulários em uma página AMP

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

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

 

O componente amp-form permite o uso de formulários e campos em um 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.

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:

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.

 

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

Ver comentários

  • Oi Roger

    Eu uso wordpress no meu site e tenho usado o plugin https://wordpress.org/plugins/amp/ para utilizar o AMP, mas não consigo fazer funcionar os formulários com o method="post" em meu site.

    Você poderia fazer um tutorial ensinando como que se faz isso?

    Obrigado.

    • Olá Thiago, boa noite,
      Sim irei estudar o caso e no futuro gerar um tutorial, infelizmente estou sem tempo para desenvolver nessas últimas semans.

Post Recentes

Por que devo sempre manter o Magento 2 atualizado?

Segurança: Atualizações frequentes geralmente incluem patches de segurança para corrigir vulnerabilidades identificadas. Ao manter o Magento atualizado, você reduz significativamente…

1 mês atrás

Adicionar uma mensagem de Alerta ou Aviso do Admin do Magento 2

Como adicionar uma mensagem de Alerta ou Aviso do Admin do Magento 2 Injete o Magento\Framework\Message\ManagerInterface no construtor da sua…

1 mês atrás

Exibir mensagens erro/sucesso da Classe: Magento\Framework\Message\ManagerInterface

Para exibir as mensagens adicionadas na classe Magento\Framework\Message\ManagerInterface em um arquivo .phtml, você pode usar o seguinte código: <?php $objectManager…

1 mês atrás

Exportar as categorias do Magento 2 em um XML

Para criar um script no Magento 2 que exporte as categorias para um arquivo XML com o nome da categoria,…

2 meses atrás

Colocar um video como Background utilizando HTML + CSS

Para definir um vídeo MP4 como plano de fundo em um <div> usando HTML e CSS, você pode seguir estas…

4 meses atrás

Desativar o “lastname” no Magento 2

Como desativar o "lastname" no Magento 2 e Adobe Commerce Desativando a obrigatoriedade do campo Execute a SQL abaixo diretamente…

4 meses atrás