AMP FormでGET送信する方法

2019年4月8日AMP

【AMP Form】フォームからGET送信するサンプルコード

簡単に使おうと思ってもAMP-FormでのPOST送信はちょっとややこしいですが、GET送信は通常のWEBページと同じ感じで使えます

AMP Formコンポーネントを読み込む

AMPページでフォームを利用する時は、単純なGET送信であっても基本のAMP-JSと合わせてAMP Formコンポーネント(amp-form.js)を読み込む必要があります

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

単純なGET送信だけでしたらAMP-Formコンポーネントを読み込んでいなくても機能しますが、AMPテストツールでは「タグ「FORM [method=GET]」には拡張機能 JavaScript の「amp-form」が含まれている必要があります。」としてエラーになり、当然ですがGoogle Search ConsoleでもエラーとなりAMPページとして有効になりませんので注意です

AMP FormでGET送信するサンプルコード

GET送信の記述は、通常のHTMLと同じです

<form method="GET" action="https://www.google.com/search" target="_top">
  <input type="text" name="q" value="AMPメモ">
	  <input type="submit" value="検索">
</form>

また2019年２月現在、<input type=button>や<input type=image>はAMP Formでは許可されていないタグとなっています

2019年4月8日AMPAMPフォーム

Posted by ヨウスケ