GoogleフォームをWebサイトに埋め込んで、アンケートや申し込みフォームを設置したい！ と思ったことはありませんか？
「HTMLにGoogleフォームを埋め込む方法が知りたい」
「埋め込みコードのサイズを変更したい、スマホ対応にしたい」
「埋め込んだのにフォームが表示されない！原因は？」
実は、Googleフォームはiframeタグを使って簡単に埋め込み可能ですが、デザイン調整やレスポンシブ対応が必要になる場合もあります。
この記事では、
- GoogleフォームをHTMLに埋め込む方法（基本手順）
- Googleフォームの埋め込みコードを取得する方法
- 埋め込み後のデザイン・サイズ調整（レスポンシブ対応）
- Googleフォームが埋め込めない・表示されないときの対処法
- Googleフォームを埋め込む以外の設置方法（リンク・ポップアップ）
- よくある質問（FAQ）
を詳しく解説します！
Contents
GoogleフォームをHTMLに埋め込む方法（基本手順）
Googleフォームは、iframeタグを使って簡単にWebサイトに埋め込むことが可能です。
📌 埋め込み方法（基本手順）
- Googleフォームを開く
- 右上の「送信」ボタンをクリック
- 「<>（HTML埋め込み）」アイコンを選択
- 「iframe」コードをコピー
- WebサイトのHTMLに貼り付ける
📌 埋め込みコードの例
htmlCopyEdit<iframe src="https://docs.google.com/forms/d/e/xxxxxxxxxxxx/viewform?embedded=true" width="640" height="800" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>
✅ ポイント
width="640"→ フォームの幅を指定（変更可能）height="800"→ フォームの高さを指定（変更可能）?embedded=true→ 埋め込み用のパラメータ（必須）
Googleフォームの埋め込みコードを取得する方法
Googleフォームの埋め込み用HTMLコードは、「送信」ボタンから取得可能です。
📌 取得手順（PC版）
- Googleフォームを開く
- 右上の「送信」ボタンをクリック
- 「<>（埋め込み）」アイコンをクリック
- iframeタグのコードをコピー
- WebサイトのHTMLに貼り付ける
✅ ポイント
- この方法なら、WordPress・Wix・BloggerなどのWebサイトにも簡単に埋め込める！
埋め込み後のデザイン・サイズ調整（レスポンシブ対応）
GoogleフォームをWebサイトに埋め込んだときに、サイズが合わない・スマホで見づらい という問題が発生することがあります。
✅ 埋め込みフォームのサイズを変更する方法
📌 サイズを変更するHTMLコード
htmlCopyEdit<iframe src="https://docs.google.com/forms/d/e/xxxxxxxxxxxx/viewform?embedded=true" width="100%" height="1000" frameborder="0">読み込んでいます…</iframe>
✅ ポイント
width="100%"→ フォームの幅を100%にしてレスポンシブ対応height="1000"→ 高さを調整（内容に応じて変更）
✅ スマホ対応（レスポンシブデザイン）にする方法
Googleフォームの埋め込みは、スマホでは表示が崩れることがあるため、CSSで調整するのがおすすめ です。
📌 レスポンシブ対応CSSコード
cssCopyEdit.google-form-container {
position: relative;
width: 100%;
padding-bottom: 150%; /* 高さを調整 */
height: 0;
}
.google-form-container iframe {
position: absolute;
width: 100%;
height: 100%;
border: 0;
}
✅ ポイント
- CSSでレスポンシブ対応すれば、スマホでも綺麗に表示できる！
Googleフォームが埋め込めない・表示されないときの対処法
GoogleフォームをHTMLに埋め込んだのに、フォームが表示されない場合 は、以下の原因が考えられます。
| 原因 | 解決策 |
|---|---|
| フォームの公開設定が「組織内限定」になっている | Googleフォームの設定で「誰でもアクセス可」に変更する |
| iframeのコードが正しくコピーされていない | 「送信」→「埋め込みコード」から正しいコードを取得し直す |
| Webサイト側でiframeタグがブロックされている | WordPressの「カスタムHTMLブロック」を使うと解決 |
| フォームの高さが足りず、見切れている | height="1000" など、適切な高さを指定する |
✅ ポイント
- 公開設定を「全員がアクセス可能」に変更すれば、表示されるようになる！
Googleフォームを埋め込む以外の設置方法（リンク・ポップアップ）
Googleフォームを埋め込む以外にも、リンクやポップアップ表示でフォームを設置する方法 があります。
✅ フォームのリンクをボタンで開く
htmlCopyEdit<a href="https://docs.google.com/forms/d/e/xxxxxxxxxxxx/viewform" target="_blank">アンケートに回答する</a>
✅ メリット
- 埋め込まずに、ボタンで簡単に開ける
- ページのデザインを崩さずに設置可能
✅ ボタンをクリックしたらポップアップでフォームを開く
htmlCopyEdit<button onclick="window.open('https://docs.google.com/forms/d/e/xxxxxxxxxxxx/viewform', '_blank', 'width=800,height=600');">
アンケートを開く
</button>
✅ メリット
- 埋め込まずにフォームを開けるので、デザインが崩れない
よくある質問（FAQ）
Q1. GoogleフォームをWebサイトに埋め込む方法は？
👉 「送信」→「埋め込みコード」を取得し、HTMLにiframeタグを貼り付ける。
Q2. Googleフォームをスマホ対応（レスポンシブ）にするには？
👉 CSSで width: 100% にし、高さを padding-bottom で調整すると対応可能。
Q3. Googleフォームが埋め込めない原因は？
👉 フォームの公開設定が「組織内限定」になっている可能性がある。設定で「誰でもアクセス可」に変更すれば解決。
