AMPページでフォーム関連タグ(<form>, <input>, <select> 等)が使用可能になりました!

AMPページでは一切のフォーム関連タグ(<form>, <input>, <select> 等)の使用ができませんでしたが、ついにAMPページでもフォーム関連タグが使用可能になりました!

 

We’ve just launched support for forms in AMP HTML. With the “amp-form” extension, the <form> element and its related elements like <input> can be used to build forms within AMP documents.

出典: Forms now supported in AMP

 

上記は10月31日の公式リリースのさわりの部分ですが、重要なので簡単に訳してみます(といっても中学英語ですが!)。

AMP HTML のフォーム関連要素のサポートをはじめました。amp-form拡張を使うことで、AMPドキュメント(AMPページ)の中でも <form> 要素とそれに関連する要素(たとえば <input> )が使えるようになります。

 

amp-form拡張に注意

重要なのは With the “amp-form” extension という記述です。将来的にはデフォルトで使えるようになるかもしれませんが、現時点では必ず amp-form コンポーネントをロードする必要があります。

amp-form コンポーネントをロードというとわかりにくいですが、<head>の中に下の1行を入れるだけです。

 

(フォーム関連タグが設置できず)カートが機能しないため、ECサイトはAMP対応NGとされてきましたが、今後はECサイトにもAMPが浸透していくでしょう。(ただし、JavaScriptは動作しないので、CMSによってはやはり設置できなかったりと、実装方法を工夫する必要はあります。)

ヘッダーやフッター等の共通箇所にキーワード検索フォームを入れることは珍しくなく、実際、直近の案件でも見事に含まれていました。これまでは断捨離せざるを得ませんでしたが、これからはNGを出さなくてよくなります!