AMP対応ページがフォームに対応。メールアドレス登録など可能に！
今まで何度も当ブログで取り上げてきたAMP（Accelarated Mobile Pages）プロジェクトですが、とうとうAMP HTMLで入力フォームがサポートされるようになりました。
<form>, <input>, <select> 等、フォーム関連のタグが使用できなかったため、なかなかAMP対応に踏み切れなかった方もぜひこの機会に導入してみてください。
AMP がフォームをサポート（Google Developers Japan）によると、
「amp-form」拡張機能を使用すると、<form> 要素と <input> などの関連要素を使って AMP ドキュメント内にフォームを作れるようになります。これによって、e コマースの詳細ページで製品の色を選択したり、ニュースレターを購読するためのメール フィールドを用意したり、読者を引き付けるために記事の中でインタラクティブな投票を行ったりできるようになります。
ということで、ECサイトを運営していらっしゃる担当者様やメールマガジンの読者を募りたいメディアの方々にはとてもありがたい、AMP HTML のフォーム関連要素を早速試してみました。
AMP対応ページでフォームを実装するには
AMP対応ページでフォームを実装するためには、「amp-form」 拡張を使用しなければなりません。
具体的には、下記の記述を<head>～</head>内に加えるだけで完了です。
amp-formコンポーネントをロードしてくれます。
ampproject.orgのサポートページhttps://www.ampproject.org/docs/reference/components/amp-formに例示されていたサンプルコードをAMP対応の単一ページにして表示してみました。
入力フォーム以外なにもない簡素なページですが、しっかり入力可能です（Chromeのデベロッパーツールでエミュレートしています。）
名前とメールアドレスだけではちょっと物足りない…という方に、
AMP BY EXAMPLE で紹介されているサンプルコードでも試してみました。
これでもか！というフォームの数ですが、AMP対応ページでも様々なフォーム形式を実装することが可能だということがお分かりいただけると思います。
最後に
残念ながら、WordPressプラグインのほとんどはまだamp-formをサポートしていないようです。
もちろん今後対応していくことは間違いないのでしょうが、今しばらくは各プラグインのバージョンアップを待ちましょう。
現在AMPプロジェクトはモバイル対応ページの高速化だけでなく、様々なコンテンツをより提供しやすいようにどんどん進化しています。
今後も新機能の追加、それに対応したプラグインなど、いち早く試して取り上げてまいります。
記事を検索
-
お問い合わせ
SiTest の導入検討や
他社ツールとの違い・比較について
弊社のプロフェッショナルが
喜んでサポートいたします。 -
コンサルティング
ヒートマップの活用、ABテストの実施や
フォームの改善でお困りの方は、
弊社のプロフェッショナルが
コンサルティングいたします。
今すぐお気軽にご相談ください。
今すぐお気軽に
ご相談ください。
（平日 10:00~19:00）
今すぐお気軽に
ご相談ください。
0120-315-465
（平日 10:00~19:00）
グラッドキューブは
「ISMS認証」を取得しています。
認証範囲：
インターネットマーケティング支援事業、インターネットASPサービスの提供、コンテンツメディア事業
「ISMS認証」とは、財団法人・日本情報処理開発協会が定めた企業の情報情報セキュリティマネジメントシステムの評価制度です。