Google フォームを HTML のページに埋め込む方法と、ページに直接フォームを付ける方法

ChatGPT や Claude に作ってもらったお店のページに、予約や問い合わせの受付を付けたい。回答の集計には使い慣れた Google フォームを使いたい。そんなときは、フォームの「HTML を埋め込む」で取り出した HTML を、ページに貼ります。

このページは、埋め込み用の HTML を取り出す手順、ページに貼る場所とスマホで崩れない大きさ、埋め込んだフォームが表示されないときに確かめることを説明します。Google フォームの手順と上限は、2026 年 10 月 15 日に Google のヘルプで確かめた内容です。

Google フォームの埋め込みコードを取得する

Google のヘルプ フォームを公開して回答者と共有する の手順です。手順はこのあとの 2 つです。

1. フォームを公開する

ヘルプには「回答者がフォームにアクセスできるようにするには、フォームを公開する必要があります。」とあります。

フォームを開いて右上の「公開」をクリックし、回答できる人を確かめて、もう一度「公開」をクリックします。公開されると、右上に「公開済み」と表示されます。

ページの訪問者に答えてもらうなら、「一般的なアクセス」で、リンクを知っているすべてのユーザーにアクセス権を付けます。

2. 「HTML を埋め込む」で HTML をコピーする

フォームを開いて右上のその他アイコンをクリックし、「HTML を埋め込む」を選びます。表示された HTML を「コピー」でコピーします。

「送信」から「<>」を選ぶと書いた解説もありますが、2026 年 10 月 15 日のヘルプの手順は、その他アイコンの「HTML を埋め込む」です。

HTML に貼る場所と、スマホで崩れないサイズ

コピーした HTML は、ページの HTML の、フォームを出したい場所に貼ります。AI が作ったページなら、AI が書いた問い合わせフォーム（<form> から </form> まで）と入れ替えるのが早道です。AI に頼むなら「問い合わせフォームの部分を、次の Google フォームの埋め込みコードに置き換えて」と書き、コピーした HTML を続けて貼ってください。

大きさについては、Google のヘルプに、コピーされる HTML の中身も、大きさの変え方も書かれていません。そこで 2026 年 10 月 15 日に、公開されている Google フォームを、次のコードでページに入れ、パソコンの Chromium で、幅 390 px のスマホの画面と、幅 1,280 px のパソコンの画面で表示を確かめました。

<iframe src="https://docs.google.com/forms/d/e/（フォームの ID）/viewform?embedded=true" width="100%" height="800"></iframe>

• 幅。 幅を width="640" のように数字（px）で決めると、幅 390 px の画面では枠がはみ出し、ページ全体が横にスクロールしました。width="100%" にすると、枠は画面の幅に収まりました。
• 高さ。 枠の高さは、フォームの長さに合わせて変わりませんでした。試したフォームは高さ 800 px の枠に入りきらず、枠の中でスクロールしました。質問の数に合わせて、height の数字を大きくします。

コピーした HTML に width と height があれば、同じように書き換えます。

埋め込んだページをそのまま公開するなら、この段落のあとにあるボックスから始められます。.html のファイルをドロップするか、「コードから」に切り替えてコードを貼り付け、「プレビューのリンクをつくる」を押すと、登録なしでプレビューのリンクができます。ただし、このプレビューは登録前に見え方を確かめるためのもので、iframe を取り除いて表示するため、埋め込んだ Google フォームは出ません。リンクが開けるのも 3 分間 だけ。「このページを受け取る（無料・カード不要）」を押して登録すると、ページがアカウントに入り、管理画面のプレビューと、「公開する」を押したあとのページで、フォームが表示されます。Free プランはカード登録なしで使え、1 ページを公開できます。

埋め込んだフォームが表示されないとき

確かめることは、ページをどこで開いているか、ページを置いた場所が iframe を止めていないか、フォームの設定の 3 つです。このあとの 4 項目を確認します。

• ファイルのまま開いている。 アドレスが file:/// で始まる、パソコンの中の HTML ファイルで開いているなら、それは原因ではありません。2026 年 10 月 15 日にパソコンの Chromium で試したところ、ファイルのままでも埋め込んだフォームは表示されました。ただ、そのページを開けるのは自分のパソコンだけです。ほかの人に入力してもらうには、ページをネットに公開します。
• ページを置いた場所が、iframe を止めている。 ほかのサイトの iframe を読み込まない設定のページでは、フォームの枠が空白になります。同じ日に Chromium で試したところ、開発者ツールのコンソールに Framing 'https://docs.google.com/' violates the following Content Security Policy directive で始まるメッセージが出ました。Convika では、登録なしで作るプレビュー は iframe を取り除き、読み込みも止めています。登録して受け取ったページと公開したページは、https:// で始まるほかのサイトを iframe で読み込める設定です。この設定で試したときも、Google フォームは表示されました。
• フォームが公開されていない、または回答を受け付けていない。 ヘルプ フォームの回答を表示、管理する の言葉は「公開されていないフォームでは回答を受け付けることはできません。」です。公開を停止すると、リンクを知っている回答者もフォームにアクセスできなくなります。「回答を受付中」をオフにすると、回答者には受け付けが終わったことを知らせるメッセージが出ます。オーナーは公開の前に、回答できる人をドメインやユーザー グループに限ることもでき、その場合はほかの訪問者は回答できません。
• Google アカウントへのログインが必要な設定になっている。 「回答を 1 回に制限する」をオンにすると、ヘルプの言葉では「フォームにアクセスして入力するには、Google アカウントにログインする必要があります」。ヘルプ フォームの質問の形式を選択する によると、ファイルのアップロードの質問に答えるときも、回答者のログインが必要です。訪問者に Google へのログインを求めたくないなら、この 2 つは使いません。

Google フォームと、ページに直接付けるフォームの比較

フォームをページに付ける方法は、Google フォームの埋め込みのほかに、ページを公開する場所のフォームを使う方法があります。Convika で公開したページなら、管理画面の「フォームを追加する」で、ページの HTML の中にフォームが入ります。

下の表の Google フォームの欄は、2026 年 10 月 15 日に Google のヘルプと 製品ページ で確かめた内容です。

選び方の目安を、このあとの 2 項目で示します。

• 回答をスプレッドシートで集計したい、すでに公開しているページに足したい: Google フォーム。
• ページの見た目のままフォームを置いて、訪問数と送信を同じ画面で見たい: Convika のフォーム。ページを Convika で公開して、管理画面の「フォームを追加する」で入力項目を「メールアドレスのみ」「名前とメールアドレス」「名前・メールアドレス・問い合わせ内容」から選び、「ページに追加する」を押します。届いた送信は「送信一覧を見る」で確かめ、「CSVエクスポート」で書き出せます。

AI が作ったページのフォームをそのまま使う

AI が書いたフォームを、見た目を変えずに使う方法もあります。

AI が書いたフォームには、たいてい送信内容の受け取り先がありません。Formspree のようなフォームサービスの URL を action に設定するか、Convika で公開して受け取り先のあるフォームに入れ替えます。2 つの方法の手順と違いは、ガイド AI で作ったページの問い合わせフォームに、送信内容が届くようにする方法 で比べています。

Convika で公開したページでは、<form action="https://…" method="post"> のようにほかのサイトへ送るフォームは、そのまま送れます。ページのスクリプトから fetch でほかのサイトへ送る書き方は止めているので、AI には「fetch を使わずに、form の action で送る形にして」と伝えてください。

よくある質問

Google フォームを HTML に埋め込むにはどうすればよいですか？

フォームを公開し、右上のその他アイコンから「HTML を埋め込む」を選んでコピーした HTML を、ページの置きたい場所に貼り付けます。手順は Google のヘルプ「フォームを公開して回答者と共有する」にあります。スマホで横にはみ出すときは、枠の幅を width="100%" にします。

埋め込んだ Google フォームが表示されないときはどうすればよいですか？

ページを置いた場所の設定と、フォームの公開状態の 2 つを確かめます。ページを置いた場所の設定で、ほかのサイトの iframe が止められていないか確認してください。フォームが公開されていて、回答を受け付けているかも確かめます。ファイルのままパソコンで開いたページでは、2026 年 10 月 15 日に Chromium で試したところ表示されました。Convika では、登録なしで作るプレビューには表示されず、登録して受け取ったページと公開したページには表示されます。

埋め込んだ Google フォームをレスポンシブ対応にするにはどうすればよいですか？

枠の幅を width="100%" にします。2026 年 10 月 15 日に幅 390 px のスマホの画面で試したところ、幅を数字で決めた枠は横にはみ出し、100% にすると画面に収まりました。高さはフォームの長さに合わせて変わらないので、質問の数に合わせて height の数字を大きくします。

埋め込んだ Google フォームの回答をメールで受け取れますか？

受け取れます。フォームの「回答」で、その他アイコンから「新しい回答についてのメール通知を受け取る」をクリックします。回答者のメールアドレスを集める設定なら、「回答のコピーを回答者に送信」で、回答者にも回答のコピーを送れます。ページに埋め込んでいても、設定はフォームの側で行います。

Google フォームを埋め込まずにページのフォームを付けられますか？

付けられます。Convika でページを公開すると、管理画面の「フォームを追加する」で、ページの HTML の中にフォームを入れられます。送信内容は管理画面に保存され、届くたびにメールでも知らせます。Free プランで一覧に出るのは月 50 件までで、それを超えた分も保存されます。AI が書いたフォームを残したいなら、Formspree のようなフォームサービスを送信先にする方法もあります。