Google Formsを埋め込む3つの方法

"ファイルアップロードの質問があるGoogle Formsのフォームをウェブサイトに埋め込みたい"- Google Docs Editors Community

Googleはファイルアップロードの質問があるフォームには埋め込みコードを出してくれず、Googleのフォーラムでは305人がその回避方法を尋ねています。これは、Google Formsで人に届ける3つの方法（ウェブサイト用の埋め込みコード、メール、リンク）の制限の1つです。どれもGoogleの見た目のままで、埋め込みは固定のiframeに収まり、どれもページから回答を事前入力できません。Formfacadeなら、ファイルアップロードの質問も含めてiframeなしでフォームを埋め込め、回答は引き続きGoogle FormsとGoogle Sheetsに届きます。

以下は、Google Formsで使える3つの方法とそれぞれの不十分な点、そしてボーナスのセクションにあるFormfacadeを使う4つ目の方法です。

方法ごとに向いている目的が違うので、ニーズに一番合うものを選べます。訪問者が連絡しやすいようにサイトにフォームを埋め込む、より多くの人にアンケートを広めるためにソーシャルメディアにリンクを投稿する、既存のお客様からフィードバックを集めるためにリンクをメールで送る、といった使い分けです。

始める前に

どの方法を選んでも、ユーザーが実際にフォームを開けて、適切な人が回答できるようにするための重要な手順が2つあります。

フォームを公開します。フォームは公開しないと誰もアクセスできません。Google Formsでフォームを開き、右上のPublishをクリックします。公開設定のページが開き、Respondersは初期設定で「Anyone with the link」になっています。Publishをクリックして確定します。公開すると右上に「Published」と表示され、Publishedをクリックすればいつでもこの設定を変更できます。

アクセスを管理します。たとえばチーム限定の社内アンケートを行うなど、初期設定と違うアクセスが必要な場合は、Publishedをクリックして公開オプションのページを開き、Manageをクリックしてアクセスを設定します。General accessでは、リンクを知っている全員にフォームを公開するか、特定のユーザー、組織、対象グループに制限できます。ウェブサイトの公開フォームなら、訪問者にログインを求めないよう、anyone with the linkを選んでください。

方法1：Google Formsのフォームをウェブサイトに埋め込むには？

フォームをページに直接埋め込めば、訪問者はサイトを離れずに入力できます。

Google Formsでフォームを開き、右上のMoreメニュー（3つの点のアイコン）をクリックします。
<> Embed HTMLを選びます。
必要に応じて幅と高さを調整し、Copyをクリックします。フォームを表示したいページにiframeの埋め込みコードを貼り付けます。

ウェブサイトへの埋め込みが役立つのは、自分のページで回答を集めたいときです。たとえば専用ページのお問い合わせフォーム、ブログ記事の最後にあるイベント申し込み、ヘルプセンター内のフィードバックフォームなどです。別のフォームページに移動させる余計なクリックがなくなるので、手間が減り、完了率が上がりやすくなります。

制限

長い複数ページのフォームはiframe内でスクロールする。iframeは固定サイズなので、長いフォームはページに合わせて伸びずに、自分の枠の中でスクロールします。
モバイル対応・レスポンシブではない。フォームが画面サイズに合わせて調整されないため、スマートフォンでは切れたり窮屈に見えたりします。
ファイルアップロードの質問があると埋め込めない。ファイルアップロードの質問を含むフォームは埋め込めず、「This form cannot be embedded because it makes use of File Upload fields.」と表示されます。
Googleのブランドと規約が表示される。「Google Forms」のフッターと規約がフォームに残り、標準の埋め込みでは削除できません。
ユーザー分析が機能しない。フォームはクロスオリジンのiframe内で読み込まれるため、HotjarやFullStoryなどのセッション録画・分析ツールは中を見ることができません。そのため、フォーム内での行動を追跡したり、離脱ポイントを見つけたりできません。
回答を事前入力できない。ページからクロスオリジンのiframeに手が届かないため、URLクエリ文字列から埋め込みフォームを自動的に事前入力したり、JavaScriptで値を動的に渡したりできません。

方法2：Google Formsのフォームをメールに埋め込むには？

フォームをメールで共有すると、受信者は受信トレイから直接、またはワンクリックで回答できます。

Google Formsでフォームを開き、右上のShareアイコンをクリックします。
回答者の名前またはメールアドレスを入力します。
Notify peopleオプションを有効にします。
必要に応じてメッセージを追加し、Sendをクリックします。

メールが一番向いているのは、すでに受信者のリストがあり、直接届けたい場合です。たとえば社内チームのアンケート、招待客へのイベントの出欠確認、既存のお客様へのフォローアップのアンケートなどです。

制限

埋め込んだフォームがきちんと表示されるのはGmailだけです。Outlook、Apple Mail、その他のメールソフトでは、受信者には通常、入力欄の代わりにフォームを開くリンクが届きます。
一部の質問タイプがあると埋め込めません。ファイルアップロードの質問、評価の質問、質問や選択肢の画像、または保護されたテストがあるフォームは、メールに埋め込まれません。
複数ページのフォームは最初のページしか埋め込まれません。受信者はメール本文で最初のセクションを見て、残りはブラウザで続けなければなりません。
メールアドレスを収集するとメール内で送信できません。「Collect email addresses」がオンだと、回答を受信トレイから送信できません。回答は途中までの回答として引き継がれ、回答者は最後まで入力するためにGoogle Formsに移動します。また、確認済みメールアドレスの収集はまったく機能しないことがあります。

方法3：Google Formsのフォームのリンクを共有するには？

リンクはフォームを共有する一番早い方法です。フォームのリンクをコピーして、チャット、メール、ソーシャルメディアなど、テキストを貼り付けられる場所ならどこにでも投稿できます。

Google Formsでフォームを開き、右上のLinkアイコンをクリックします。
「Copy responder link」で、短いリンクにするにはShorten URLを有効にし、Copyをクリックします。
ShareやPreviewからリンクをコピーすることもできます。

リンクが役立つのは次のような場合です：

ソーシャルメディアに投稿する。どのプラットフォームでも投稿にリンクを入れれば、より多くの人に届きます。
自分のメールから送る。Google標準の「Share via email」オプションは常にdrive-shares-noreply@google.comから送信され、この送信元アドレスは変えられません。自分のGoogleアカウントやメールサービスから送りたい場合は、自分のメッセージにリンクをハイパーリンクとして貼り付ければ、自分から送ったメールとして届きます。
ウェブサイトにリンクを置く。フォームをページ内に埋め込みたくない場合は、サイトにリンクを追加すれば、訪問者はフォームを専用のページで開きます。

制限

自分のページではなく、Googleブランドのページです。リンクを開くとGoogleのドメインにあるGoogleのページが表示されるため、回答者はサイトを離れ、自分のブランドらしくないページに移ります。見込み客の獲得では信頼感が下がり、ページの文脈も失われます。
体験をコントロールできません。リンクをクリックすると、関連コンテンツもサイトに戻るナビゲーションも次のステップもないGoogleのページに移るため、フォームは流れの一部ではなく行き止まりになります。
リンクのプレビューがありきたりです。ソーシャルメディアやチャットに貼り付けると、リンクは自分のブランドではなく、Google Forms独自のプレビュー画像とフォームの説明で展開されるため、公開の投稿では見栄えが劣ります。
リンクをカスタマイズできません。ブランド名入りのURLやカスタムURLは設定できないため、短縮したforms.gleのリンクでも、覚えて入力することはできません。

ボーナス：iframeなしでGoogle Formsのフォームを埋め込むには？

Formfacadeを使えば、iframeもGoogleのブランド表示もなしに、ウェブサイトのテーマに合ったフォームを埋め込めます。

開いたページでフォームに名前を付け、Embed formをクリックし、Proceedをクリックします。
Shareタブの「Where do you want to embed this form?」で、ウェブサイトのプラットフォームを選び、Nextをクリックします。

案内に従ってフォームを埋め込みます。ほとんどのウェブサイトでは、埋め込みコードをコピーしてウェブページに貼り付けます。

この方法なら、標準のiframeで起きる問題が解決します。スマートフォンでもレスポンシブで、Googleのブランド表示が消えるので、フォームが自分のブランドの一部に感じられます。

Formfacadeを選ぶ理由

Formfacadeは標準のiframeで起きる問題を解決し、Google Formsだけではできない機能を追加します：

ウェブサイトのテーマに合わせられます。フォームがサイトのフォント、色、レイアウトを引き継ぎ、Googleのブランド表示なしで、プロらしくレスポンシブな見た目になります。
主要なサイトビルダーすべてで使えます。WordPress、Squarespace、Shopify、Google Sites、Wix、Webflowなどに埋め込めます。
Google Workspaceのワークフローはそのままです。回答は引き続きGoogle Formsに届き、Google Sheetsに自動同期できるので、回答の管理方法は何も変わりません。
回答を事前入力できます。埋め込んだフォームをURLのクエリ文字列から自動で事前入力したり、JavaScriptで値を動的に渡したりできます。
ユーザー分析ができます。フォームがクロスオリジンのiframeに閉じ込められていないため、HotjarやFullStoryのようなセッション記録ツールで行動を追い、離脱ポイントを見つけられます。
ファイルアップロードに対応しています。標準の埋め込みと違い、Formfacadeならファイルアップロードの質問があるフォームも埋め込めます（1ファイルあたり最大10 MB）。より大きなファイルやGoogle Driveへのアップロードの同期は、上位の有料プランで利用できます。
ウェブサイト以外でも使えます。フォームはモバイルアプリにも埋め込めます。独自開発向けにReactJS、React Native、JavaScriptとの連携があります。

制限

一部のプラットフォームはiframeでの埋め込みしかできません。Google SitesとWixはスクリプトによる埋め込みに対応していないため、Formfacadeを使っても、これらのプラットフォームではフォームがiframeとして追加されます。
無料プランと下位プランではFormfacadeのブランド表示が入ります。無料プランではGoogleのブランド表示は消えますが、小さなFormfacadeのクレジット表示が入ります。これを消すには、より多くの回答数と合わせて有料プランが必要です。現在の料金とフォームに必要なものを照らし合わせてご確認ください。

比較

Google Forms標準のiframe埋め込みとFormfacadeの比較を簡単にまとめました。

	Google Formsの埋め込み	Formfacadeの埋め込み
ウェブサイトのテーマに合う	いいえ	はい
モバイル対応	いいえ	はい
ファイルアップロードの質問	非対応	対応
回答の事前入力	いいえ	はい（URLまたはJSで）
セッション録画ツールで分析	いいえ	はい
モバイルアプリとReactに対応	いいえ	はい
Google Forms / Sheetsに回答が入る	はい	はい
料金	無料	サブスクリプションが必要

Google Formsのフォームを埋め込む一番の方法は、目的によって変わります。自分のページで回答を集めるならウェブサイトに埋め込む、決まったリストに直接届けるならメールで送る、最も広く速く配るならリンクを共有します。フォームをGoogleのiframeではなくサイトの一部のように見せたいなら、Formfacadeで埋め込めば、ネイティブでブランドに合った、モバイル対応のフォームになります。回答者がいる場所と、フォームにどれだけ洗練された見た目が必要かに合わせて方法を選んでください。

よくある質問

埋め込んだGoogle Formsのフォームの見た目をカスタマイズできますか？

いいえ。標準の埋め込みではGoogleのフォント、色、レイアウトのままです。フォームをサイトのデザインに合わせるには、Formfacadeで埋め込んでください。Formfacadeはiframeを使わずにフォームを表示するので、サイトのテーマを引き継ぎます。

ファイルアップロードの質問があるフォームを埋め込めますか？

いいえ。標準の埋め込みではブロックされ、「This form cannot be embedded because it makes use of File Upload fields.」と表示されます。その質問を削除するか、埋め込んだフォームでもファイルアップロードに対応しているFormfacadeを使う必要があります。

埋め込んだフォームでログインを求められるのはなぜですか？

フォームでメールアドレスを収集する、回答を1人1回に制限する、アクセスを組織内に制限する、またはファイルアップロードの質問がある場合は、ログインが必要になります。ログインなしで回答してもらいたい場合は、アクセスを「anyone with the link」に設定し、これらの設定を外してください。

埋め込んだGoogle Formsのフォームを事前入力できますか？

いいえ。ページからクロスオリジンのiframeに値を渡せないため、標準のiframeでは回答を動的に事前入力できません。Formfacadeなら、埋め込んだフォームをURLのクエリ文字列やJavaScriptで事前入力できます。

埋め込んだGoogle Formsのフォームが切れたり、スクロールしたりするのはなぜですか？

標準のiframeはサイズが固定なので、長いフォームは箱の中でスクロールします。iframeの幅を100%にして高さを増やすか、Formfacadeでiframeなしで埋め込めば、フォームがページに合わせて自動でサイズ調整されます。

Google Formsのフォームの埋め込みは無料ですか？

はい。標準のウェブサイト、メール、リンクの方法は無料です。Formfacadeでiframeなしで埋め込む方法には無料プランがあり、ブランド表示の削除や回答数の上限を増やすための有料プランもあります。

まとめ

フォームは人がたどり着けて初めて役に立ちますが、Googleの埋め込み、メール、リンクはどれもGoogleの見た目のままで、埋め込みはファイルアップロードの質問を受け付けません。Formfacadeなら、iframeなしでフォームを埋め込め、ファイルアップロードや事前入力した回答も入れられます。フォームを作成して、ボーナスのセクションの手順を進めてください。ご不明な点があれば、サポートにご連絡ください。