【 Cocoon 】AMP で Google フォームを動かすカスタマイズ

CocoonのAMPページでGoogleフォームの送信が可能になる方法

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

WordPress テーマ「 Cocoon 」の AMP ページで、埋め込んだ Google フォームを使えるようにするカスタマイズのご紹介です。

カスタマイズをせずとも、Cocoon の AMP ページに Google フォームの埋め込みはできます。

ただ、送信ができません。

フォームとして機能しないので、送信できるようにします。

また、Google フォームの埋め込み用 HTML をそのまま貼り付けると、AMP ページで「読み込んでいます…」がずっと表示されます。

AMPページで表示される「読み込んでいます…」

この表示を取り除くことも、一緒に行います。

カスタマイズは、コピペ 1 発で終わります。

送信できるように変更

埋め込んだ Google フォームを AMP ページで送信できるようにする、コピペ 1 発のコードはこちらです。

子テーマの functions.php に追加します。

add_filter( 'convert_content_for_amp', function( $the_content ) {
  
  $pattern = '{<amp-iframe layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" src="https://docs.google.com/forms/(.+?) width=["][^"]*?["](.+?)>.*?<amp-img(.+?)</amp-iframe>}is';
  $append  = '<amp-iframe layout="fixed-height" sandbox="allow-scripts allow-same-origin allow-popups allow-forms" src="https://docs.google.com/forms/$1$2><amp-img$3</amp-iframe>';
  $the_content = preg_replace( $pattern, $append, $the_content );
  
  return $the_content;
  
});

これで終わりです。

念のため、Cocoon 設定 → キャッシュ削除より「 AMP キャッシュの削除」を行うと確実です。

ちなみに、reCAPTCHA が表示される場合には、reCAPTCHA が動くことは確認済みです。

対象の Google フォーム

今回のカスタマイズの対象にしているのが、Googleフォーム → 送信 → 埋め込みアイコンで表示される「 HTML を埋め込む」コードで設置した Google フォームです。

Googleフォームの「HTMLを埋め込む」コード

HTML を埋め込むページは、投稿ページでも固定ページでも OK 。

また、「カスタム HTML 」「 [C] テキスト( PC 用)」「 [C] テキスト(モバイル用)」ウィジェットをお使いになれば、ウィジェットエリアにも設置できます。

ただし、「テキスト」ウィジェットは、使用できません。

Google フォームの作り方は、下記のページをご参考ください。

実際の動作

このブログでは、Cocoon ではなく Simplicity を使っています。

テーマは異なりますが、今回ご紹介したカスタマイズと同じことを行っています。

実際に Google フォームを埋め込みました。どなたからの回答だとは分からないので、気軽に送信し動作をご確認いただけます。

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

https://firstlayout.net/move-google-form-on-cocoon-amp/?amp=1


AMP ページにお問い合わせフォームを設置するには、面倒な作業が必要です。

けれど、Google フォームを使えば、reCAPTCHA を完備したお問い合わせフォームを簡単に AMP ページに設置できます。

また、記事にアンケートを設置できるのも魅力的。

サイトに埋め込んで、Google フォームを活用されてはいかがでしょうか。