Googleフォームをホームページに埋め込む手順と、表示が崩れるときの直し方

ホームページに問い合わせや申し込みの窓口を作りたいとき、手軽なのがGoogleフォームの埋め込みです。フォームそのものは無料で作れて、ホームページの側には決まったコードを貼り付けるだけで表示できます。ところが実際に貼ってみると、スマートフォンで横にはみ出す、フォームの下が切れて枠の中にスクロールが出る、そもそも何も表示されない、といった崩れにつまずく人が少なくありません。

この記事では、Googleフォームをホームページに埋め込む手順を、Googleの公式ヘルプに沿って説明します。WordPressやGoogleサイトへの貼り付け方、表示が崩れるときの直し方、埋め込む前に確かめたい設定まで扱います。届いた問い合わせを担当と状況つきで管理し、同じ画面から返信まで送りたい場合の選択肢の1つとして、Halictにも後半で触れます。

Googleフォームの埋め込みが使われる理由

小さな会社や個人の事業者、学校や地域の団体のホームページでは、問い合わせや申し込みの受け付けにGoogleフォームを使う例がよく見られます。理由は大きく3つあります。

1つ目は、費用がかからないことです。Googleアカウントがあれば、フォームの作成も回答の受け付けも無料で始められます。ホームページの制作会社に問い合わせのフォームを作ってもらうと、その作業の費用が発生しますが、Googleフォームなら自分で用意できます。

2つ目は、サーバーの設定が要らないことです。自前の問い合わせのフォームを作る場合、送信された内容をメールで届けたり保存したりする仕組みをサーバーに用意する必要があります。Googleフォームを埋め込む方法なら、送信された回答はGoogleの側に保存されるので、ホームページの側には表示のためのコードを貼り付けるだけで済みます。

3つ目は、回答の管理がしやすいことです。届いた回答はフォームの「回答」の画面で確認でき、Googleスプレッドシートに保存することもできます。表の形で見られるので、件数の確認や簡単な集計がすぐにできます。

一方で、埋め込みにはできることの限界もあります。フォームの見た目はGoogleフォームの画面がそのまま枠の中に表示される形になるので、ホームページのデザインに完全に合わせることはできません。この点は、埋め込みを選ぶ前に知っておきたい前提です。

埋め込む前に確かめておく設定

埋め込んだあとで「誰も回答できない」と気づくことがないよう、先にフォームの設定を確かめます。

フォームを公開しておく

Googleの公式ヘルプでは、回答者がフォームにアクセスするには、フォームを公開する必要があると説明されています。

回答者がフォームにアクセスできるようにするには、フォームを公開する必要があります。フォームの共有準備が整ったら、メールやソーシャル メディアで共有したり、ウェブサイトやブログに埋め込んだりできます。 出典: support.google.com

ホームページに埋め込んでも、フォームが公開されていなければ、訪問者は回答できません。右上に「公開済み」と表示されているかを確かめます。また、フォームの公開を停止すると、リンクを知っている人もアクセスできなくなるので、受け付けを一時的に止めたいときは公開の停止ではなく、受け付けの設定で調整する方法も検討します。

回答できる人の範囲

公開するときの「一般的なアクセス」で、リンクを知っているすべてのユーザーが回答できるようにしておきます。勤務先や学校のアカウントで作ったフォームでは、回答できる範囲が組織の中に制限されていることがあります。この場合、ホームページを見に来た社外の人は回答できません。

ログインを求める設定になっていないか

「回答を1回に制限する」をオンにすると、回答する人はGoogleアカウントへのログインが必要になります。ホームページの問い合わせのフォームでは、ログインを求めた時点で回答をやめてしまう人が出るので、この設定は通常オフにしておきます。メールアドレスを集める設定を「確認済み」にした場合も、Googleアカウントのメールアドレスが記録されることになるので、問い合わせのフォームでは「回答者からの入力」にしておくのが一般的です。

送信後のメッセージ

送信したあとに表示される確認のメッセージは、初期のままだと短い定型文です。「お問い合わせありがとうございます。2営業日以内に担当者からご連絡します」のように、次に何が起こるかを書いておくと、問い合わせた人が安心します。設定の「プレゼンテーション」から「確認メッセージ」を編集できます。

Googleフォームを埋め込む手順

設定を確かめたら、埋め込みのコードを取得します。公式ヘルプの手順は次のとおりです。

1. Googleフォームでフォームを開きます。
2. 右上のその他のアイコンをクリックします。
3. 「HTMLを埋め込む」を選択します。
4. 表示されたHTMLをコピーするには、「コピー」をクリックします。
5. ウェブサイトやブログにHTMLを貼り付けます。

コピーされるのは、iframe（アイフレーム）と呼ばれる形のHTMLのコードです。iframeとは、ほかのページを自分のページの中の枠に表示するための仕組みのことで、ホームページの中にGoogleフォームの画面が窓のように表示されます。コードの中には、枠の幅と高さを決める指定が含まれています。表示の崩れの多くは、この幅と高さの指定に原因があります。

埋め込みとリンクの違い

ホームページにフォームを用意する方法には、埋め込みのほかに、フォームへのリンクを貼る方法もあります。

方法	見え方	向いている場面
埋め込み	ホームページの中にフォームが表示される	問い合わせや申し込みのページを1つ作りたい
リンク	ボタンや文字をクリックするとフォームが別の画面で開く	ページの中に枠を作りたくない、表示の崩れを避けたい

埋め込みは、ホームページから離れずに回答できるのが利点です。一方で、表示の調整が必要になることがあります。表示の崩れがどうしても直らない場合は、リンクで案内する方法に切り替えるのも1つの判断です。

コードを貼り付ける前に読む

コードを貼り付ける前に、中身をざっと読んでおくと、あとで崩れを直すときに迷いません。iframeのコードは、おおまかに次の3つの部分でできています。

部分	意味
src	枠の中に表示するページの住所。Googleフォームの回答の画面の住所が入る
width	枠の幅
height	枠の高さ

崩れを直すときに書き換えるのは、widthとheightの2つだけです。srcの部分を書き換えると、別のページが表示されたり、何も表示されなくなったりするので触りません。コードを書き換える前に、元のコードをメモ帳などに保存しておくと、うまくいかなかったときにすぐ戻せます。

フォームを作り直したときの注意

質問を増やしたり減らしたりしても、フォームそのものが同じなら、ホームページの側のコードを貼り直す必要はありません。枠の中には、いつも最新のフォームが表示されます。ただし、高さはフォームの長さに合わせて調整し直します。一方、フォームを新しく作り直した場合は、住所が変わるので、新しいフォームのコードを取得して貼り直します。古いフォームのコードが残っていると、使っていないフォームに問い合わせが届き続けることになります。

ホームページの種類ごとの貼り付け方

コピーしたHTMLを貼り付ける場所は、ホームページを作っている道具によって違います。

WordPressの場合

WordPressのブロックエディターでは、「カスタムHTML」というブロックを使います。WordPressの日本語の公式ドキュメントでは、ブロックインサーターのアイコンをクリックして追加するか、新しい段落ブロックに「/html」と入力してEnterキーを押すと、すばやく追加できると説明されています。詳しくはWordPressのカスタムHTMLブロックの説明で確かめられます。

1. 問い合わせのページを編集の画面で開きます。
2. フォームを表示したい位置で、カスタムHTMLのブロックを追加します。
3. ブロックの中に、Googleフォームからコピーしたコードを貼り付けます。
4. プレビューで表示を確かめてから、更新または公開します。

段落のブロックにそのままコードを貼り付けると、コードが文字として表示されてしまいます。必ずカスタムHTMLのブロックを使います。

Googleサイトの場合

Googleサイトでは、HTMLを貼り付けなくてもフォームを挿入できます。Googleサイトのヘルプでは、サイトを開き、右側の「挿入」をクリックして、メニューの下部で追加するファイルの種類からフォームを選び、ファイルを選択して「挿入」をクリックする手順が案内されています。変更を反映するには、右上の「公開」をクリックします。

そのほかのホームページ作成サービスの場合

ホームページ作成サービスの多くには、HTMLのコードを貼り付けるための部品が用意されています。「HTML」「埋め込み」「カスタムコード」といった名前の部品を探し、その中にコピーしたコードを貼り付けます。部品の名前や使える条件は、サービスや料金のプランによって違うので、使っているサービスのヘルプで確かめます。無料のプランでは、HTMLの貼り付けが使えない場合もあります。

自分でHTMLを書いている場合

HTMLのファイルを直接編集している場合は、フォームを表示したい位置にコードを貼り付けます。あとで説明する幅の調整のために、コードを囲む枠の要素を1つ用意しておくと、デザインの調整がしやすくなります。

問い合わせのフォームの質問の作り方

埋め込みの手順と同じくらい大切なのが、フォームの中身です。ホームページの問い合わせのフォームは、項目が多すぎると途中で離れる人が増え、少なすぎると返信のために聞き直す手間が増えます。基本の項目と、その作り方を整理します。

項目	形式	必須にするか
お名前	短い文章	必須
メールアドレス	短い文章（回答者からの入力）	必須
電話番号	短い文章	任意
お問い合わせの種類	選択肢から1つ選ぶ	必須
お問い合わせの内容	長い文章	必須
個人情報の取り扱いへの同意	チェックボックス	必須

問い合わせの種類を選択肢にする

「サービスについて」「料金について」「採用について」「その他」のように、問い合わせの種類を選んでもらうと、届いた時点で誰が対応すべきかが分かります。回答をスプレッドシートに保存していれば、種類ごとに並べ替えたり絞り込んだりもできます。

必須の項目は最小限にする

公式ヘルプでは、質問ごとに「必須」のボタンをオンにすると、回答を必須にできると案内されています。必須の項目が多いと、回答する人の負担が大きくなります。返信に欠かせない項目だけを必須にし、電話番号のように、なくても返信できる項目は任意にします。

メールアドレスの打ち間違いに備える

問い合わせのフォームでもっとも困るのが、メールアドレスの打ち間違いです。返信しても届かず、問い合わせた人は返事が来ないと感じてしまいます。送信後の確認のメッセージに「数日たっても返信が届かない場合は、お手数ですがお電話でご連絡ください」のように、別の連絡の手段を書いておくと、行き違いを減らせます。

公開する前の確認リスト

ホームページに公開する前に、次の点を確かめます。

1. フォームが公開されていて、リンクを知っているすべてのユーザーが回答できるか
2. ログインを求める設定になっていないか
3. パソコンとスマートフォンの両方で、横にはみ出さず、枠の中にスクロールが出ないか
4. ログインしていないブラウザの画面で表示され、送信までできるか
5. 試しに送った回答が、フォームの「回答」とスプレッドシートに届くか
6. 新しい回答のメール通知がオンになっていて、通知が届くか
7. 送信後の確認のメッセージが、次に何が起こるかを伝える文面になっているか
8. 試しに送った回答を削除したか

特に5番目と6番目は、公開してから気づくと、問い合わせを取りこぼす原因になります。試しの送信は、実際に問い合わせる人と同じ手順で行います。

表示が崩れるときの直し方

埋め込みでよく起きる崩れと、その直し方を整理します。

起きていること	主な原因	直し方
スマートフォンで横にはみ出す	幅が数字で固定されている	幅を100%にする
フォームの下が切れて枠の中にスクロールが出る	高さが足りない	高さの数字を大きくする
下に大きな空白ができる	高さが大きすぎる	高さの数字を小さくする
何も表示されない	貼り付けた場所、公開の設定、テーマやプラグイン	下の手順で順に確かめる
「アクセス権が必要」と表示される	回答できる範囲が制限されている	公開の設定を確かめる

スマートフォンで横にはみ出すとき

コピーしたコードの幅は、数字で固定されています。パソコンでは収まって見えても、画面の幅が狭いスマートフォンでは、フォームが画面からはみ出し、横にスクロールしないと読めなくなります。

直し方は、コードの中の幅の指定を、数字から「100%」に書き換えることです。100%にすると、フォームの幅が、貼り付けた場所の幅に合わせて伸び縮みするようになります。WordPressのテーマなどで、本文の幅がすでに決まっている場合は、その幅いっぱいにフォームが表示されます。

枠の中にスクロールが出るとき

高さの指定がフォームの長さより小さいと、フォームの下の部分が切れ、枠の中に縦のスクロールが出ます。ホームページ全体のスクロールと枠の中のスクロールが重なり、特にスマートフォンでは操作しにくくなります。

直し方は、高さの数字を大きくすることです。フォームの最後の送信のボタンまで、枠の中のスクロールなしで表示される数字を探します。スマートフォンでは、画面の幅が狭いため、1つの質問が縦に長く表示されるので、パソコンで合わせた高さでは足りないことがあります。パソコンとスマートフォンの両方で確かめ、長いほうに合わせます。

下に大きな空白ができるとき

反対に、高さを大きくしすぎると、送信のボタンの下に大きな空白ができます。質問を減らした場合や、送信後の確認のメッセージが表示されたときに目立ちます。高さはフォームの長さに合わせて調整し、質問を増やしたり減らしたりしたときは、高さも合わせて直します。

何も表示されないとき

何も表示されない場合は、次の順で確かめます。

1. コードを段落のブロックなど、文字を入れる場所に貼り付けていないか。HTMLを貼り付けるための部品に貼り直す
2. コードの一部だけをコピーしていないか。「コピー」のボタンで全体を取り直す
3. フォームが公開されているか。右上に「公開済み」と表示されているかを確かめる
4. ホームページ作成サービスやWordPressのテーマ、プラグインが、外部のページの表示を制限していないか

4つ目は、使っている道具によって事情が違います。セキュリティのためのプラグインや、ホームページ作成サービスの設定で、外部のページを枠の中に表示することが制限されている場合があります。他のページに貼ったときは表示されるのに、特定のページだけ表示されない、という場合は、そのページに使っている部品や設定を確かめます。

表示の確かめ方

直したあとは、必ず次の環境で表示を確かめます。

・パソコンのブラウザ
・スマートフォンの縦向きの画面
・ログインしていない状態（ブラウザのプライベートの画面など）

最後の点が特に大切です。自分のGoogleアカウントでログインしたまま確かめると、組織の中に制限されたフォームでも問題なく表示されるため、社外の人が回答できないことに気づけません。

デザインをホームページに合わせたいとき

埋め込みのフォームは、Googleフォームの見た目がそのまま表示されます。ホームページの色や文字とまったく同じにすることはできませんが、フォームの側で調整できる部分もあります。

フォームの側で調整できること

Googleフォームの公式ヘルプでは、フォームに画像やYouTubeの動画を追加できると案内されています。フォームの冒頭に会社や団体のロゴの画像を入れるだけでも、ホームページから浮いて見える印象は和らぎます。質問が多いフォームは、セクションを追加して話題ごとに分けると、枠の中でも読みやすくなります。

埋め込むフォームでは自動保存を見直す

同じヘルプでは、回答の下書きは初期の設定で自動的に保存されると説明されたうえで、ウェブサイトに埋め込まれたフォームなどでは、自動保存の機能を無効にしておくことが勧められています。設定の「プレゼンテーション」から「すべての回答者に対して自動保存を無効にする」をオンにします。店頭のタブレットなど、複数の人が同じ端末で回答する場面では、前の人の入力が残らないようにするためにも、この設定を確かめておきます。

自作のフォームとつなぐ方法

ホームページの側で独自のデザインのフォームを作り、送信先だけをGoogleフォームにつなぐ方法を紹介している記事もあります。見た目は自由にできますが、HTMLの知識が必要で、Googleフォームの質問を変えたときに、ホームページの側のフォームも直す必要があります。Googleの正式な機能として案内されている方法ではないため、仕様が変わったときに動かなくなる可能性も考えておく必要があります。仕事で使う窓口では、保守の手間と止まったときの影響を比べてから選びます。

Googleフォームの埋め込み以外の選択肢

ホームページに問い合わせの窓口を作る方法は、Googleフォームの埋め込みだけではありません。主な選択肢を比べておくと、自分たちに合う方法を選びやすくなります。

方法	費用の目安	見た目の自由さ	運用の手間
Googleフォームの埋め込み	無料	低い（Googleフォームの見た目のまま）	回答の管理は自分で工夫する
ホームページ作成サービスのフォームの部品	サービスのプランに含まれることが多い	中くらい（サイトのデザインに合わせやすい）	サービスの機能の範囲で管理する
WordPressのフォームのプラグイン	無料から有料まで	高い	更新やメールの送信の設定が必要
フォームの専用のサービス	無料から有料まで	サービスによって違う	回答の管理や返信の機能が付いていることが多い

Googleフォームの埋め込みが向いている場面

問い合わせの件数がそれほど多くなく、1人か2人で対応している場合や、イベントの申し込みのように期間を区切って受け付ける場合は、Googleフォームの埋め込みで十分なことが多いです。費用がかからず、作り直しも簡単なので、まず試してみる方法としても向いています。

別の方法を考えたほうがよい場面

一方で、次のような場面では、別の方法を検討する価値があります。

・ホームページのデザインに、フォームの見た目を完全に合わせたい
・問い合わせの件数が多く、複数の人で分担して返信している
・問い合わせた人に、受け付けたことを知らせる自動のメールを送りたい
・問い合わせの履歴を、お客様ごとにさかのぼって確かめたい

特に、複数の人で分担して返信している場合は、回答の管理の仕組みが運用の手間を大きく左右します。この記事の後半で、その場面の選択肢の1つを紹介します。

埋め込んだあとの運用で気をつけること

埋め込みが終わったら、問い合わせの窓口として運用が始まります。運用で気をつけたい点を整理します。

回答が届いたことに気づく仕組み

Googleフォームの初期の設定では、回答が届いても、フォームを開かない限り気づけません。公式ヘルプでは、フォームの「回答」を開き、その他のアイコンから「新しい回答についてのメール通知を受け取る」をクリックすると、回答が届くたびにメールで知らせが来ると案内されています。問い合わせの窓口として使うなら、最初にこの設定をオンにします。

返信の担当と期限を決める

複数の人で問い合わせに対応する場合は、誰が返信するかを決めておかないと、返信が漏れたり、2人が同じお客様に別々に返信したりします。回答をスプレッドシートに保存し、「担当」と「状況」の列を作って管理する方法がよく使われますが、件数が増えると列を埋める手間が負担になります。

迷惑な送信への備え

ホームページに公開したフォームには、宣伝や意味のない送信が届くことがあります。届いた回答は、フォームの「回答」の「個別」の画面から1件ずつ削除できます。削除した回答は元に戻せないので、問い合わせの記録として残しておきたいものを誤って消さないよう注意します。

個人情報の扱い

問い合わせのフォームでは、名前、メールアドレス、電話番号などの個人情報を集めることになります。フォームの冒頭に、集めた情報を何に使うかを書いておきます。個人情報の保護に関する法律では、事業者が本人から書面（電子的な記録を含む）で直接個人情報を集めるときは、あらかじめ本人に利用の目的をはっきり示すことが求められています。具体的な書き方は事業の内容によって変わるので、個人情報保護委員会の案内や専門家に確かめます。

届いた問い合わせの対応まで1つにしたいとき

Googleフォームの埋め込みは、問い合わせを受け付けるところまでは無料で十分に使えます。一方で、届いたあとの対応をスプレッドシートとメールソフトで回していると、次のような負担が出てきます。

・スプレッドシートの「担当」「状況」の列を手で埋め続けている
・返信はメールソフトから別に送っていて、誰が何を返したかが表に残らない
・同じお客様から2回目の問い合わせが来たとき、前回のやり取りを探すのに時間がかかる

こうした場面の候補の1つが、フォームのサービスのHalictです。公式サイトによると、Halictでは、届いた回答の1件ごとに担当と状況が残り、返信も同じ画面から送れて、開封まで記録されます。回答を表で管理し、担当や状況の列を手で埋め、返信はメールソフトで送る、という作業を1つにまとめることを目指したサービスです。

問い合わせの窓口に関係する機能を、公式サイトの記載から整理します。

・作りたいフォームをひと言で伝えると、AIが質問、選択肢、必須の設定まで組み立てる
・回答者には1画面に1問ずつ表示される
・自動返信を送れる
・チームのプランでは、Teams、Slack、Chatworkへの通知と、メールのひな形が使える
・スタータープランからは、フォームに表示されるHalictの表記を消せる

料金ページでは、フリープランはメンバー1人までで、フォームの数と回答の数は無制限、自動返信やCSVの書き出しが使えると案内されています。メンバー3人までのスタータープランは月額2,980円、10人までのチームプランは月額7,800円です（いずれも税抜）。1人で問い合わせに対応しているなら、無料のまま試せます。

受け付けるだけならGoogleフォームの埋め込み、届いた問い合わせに担当を決めて返信まで進めるならHalictのような道具、という分け方で考えると選びやすくなります。

Halictは、@SOHOを運営する株式会社ライフスケープが開発・提供しています。

ホームページの窓口づくりの仕事で見てきたこと

フリーランスや在宅ワークの市場を20年運営してきた立場から見ると、ホームページに問い合わせの窓口を作る仕事は、制作の仕事の中でも頼まれることの多いものです。フォームを埋め込む作業そのものは短時間で終わりますが、信頼される人は、埋め込んだあとに「回答の通知は誰に届けますか」「返信は何日以内にしますか」と、運用の取り決めまで発注する側に確かめています。窓口は作って終わりではなく、届いた声に応えて初めて役に立つからです。

ホームページやアプリの開発の仕事に関心がある人は、アプリケーション開発のお仕事で、開発の案件の種類と進め方を確かめられます。フォームの見た目をホームページに合わせる調整は、デザインの仕事として頼まれることもあります。デザイナーの年収・単価相場では、デザインの仕事の単価の幅と働き方による違いを紹介しています。

運営者として見てきた限りでは、仲介の手数料がかからない直接の取引は、同じ予算でも受け手の手取りが厚くなり、発注する側もその分だけ多くの作業を頼めるという、双方にとって得のある形になりやすいものです。ホームページの窓口づくりのように、作業のあとの運用の取り決めが仕上がりを左右する仕事ほど、当事者どうしが直接話せる形の利点が大きくなります。

ホームページの問い合わせの窓口を整えることは、在宅で働く体制づくりの一部でもあります。テレワーク 助成金 2026では、在宅勤務の導入に使える助成金の仕組みを整理しています。

よくある質問

Q. Googleフォームの埋め込みは無料でできますか？

Googleフォームの作成と埋め込みのコードの取得は、Googleアカウントがあれば無料でできます。ただし、貼り付ける側のホームページ作成サービスによっては、HTMLを貼り付ける部品が有料のプランでしか使えない場合があります。使っているサービスの料金のプランとヘルプで、HTMLの貼り付けができるかを確かめます。

Q. 埋め込んだフォームがスマートフォンで横にはみ出すのはなぜですか？

コピーしたコードの幅が数字で固定されているためです。パソコンでは収まって見えても、画面の幅が狭いスマートフォンでははみ出します。コードの中の幅の指定を100%に書き換えると、貼り付けた場所の幅に合わせて伸び縮みするようになります。直したら、スマートフォンの縦向きの画面で必ず確かめます。

Q. WordPressにGoogleフォームを埋め込む方法は？

ブロックエディターで「カスタムHTML」のブロックを追加し、その中にGoogleフォームからコピーしたコードを貼り付けます。WordPressの公式ドキュメントでは、新しい段落ブロックに「/html」と入力してEnterキーを押すと、すばやく追加できると説明されています。段落のブロックに貼るとコードが文字として表示されるので注意します。

Q. 埋め込んだフォームに「アクセス権が必要」と表示されるのはなぜですか？

回答できる範囲が組織の中に制限されているか、フォームが公開されていない可能性があります。勤務先や学校のアカウントで作ったフォームは、組織の外の人が回答できない設定になっていることがあります。公開の設定の「一般的なアクセス」を確かめ、ログインしていないブラウザの画面で表示を確かめます。