Google SitesにGoogle Formsを埋め込むには？
"Google Sitesに埋め込むとGoogle Formsのヘッダー画像が表示されない"- Google Sites Community
これはGoogle Sitesでウェブサイトを作っている人からよく寄せられる質問で、Googleのフォーラムでは91人が尋ねています。Google Formsで選んだヘッダー画像が、フォームをSiteに載せると表示されないのです。Google SitesはInsertパネルからフォームを挿入しますが、変えられるのは箱の幅と高さだけで、Googleのフッターは残り、長いフォームは枠の中でスクロールします。Formfacadeなら、InsertのEmbedにURLを1つ貼り付けるだけで、フォームはGoogleのブランド表示なしで、サイトに合わせて設定した色とフォントで表示されます。回答は引き続きGoogle Formsのフォームに届きます。
Google SitesにGoogle Formを埋め込む方法を2つ紹介し、それぞれの足りない点も説明します。
方法1：標準のInsertオプションでGoogle Formを埋め込む
Google FormsのフォームをGoogle Sitesに埋め込む方法は2つあります。
オプション1：フォームを直接挿入する
- sites.google.comでサイトを開き、フォームを置きたいページに移動します。
- 右側のパネルでInsertをクリックします。下にスクロールしてFormsを選びます。
- フォームを検索して選び、Insertをクリックします。
- フォームがページに表示されます。必要に応じて角をドラッグしてサイズや位置を変えます。
- 右上のPublishをクリックしてページを公開します。
オプション2：コードまたはURLで埋め込む
フォームが別のアカウントにある場合や、読み込み方を自分で管理したい場合は、代わりに埋め込みを使います。
- Google Formsでフォームを開き、右上のMoreメニュー（3つの点のアイコン）をクリックします。
- <> Embed HTMLを選びます。
- 必要に応じて幅と高さを調整し、Copyをクリックします。
- Google SitesでInsert → Embedをクリックします。Embed codeを選び、コードを貼り付けてNextをクリックし、続けてInsertをクリックします。（By URLタブでフォームの公開リンクを貼り付けることもできます。）
- 必要に応じてサイズを変え、Publishをクリックします。
制限
- Googleのブランドと規約が表示される。「Google Forms」のフッターと規約がフォームに残り、標準の埋め込みでは削除できません。
- スタイル設定がごく限られる。調整できるのはフォームの幅と高さだけです。サイトのテーマに合わせて色、フォント、ボタンのスタイルやレイアウトを変えることはできないので、フォームはページに置かれたGoogleの箱のように見えます。
- 長い複数ページのフォームはiframe内でスクロールする。iframeは固定サイズなので、長いフォームはページに合わせて伸びずに、自分の枠の中でスクロールします。
- モバイル対応・レスポンシブではない。フォームが画面サイズに合わせて調整されないため、スマートフォンでは切れたり窮屈に見えたりします。
- ファイルアップロードの質問があると埋め込めない。ファイルアップロードの質問を含むフォームは埋め込めず、「This form cannot be embedded because it makes use of File Upload fields.」と表示されます。
- ユーザー分析が機能しない。フォームはクロスオリジンのiframe内で読み込まれるため、HotjarやFullStoryなどのセッション録画・分析ツールは中を見ることができません。そのため、フォーム内での行動を追跡したり、離脱ポイントを見つけたりできません。
- 回答を事前入力できない。ページからクロスオリジンのiframeに手が届かないため、URLクエリ文字列から埋め込みフォームを自動的に事前入力したり、JavaScriptで値を動的に渡したりできません。
よくある問題の解決
- フォームが空白になる、または読み込まれない。これはたいてい、フォームが正しく共有されていない場合に起こります。フォームの回答設定で一般公開のアクセスが許可されていることと、サイト自体が公開されていることを確認してください。
- フォームが埋め込まれずに別のページで開く。Insert → FormsやInsert → Embedを使わずに、フォームの共有リンクをボタンやテキストブロックに貼り付けた可能性があります。上のいずれかの埋め込み方法で追加し直してください。
- フォームが途中で切れる、またはモバイルでスクロールできない。複数セクションのフォームは、高さ固定のiframeの中で切れることがあります。埋め込みの高さを増やすか、画面サイズに合わせて変わるレスポンシブな埋め込みにFormfacadeを使ってください。
- 送信後に「ありがとう」のメッセージが訪問者に表示されない。縦に長い高さ固定のiframeでは、確認メッセージが見えている範囲よりずっと上に表示されることがあり、ユーザーには空白が見えるだけになります。ページからクロスオリジンのiframeの中に手を入れて一番上までスクロールし直すことはできないので、標準機能での解決方法はありません。
方法2：サイトのテーマに合ったブランド入りのフォームを埋め込む
フォームをサイトの一部のように見せたいなら、Formfacadeを使ってGoogle Sitesにフォームを埋め込めます。
- 開いたページでフォームに名前を付け、Embed formをクリックし、Proceedをクリックします。
- ShareタブのWhere do you want to embed this form?の下で、Embed in my Google Sitesを選び、Nextをクリックします。
- FormfacadeのURLをコピーします。
- Google SitesでInsert → Embedをクリックします。By URLを選び、URLを貼り付けてNextをクリックし、続けてInsertをクリックします。
- 必要に応じてサイズを変え、Publishをクリックします。
フォームがページに表示されます。Embedタブには、このフォームの一部の機能にGoogle Sitesが対応していないことも表示されます。
Formfacadeを選ぶ理由
- ウェブサイトのテーマに合わせられます。フォームがサイトのフォント、色、レイアウトを引き継ぎ、Googleのブランド表示なしで、プロらしくレスポンシブな見た目になります。
- Google Workspaceのワークフローはそのままです。回答は引き続きGoogle Formsに届き、Google Sheetsに自動同期できるので、回答の管理方法は何も変わりません。
- ファイルアップロードに対応しています。標準の埋め込みと違い、Formfacadeならファイルアップロードの質問があるフォームも埋め込めます（1ファイルあたり最大10 MB）。より大きなファイルやGoogle Driveへのアップロードの同期は、上位の有料プランで利用できます。
制限
- Google Sitesはiframeでの埋め込みしかできません。そのため、Formfacadeを使ってもセッション記録、ユーザー分析、回答の事前入力は機能しません。
- 無料プランと下位プランではFormfacadeのブランド表示が入ります。無料プランではGoogleのブランド表示は消えますが、小さなFormfacadeのクレジット表示が入ります。これを消すには、より多くの回答数と合わせて有料プランが必要です。現在の料金とフォームに必要なものを照らし合わせてご確認ください。
よくある質問
同じページに複数のGoogle Formsのフォームを埋め込めますか？
はい。フォームごとに挿入の手順を繰り返してください。Google Sitesでは1つのページに複数のフォームを埋め込めます。
Googleのブランド表示と注意書きは消せますか？
標準の方法ではできません。Googleのブランド表示と注意書きを消すには、Formfacade（方法2）を使ってください。
フォームのサイズを変えたり、周りにテキストを加えたりできますか？
はい。埋め込んだフォームはドラッグしてサイズを変えられます。上下に見出し、画像、テキストを加えて、訪問者に内容を伝えることもできます。
フォームをサイトのフォント、色、レイアウトに合わせられますか？
標準の埋め込みではできません。Google Formsで変えられるのはヘッダーの色とフォントだけで、それ以外はGoogleのフォームのままに見えます。サイトの色、ボタン、レイアウトに合わせるにはFormfacadeを使ってください。
まとめ
Google FormsのフォームをGoogle Sitesに挿入すると、Googleのブランド表示が残り、変えられるのはサイズだけです。Formfacadeなら、EmbedタブからURLを1つコピーしてInsert → Embedに貼り付け、フォームの色とフォントをサイトに合わせて設定できます。フォームを作成して、方法2の手順を進めてください。ご不明な点があれば、サポートにご連絡ください。
最終更新：