メニューボタン閉じるボタン

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コンポーネントをロードしてくれます。
ampform1

ampproject.orgのサポートページhttps://www.ampproject.org/docs/reference/components/amp-formに例示されていたサンプルコードをAMP対応の単一ページにして表示してみました。
ampform2
入力フォーム以外なにもない簡素なページですが、しっかり入力可能です(Chromeのデベロッパーツールでエミュレートしています。)
ampform.gif
名前とメールアドレスだけではちょっと物足りない…という方に、
AMP BY EXAMPLE で紹介されているサンプルコードでも試してみました。
amp.form3
これでもか!というフォームの数ですが、AMP対応ページでも様々なフォーム形式を実装することが可能だということがお分かりいただけると思います。

最後に

残念ながら、WordPressプラグインのほとんどはまだamp-formをサポートしていないようです。
もちろん今後対応していくことは間違いないのでしょうが、今しばらくは各プラグインのバージョンアップを待ちましょう。

現在AMPプロジェクトはモバイル対応ページの高速化だけでなく、様々なコンテンツをより提供しやすいようにどんどん進化しています。
今後も新機能の追加、それに対応したプラグインなど、いち早く試して取り上げてまいります。

今すぐお気軽に
ご相談ください。

0120-315-465

(平日 10:00~19:00)

今すぐお気軽に
ご相談ください。

0120-315-465

(平日 10:00~19:00)

グラッドキューブは
「ISMS認証」を取得しています。

認証範囲:
インターネットマーケティング支援事業、インターネットASPサービスの提供、コンテンツメディア事業

「ISMS認証」とは、財団法人・日本情報処理開発協会が定めた企業の情報情報セキュリティマネジメントシステムの評価制度です。

いますぐ無料で
お試しください。

トライアル終了後も
無料でご利用いただけます。

お名前【必須】
メールアドレス【必須】
※携帯・フリーアドレスは不可
電話番号【必須】

利用規約』『プライバシーポリシー』に同意する