AMPがフォームをサポート、amp-formの実装でメールアドレス登録やECサイトのカラー選択などが可能に

by 

[レベル: 上級]

AMPが正式にフォームをサポートしました。
<form> 要素と <input> 要素を使用したフォーム機能がAMPページでも利用できます。
フォームを利用するとたとえば、メールアドレス登録やサイト内検索、ECサイトでのカラー選択などユーザーからのアクションに応じた操作が可能になります。

amp-formでフォームを実装

AMPページでフォームを実装するためには、<amp-form> 拡張を使います。

コードの例です。

<form method="post" action-xhr="https://example.com/subscribe" target="_blank">
    <fieldset>
        <label>
            <span>Your name</span>
            <input type="text" name="name" required>
        </label>
        <label>
            <span>Your email</span>
            <input type="email" name="email" required>
        </label>
        <input type="submit" value="Subscribe">
    </fieldset>
    <div submit-success>
        <template type="amp-mustache">
            Subscription successful!
        </template>
    </div>
    <div submit-failed>
        <template type="amp-mustache">
            Subscription failed!
        </template>
    </div>
</form>

こちらのアニメーションGIFは、amp-form を使ったメールアドレスを登録する場面のデモです。
名前とメールアドレスを入力し、SUBSCRIBE（購読）ボタンをタップすると、”Success!”（成功）メッセージが返ってきます。

amp-formを使ったAMPページでのメールアドレス登録

AMPページでフォームが使えるようになるとできることが増えてきます。
AMP対応しているサイト管理者のなかには、とても嬉しいニュースとして受け取る人もいるのではないでしょうか。

amp-formの詳細はドキュメントを参照してください。
一部の機能はまだ実験段階です。

公式アナウンスは日本語訳も公開されています。