GoogleフォームをWordPressに埋め込む方法｜スマホ表示と表示されないときの確認

Googleフォームは、WordPressのページ内に埋め込んで、申込みや問い合わせを受け付けられます。使うのは、Googleフォームが発行する埋め込み用のHTMLと、WordPressのカスタムHTMLブロックです。

この記事では、作成済みのフォームを埋め込む手順から、スマホでの幅・高さの調整、表示されないときの確認まで説明します。すでに貼り付けている方は、後半の「表示されないときの確認」から読み進めてください。

操作名と画像は、2026年10月15日の画面と公式ヘルプで確認しています。レンタルサーバーに設置したWordPress 7.1.3・SWELL 2.19.0のブロックエディターを例にしています。バージョンによって、HTML入力欄の開き方が異なります。

WordPress.comを利用している場合は、プランによって埋め込みの利用条件が異なります。WordPress.com公式の埋め込み案内（英語）（外部サイト）で、自分のプランが対象か確認してください。

埋め込み前に確認すること

まず、フォームを作成した側の編集画面と、埋め込み先のWordPressの編集画面を用意します。固定ページにも投稿にも設置できます。お問い合わせのように常設する場合は固定ページ、記事に関連するアンケートなら投稿、と用途で選びましょう。

Googleフォームは、公開状態・回答できる人・回答受付を確認します。WordPressに貼り付けても、フォーム側のアクセス制限や受付停止は解除されません。一般向けの受付なら想定する回答者が開ける範囲にし、社内向けなら必要な制限を保ちます。

まだ質問や公開設定が整っていない場合は、Googleフォームの作り方で、回答用リンクを開けるところまで準備してください。作成者の編集画面のURLを、回答者への案内に使わないようにしましょう。

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

現在のGoogle公式ヘルプでは、編集画面の右上の︙から「HTMLを埋め込む」を選ぶ手順が案内されています。︙は、点が縦に3つ並ぶ「その他」のボタンです。

メニューの場所や公開・共有の考え方は、Google公式の「フォームを公開して回答者と共有する」（外部サイト）でも確認できます。

WordPressにGoogleフォームを埋め込む

ここからは、WordPressのブロックエディターで操作します。貼り付け先は「カスタムHTML」ブロックです。HTMLを読者に見せる「コード」ブロックとは役割が異なります。

カスタムHTMLの操作と、保存時の権限制限については、WordPress公式「Custom HTML」（英語）（外部サイト）も参照できます。

スマホで幅と高さを調整する

フォームが右にはみ出す場合は幅、下の質問や送信ボタンまで移動しづらい場合は高さを見直します。幅を狭くすると質問文が折り返され、縦に長くなることもあります。

幅を本文の範囲に合わせる

カスタムHTMLを開き、横幅を指定している width="700" の部分だけを、style="width:100%;max-width:100%;border:0;" に置き換えます。元の数字が700以外でも、変更する場所は同じです。

次は変更箇所を示す説明用の例です。「取得したフォームのURL」は実際のURLではありません。例全体を貼り付けず、自分がコピーしたコードの幅の指定だけを変更してください。

変更前：幅が700ピクセルで固定されています。

<iframe
  src="取得したフォームのURL"
  width="700" height="520"
  frameborder="0" marginheight="0" marginwidth="0">
読み込んでいます…
</iframe>

変更後：フォームを置いた本文の幅に合わせます。この段階では、高さの520はそのままです。

<iframe
  src="取得したフォームのURL"
  style="width:100%;max-width:100%;border:0;"
  height="520"
  frameborder="0" marginheight="0" marginwidth="0">
読み込んでいます…
</iframe>

iframe は、別のページを本文の中に表示するための枠です。src="…" は、その枠に表示するGoogleフォームのURLを指定しています。srcのURLは、コピーした内容をそのまま残します。幅を変えるときは、height の指定や末尾の </iframe> も残してください。

すでに style="…" がある場合は、styleを2つ作らず、既存のstyleの中で幅の指定を調整してください。変更後は保存し、狭い画面で横にはみ出さないかを確認します。

100%の基準は画面全体ではなく、フォームを置いた領域です。左右に内容を並べる2列のレイアウトで窮屈な場合は、フォームを1列の広い領域へ移すことも検討しましょう。

高さを送信ボタンまで確認して調整する

次に height="…" の数字を確認します。たとえば高さ1200ピクセルから試す場合は、次の指定にします。1200は高さ調整の出発点で、どのフォームにも合う固定値ではありません。

height="1200"

ページを開き直し、最後の質問と送信ボタンまで確認します。枠内のスクロールが長く操作しづらいなら数字を増やし、不要な空白が大きければ減らします。質問の追加や分岐があるフォームでは、各経路の最後も確かめてください。

今回の検証用フォームでは、高さを1200にしても、PC・スマホ幅ともに枠内のスクロールが残りました。枠内を下へスクロールし、最後の質問への入力と送信ボタンの操作、送信完了まで確認しています。必要な高さは質問数や画面幅によって変わるため、この数字を設定した後も実際の表示を確かめましょう。

幅を100%にしても、高さが内容に合わせて自動調整されるわけではありません。height:auto だけでGoogleフォームの全体が収まると考えず、実際のページを見て調整しましょう。iframeの幅・高さの意味は、MDNのiframe解説（外部サイト）で確認できます。

表示されないときの確認

最初に、同じフォームの回答用リンクを別のタブで開くと、確認先を絞れます。一般向けならGoogleにログインしていない状態、社内限定なら許可したアカウントなど、実際の回答者に近い条件で確認します。

見えている状態	最初に確認すること
回答用リンクでも開けない	フォームの公開状態と回答者のアクセス権
「受付終了」などの案内が出る	フォーム側の回答受付の状態
HTMLが文字のまま表示される	貼り付け先がカスタムHTMLブロックか
保存するとコードが消える	iframeが保存されているか、編集者の権限
リンクでは開けるがページ内は空白	コードの欠けと、サイト側の埋め込み制限

フォーム側の公開・アクセス・受付を確認する

回答用リンクでも開けない場合は、WordPressの幅や高さを変える前にフォーム側を確認します。未公開、回答者の範囲が意図より狭い、別のGoogleアカウントで開いている、といった状態がないかを見直しましょう。

「受付終了」と表示されるなら、フォーム自体は読み込まれています。受付を続ける予定の場合だけ、編集画面右上の「公開」または「公開済み」を開き、「回答を受付中」の状態を確認します。期限や回答数の上限も設定している場合は、その条件を見直してください。

ボタン名の補足：今回の画面では、公開後も右上に「公開」と表示されました。このボタンを開くと「公開済みのオプション」が表示され、回答受付の状態を確認できました。仕様はGoogle公式の「フォームの回答を表示、管理する」（外部サイト）に掲載されています。

ログイン画面が出る場合も、埋め込みコードの不具合とは限りません。一般向けでログイン不要にしたい場合は、Googleフォームをログイン不要で回答できるようにする方法を参照してください。必要なアクセス制限を、表示確認のためだけに外さないようにします。

保存後のHTMLと埋め込み制限を確認する

回答用リンクで開ける場合は、WordPressを保存した後、もう一度カスタムHTMLを開きます。<iframe から </iframe> まで残っているか、引用符が欠けていないか、編集画面のURLに差し替えていないかを確認します。迷ったら、Googleフォームから新しくコードをコピーし直しましょう。

HTMLが文章として出る場合は、段落やコードブロックへ貼り付けていないかを確認します。保存後にiframeが消える場合は、WordPressの権限や利用サービスの制限が関係することがあります。サイト管理者へ、iframeを保存できる設定かを確認してください。

コードが残っているのにページ内だけ空白になる場合は、別のブラウザーでも確認します。サイトのセキュリティ設定、外部コンテンツの読み込み制限、キャッシュや埋め込みの遅延読み込みを導入している場合は、管理者へ対象ページと症状を伝えて確認します。複数の機能をまとめて無効にせず、原因を1つずつ確かめましょう。

解決まで回答の入口を用意する場合は、フォーム編集画面右上の「回答者へのリンクをコピー」から取得したリンクを、WordPressの段落やボタンに設定します。同じ操作は「公開済みのオプション」内にもあります。「フォームが表示されない場合はこちらから開いてください」のように、移動先が分かる案内を添えてください。

公開前に入力から回答の記録まで確認する

設置後は、ページ内で入力・送信でき、Googleフォーム側に回答が記録されるところまで確認します。自分が管理するフォームへ、テストだと分かる内容を1件送ります。通知や自動返信などが動く場合は、関係する担当者への影響も先に確認してください。

• PCとスマホで、質問・選択肢・入力欄が横にはみ出していない
• 最後の質問と送信ボタンへ移動でき、入力中のエラーも読める
• 送信後に完了メッセージが表示される
• 編集画面の「回答」→「個別」で、送ったテスト内容を確認できる

Googleフォームの編集画面で「回答」を開き、「個別」を選びます。複数の回答がある場合は、回答番号や左右の矢印で、送ったテスト回答を表示してください。

送ったメールアドレスや氏名などが一致していれば、Googleフォーム側への記録を確認できています。次の画像は、検証用の架空回答です。

WordPressのモバイルプレビューは、狭い幅での配置確認に使えます。ただし、実際のスマホでの文字入力やスクロールの確認とは別です。確認を終えてからページを公開し、公開URLでもフォームと回答用リンクの両方を確かめましょう。

よくある質問

埋め込み用のプラグインは必要ですか？

iframeを保存できる環境なら、GoogleフォームのHTMLとWordPress標準のカスタムHTMLブロックで設置できます。この記事の方法に、専用の埋め込みプラグインは必要ありません。

フォームの文字色や入力欄をWordPressのCSSで変えられますか？

この方法で調整するのは主に埋め込み枠の幅や高さです。フォーム内の色や書体はGoogleフォーム側のテーマ設定で調整します。WordPress側のCSSを追加しても、別のページとして読み込まれるフォーム内部へそのまま適用されるわけではありません。

回答はWordPressのどこに保存されますか？

この方法ではGoogleフォームへ回答が送られます。確認先はフォーム編集画面の「回答」です。WordPressのコメントやお問い合わせ管理画面を探す必要はありません。

埋め込みをやめると回答も消えますか？

WordPressから埋め込みブロックを外す操作と、Googleフォームの回答を削除する操作は別です。ページ内の表示をやめたいだけなら、対象のカスタムHTMLブロックを取り除きます。フォーム自体を締め切る場合は、フォーム側の回答受付も確認してください。

まとめ

GoogleフォームをWordPressへ埋め込むときは、フォームの公開・回答者の範囲・受付状態を確認し、「HTMLを埋め込む」で取得したコードをカスタムHTMLブロックへ貼り付けます。保存後は、ページのプレビューで確認しましょう。

スマホでは幅と高さを分けて調整し、最後の送信まで確認します。表示されないときは、回答用リンクでも開けないのか、WordPress内だけで起きるのかを切り分けると、次に見る場所を選びやすくなります。

目的別に次の記事を選ぶ

埋め込みの準備や、その後の回答管理は、目的に合う記事で確認できます。

フォーム自体の作成や公開設定から確認したい方は、質問の追加から回答確認までの基本手順を参照してください。

届いた申込みを表で管理したい方は、Googleスプレッドシートとの連携と保存先の設定を確認してください。