AMP ページに Google フォームを埋め込む方法

AMPページへのGoogleフォームの設置方法

Akira

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

アンケートやお問い合わせフォームを作成できるのが Google フォーム

簡単に作成でき、簡単にサイトに埋め込めます。

この Google フォームを AMP ページに埋め込む方法のご紹介です。

Google フォームを作成

まずは、Google フォームを作成します。

作成するといっても、クリックしていくだけで簡単に作成できます。

作成方法は、下記のページが参考になるはずです。

amp-iframe スクリプトの読み込み

AMP ページに Google フォームを埋め込むには、amp-iframe を使う必要があります。

amp-iframe を使うために、<head></head> 内にスクリプトを追加します。

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

すでに amp-iframe を読み込んでいる場合は、スクリプトの追加は不要です。

amp-iframe タグで設置

最後に、Google フォームを表示したい場所に、<amp-iframe> タグを追加します。

<amp-iframe src="Googleフォームのsrcを入力"
            height="1200"
            layout="fixed-height"
            sandbox="allow-scripts allow-same-origin allow-forms allow-popups">
</amp-iframe>

これで Google フォームを AMP ページに埋め込めます。

Google フォームの設定で「メールアドレスを収集する」を選択すると設置される reCAPTCHA は、ちゃんと動きます。

上記 HTML のうち、サイトに合わせて変更する箇所が srcheightlayout 属性の値です。

また、layout 属性によっては、width の指定も必要です。

どのように変更するか、ご説明します。

src・width・height 属性

srcwidthheight の 3 つの属性の値は、埋め込み用の HTML から取得できます。

通常ページで Google フォームをサイトに埋め込むには、下記のような埋め込み用の HTML を使います。

<iframe src="https://docs.google.com/forms/d/e/~"
        width="640"
        height="1200"
        frameborder="0"
        marginheight="0"
        marginwidth="0">
  読み込んでいます...
</iframe>

Googleフォームの埋め込み用HTML

この HTML から srcwidthheight 属性の値を、そのままコピペをします。

layout 属性

layout 属性は、サイトに合わせて自由に選びます。

AMP の layout 属性は、下記の 2 つのページで詳細に説明されています。

amp-iframe で許可されている layout 属性の値は、container 以外の 7 つです。

いろいろ試した中で、私が気に入ったのが fixed-height 。指定する height の値で、高さが固定されます。

PC でもスマホでも、Google フォーム内にスクロールバーが出にくいように思えます。

また、サイトレイアウトが崩れないのも魅力でした。

amp-iframe の注意点

Google フォームを埋め込むために使った amp-iframe は、条件を満たせないと正常に表示されません。

その条件は 3 つあり、いずれか 1 つを満たす必要があります。

  • サイト最上部から 75% 以上離して <amp-iframe> タグを設置する
  • サイト最上部から 600px 以上離して <amp-iframe> タグを設置する
  • プレースホルダーを使用する

つまり、プレースホルダーを使わない場合は、サイトの最上部付近には設置できないということ。

Google フォームをサイトの最上部付近に設置する場合には、プレースホルダーの使用が必須です。

プレースホルダーには、画像を使用できます。画像を使う場合の HTML の一例は、このようなものです。

<amp-iframe src="Googleフォームのsrcを入力"
            height="1200"
            layout="fixed-height"
            sandbox="allow-scripts allow-same-origin allow-forms allow-popups">
  <amp-img placeholder
           src="画像のURL"
           layout="fill"></amp-img>
</amp-iframe>

<amp-iframe></amp-iframe> 内に、placeholder 属性を指定した <amp-img> を設置します。

テキストもプレースホルダーに使えます。

<amp-iframe src="Googleフォームのsrcを入力"
            height="1200"
            layout="fixed-height"
            sandbox="allow-scripts allow-same-origin allow-forms allow-popups">
  <span placeholder>読み込んでいます...</span>
</amp-iframe>

実際の動作

実際に Google フォームを埋め込んでみました。

このページの AMP ページには、下記のリンクより移動できます。

https://firstlayout.net/how-to-embed-google-form-on-amp/?amp=1


Google フォームは、AMP ページにも簡単に埋め込めます。

使い勝手の良いアンケートやお問い合わせフォームを、AMP ページにも埋め込んではいかがでしょうか。