GoogleフォームをHTMLに埋め込む手順と、サイトの幅に合わせて表示する方法

GoogleフォームをHTMLに埋め込むと、問い合わせや申し込みのフォームを自分のサイトの中に表示できます。リンクを押して別のページに移る必要が無いので、訪れた人はサイトを離れずに入力を終えられます。埋め込みの手順そのものは、Googleフォームが出してくれるコードをコピーして貼るだけで、数分で終わります。

ただ、貼っただけでは、スマートフォンで横にはみ出す、フォームの下が切れて送信ボタンが見えない、画面の中に2本のスクロールが出る、といった問題がよく起きます。この記事では、GoogleフォームをHTMLに埋め込む手順を、埋め込みコードの取得から順に説明し、サイトの幅やスマートフォンに合わせて表示する方法、WordPressに埋め込む方法、うまく表示されないときの直し方まで扱います。届いた問い合わせの対応を1つの画面で管理したい場合の選択肢として、フォームの道具のHalictにも触れます。

埋め込みとリンク、どちらで案内するか

Googleフォームをサイトで使う方法は、大きく2つあります。フォームのリンクを貼って別のページで開いてもらう方法と、フォームそのものをサイトのページの中に表示する埋め込みです。

比べる点	リンクで案内する	ページに埋め込む
手間	リンクを貼るだけ	コードを貼り、幅と高さを調整する
訪問者の動き	Googleフォームのページに移る	サイトのページの中で入力が終わる
画面の広さ	フォームが画面いっぱいに表示される	ページの中の決まった枠に表示される
サイトとの一体感	別のサイトに移った印象になる	サイトの一部として見える
表示の調整	ほとんど不要	高さや幅の調整が必要

ページの中に問い合わせや申し込みの入口を設けたい、サイトを離れずに入力を終えてほしい、という場合は埋め込みが向いています。一方、質問が多くて長いフォームは、ページの中の枠に収めると縦にスクロールする量が増えるため、リンクで別のページに移ってもらうほうが答えやすいこともあります。フォームの長さと、置くページの役目で選びます。

埋め込んでも、データはGoogleフォームに届く

埋め込みは、Googleフォームのページを自分のサイトの中に窓のように表示する仕組みです。入力された回答は、リンクから答えた場合と同じく、Googleフォームの回答の一覧と、つないだスプレッドシートに届きます。サイトのサーバーに回答が保存されるわけではないので、サイト側でデータベースを用意する必要はありません。

埋め込みコードを取得する手順

埋め込みコードは、Googleフォームの編集画面から取得します。Googleのヘルプでは、ウェブサイトやブログにフォームを埋め込む手順を次のように説明しています。

ウェブサイトやブログ上にフォームを埋め込むには、次の手順に沿って行います。 Google フォームでフォームを開きます。 右上のその他アイコンをクリックします。 [HTML を埋め込む]を選択します。 表示された HTML をコピーするには、[コピー] をクリックします。 ウェブサイトやブログに HTML を貼り付けます。 出典: Google ドキュメント エディタ ヘルプ「フォームを公開して回答者と共有する」

その他のアイコンとは、画面の右上にある縦に3つの点が並んだアイコンのことです。ここから「HTMLを埋め込む」を選ぶと、埋め込み用のコードが表示されます。

先にフォームを公開しておく

いまのGoogleフォームでは、フォームを作っただけでは回答を受け付けられません。Googleのヘルプによると、右上の「公開」をクリックしてフォームを公開する必要があり、公開されていないフォームでは回答を受け付けることはできないと案内されています。埋め込みコードを貼ったのにフォームが表示されない、回答できないという場合は、まず公開の状態を確かめます。

公開するときに「管理」から回答できるユーザーを選べます。会社のGoogle Workspaceのアカウントで作ったフォームは、組織の中の人だけが回答できる設定になっていることがあります。一般の訪問者に答えてもらうサイトのフォームでは、リンクを知っているすべてのユーザーが回答できる設定になっているかを確かめます。

埋め込む前に、フォームの設定を見直す

サイトに埋め込むフォームは、Googleアカウントを持っていない人や、ログインしていない人も答えます。次の設定は、回答者にGoogleアカウントへのログインを求めるため、一般向けの埋め込みフォームでは注意が必要です。

• 回答を1回に制限する：Googleのヘルプによると、フォームに入力するにはGoogleアカウントへのログインが必要になります。
• メールアドレスを収集する（確認済み）：Googleアカウントのメールアドレスを集める設定です。一般向けには、回答者に入力してもらう「回答者からの入力」が向いています。
• ファイルのアップロードの質問：回答者がGoogleアカウントにログインする必要があると案内されています。

ログインを求めるフォームを埋め込むと、ログインしていない訪問者はフォームの中でログインの画面に進むことになり、そこで入力をやめてしまうことがあります。サイトの問い合わせフォームでは、ログインが要らない設定にしておくのが基本です。

埋め込みコードの中身を知っておく

コピーした埋め込みコードは、iframe（アイフレーム）というHTMLの要素で書かれています。iframeとは、ページの中に別のページを窓のように表示するための部品です。コードは、おおむね次のような形をしています（URLの部分は、フォームごとに違います）。

<iframe src="https://docs.google.com/forms/d/e/（フォームごとのID）/viewform?embedded=true" width="640" height="800" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>

この中で、表示の調整にかかわるのは次の3つです。

• src：表示するフォームのURLです。ここは書き換えません。
• width：窓の幅です。数字はピクセル（画面の点の数）を表します。
• height：窓の高さです。フォームの長さに合わせて調整します。

MDN（ウェブの技術の解説を公開しているMozillaの資料）によると、iframeのwidthとheightはCSSピクセル数で幅と高さを示し、指定しない場合の既定値は幅300、高さ150です。埋め込みコードには数字が入っているので、そのまま貼ればコードの数字どおりの大きさで表示されます。サイトの幅に合わせるには、この数字の扱いを後の節で説明するCSSで変えます。

開始タグと終了タグの間にある「読み込んでいます…」の文字は、フォームが表示される前や、iframeを表示できない環境で見える文字です。消しても動きますが、残しておいても問題はありません。

frameborder、marginheight、marginwidthは、窓の枠線と内側の余白を指定する古い書き方の属性です。残しておいても動きますが、枠線や余白はCSSで指定するのがいまの書き方なので、後の節の例のようにCSSでborderを0にしておけば、見た目は同じになります。コードを自分で整理する場合も、srcの値だけは1文字も変えないよう注意します。

HTMLのページに貼る手順

自分で書いたHTMLのページにフォームを埋め込む手順です。

1. 埋め込みたいページのHTMLファイルを、テキストエディタで開きます。
2. フォームを表示したい位置（たとえば「お問い合わせ」の見出しの下）を探します。
3. その位置に、コピーした埋め込みコードを貼り付けます。
4. ファイルを保存し、ブラウザで開いて表示を確かめます。
5. 問題が無ければ、サーバーにファイルをアップロードして公開します。

貼る位置は、HTMLのbody要素の中です。head要素の中に貼っても表示されません。見出しや説明の文を前に書き、その下にフォームを置くと、訪問者は何のフォームかを理解してから入力を始められます。

貼った直後に確かめること

貼ったら、次の4点を必ず確かめます。

• フォームが表示されるか
• フォームの最後の送信ボタンまで、枠の中で見えるか
• スマートフォンの幅で開いたとき、横にはみ出していないか
• 試しに送信して、Googleフォームの回答の一覧に届くか

試しに送った回答は、Googleフォームの回答の画面から削除できます。本番の回答と混ざらないよう、確かめた後に消しておきます。

サイトの幅に合わせて表示する方法

埋め込みコードをそのまま貼ると、フォームはコードに書かれた幅で表示されます。パソコンの画面では問題が無くても、スマートフォンの幅では横にはみ出し、ページ全体が横にスクロールするようになります。これを防ぐには、CSSでiframeの幅を親の要素に合わせます。

幅を100%にして、最大幅を決める

もっとも簡単な方法は、iframeの幅をCSSで「親の要素の幅いっぱい」にし、広くなりすぎないよう最大の幅を決めることです。

<div class="form-embed">
  <iframe src="（コピーしたコードのURL）" width="640" height="1200" frameborder="0" marginheight="0" marginwidth="0" title="お問い合わせフォーム" loading="lazy">読み込んでいます…</iframe>
</div>

<style>
  .form-embed iframe {
    display: block;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    border: 0;
  }
</style>

このCSSでは、iframeの幅を囲みの要素の幅いっぱいにし、最大でも640ピクセルを超えないようにしています。スマートフォンでは画面の幅に合わせて縮み、パソコンでは中央に640ピクセルの幅で表示されます。最大の幅は、サイトの本文の幅に合わせて変えてかまいません。

高さは自動では合わない

幅は親の要素に合わせられますが、高さはそう簡単にはいきません。iframeの中に表示されるフォームの長さは、埋め込んだ側のページからは分からないため、高さは決めた数字のまま固定されます。フォームより枠が短いと、枠の中にスクロールが出て、ページのスクロールと二重になります。枠のほうが長いと、フォームの下に大きな空白ができます。

高さを決めるときは、スマートフォンの幅で表示したときを基準にします。スマートフォンでは1行に入る文字が少なくなり、質問文や選択肢が折り返されるため、同じフォームでもパソコンより縦に長くなります。スマートフォンで最後の送信ボタンまで枠の中に収まる高さを探し、少し余裕を持たせた数字にします。

画面の幅ごとに高さを変える

パソコンとスマートフォンで最適な高さが大きく違う場合は、CSSのメディアクエリで画面の幅ごとに高さを変えます。メディアクエリとは、画面の幅などの条件によって別のCSSを当てる書き方です。

<style>
  .form-embed iframe {
    display: block;
    width: 100%;
    max-width: 640px;
    height: 1100px;
    margin: 0 auto;
    border: 0;
  }
  @media (max-width: 600px) {
    .form-embed iframe {
      height: 1500px;
    }
  }
</style>

この例では、画面の幅が600ピクセル以下のときだけ、高さを大きくしています。数字はフォームの長さによって変わるので、実際に表示しながら調整します。フォームの質問を後から増やしたり減らしたりしたときは、高さも見直します。

セクションで区切ったフォームは、いちばん長いページに合わせる

Googleフォームでセクションを使い、複数のページに分けている場合、iframeの高さはページが切り替わっても変わりません。いちばん長いページに合わせて高さを決めると、短いページでは下に空白ができますが、送信ボタンが切れることはありません。ページごとの長さをなるべくそろえておくと、空白が目立たなくなります。

スマートフォンでの表示を確かめる方法

高さや幅の調整は、実際にスマートフォンの画面で見ないと判断できません。確かめ方は2つあります。

パソコンのブラウザで、画面の幅を変えて見る

多くのブラウザには、ページを作る人のための開発者ツールが入っており、画面の幅をスマートフォンと同じくらいに狭めて表示する機能があります。この機能を使うと、パソコンの上で、幅を変えたときにフォームが縮むか、送信ボタンまで枠に収まるかをすぐに確かめられます。CSSの数字を直しては再読み込みし、ちょうどよい高さを探す作業に向いています。

実際のスマートフォンで開く

開発者ツールでの確かめは便利ですが、文字の大きさや、指で押したときの感覚までは分かりません。最後は、手元のスマートフォンで公開前のページを開き、最初の質問から送信ボタンまで実際に入力してみます。iPhoneとAndroidの両方が手元にあれば、両方で確かめておくと安心です。画面を縦にしたときと横にしたときで見え方が変わることもあるため、両方の向きで表示を確かめます。

WordPressに埋め込む方法

WordPressで作ったサイトにGoogleフォームを埋め込むときは、ブロックエディタのカスタムHTMLブロックを使います。WordPressの日本語のサポートページでは、カスタムHTMLブロックは、ブロックインサーターのアイコンをクリックして追加するか、新しい段落ブロックに「/html」と入力してEnterキーを押すと素早く追加できると説明されています。

1. 埋め込みたいページか投稿を編集画面で開きます。
2. フォームを表示したい位置で、カスタムHTMLブロックを追加します。
3. ブロックの中に、コピーした埋め込みコードを貼り付けます。
4. プレビューで表示を確かめ、問題が無ければ更新または公開します。

幅を画面に合わせるCSSは、同じカスタムHTMLブロックの中に、前の節のstyle要素ごと貼り付けても動きます。サイト全体で同じフォームの見た目をそろえたい場合は、テーマの追加CSSの欄に書く方法もあります。使っているテーマや管理画面の設定によって、CSSを書く場所が違うため、テーマの説明書で確かめてください。

ブロックエディタ以外の作成サービスの場合

ホームページ作成サービスの多くには、HTMLのコードを貼るための部品が用意されています。部品の名前はサービスによって違い、「HTML」「埋め込みコード」「カスタムコード」などと呼ばれています。部品の中に埋め込みコードを貼ると、Googleフォームが表示されます。サービスによっては、部品の枠の高さを管理画面で別に決める必要があるため、送信ボタンまで表示されるかを公開前に確かめます。

埋め込むときに入れておきたい属性

埋め込みコードはそのままでも動きますが、2つの属性を加えておくと、より使いやすいページになります。

title属性で、何のフォームかを伝える

MDNは、読み上げソフトのような支援技術を使う人のために、iframeにtitle属性を付けて内容を説明するよう案内しています。

読み上げソフトのような支援技術を利用して操作している人は、＜iframe＞ 上の title 属性を使用して内容をラベル付けします。 title の値で埋め込みコンテンツを正確に説明してください。 出典: MDN Web Docs「iframe: インラインフレーム要素」

title属性が無いと、読み上げソフトを使う人は、iframeの中に入るまで何が埋め込まれているか分かりません。「お問い合わせフォーム」「セミナー申し込みフォーム」のように、フォームの名前を入れておきます。

loading属性で、ページの表示を軽くする

ページの下のほうにフォームを置く場合は、loading属性に「lazy」を指定すると、訪問者がフォームの近くまでスクロールするまで、iframeの読み込みを遅らせられます。MDNによると、これはページを開いたときの読み込みを軽くするための指定で、既定はページの読み込み時に直ちに読み込む「eager」です。ページの最初の画面にフォームがある場合は、指定しなくてかまいません。

フォームを置くページの組み立て方

埋め込みの技術的な手順と同じくらい大切なのが、フォームをページのどこに、どんな説明と一緒に置くかです。

フォームの前に、3つのことを書く

フォームのすぐ上には、次の3つを短く書いておきます。

1. このフォームで何ができるか（問い合わせ、見積もりの依頼、セミナーの申し込みなど）
2. 送った後にどうなるか（何営業日以内に返信する、確認のメールが届くなど）
3. フォーム以外の連絡方法（電話番号や受付時間など、必要な場合）

これがあると、訪問者は入力を始める前に、自分の用件がこのフォームで足りるかを判断できます。返信までの目安が書かれていないと、送った後に同じ内容を何度も送ってくる人や、電話で確かめてくる人が出ます。

ページの最初の画面に、フォームの入口を見せる

問い合わせのページを開いたのに、長い説明の下までスクロールしないとフォームが見えないと、訪問者は迷います。説明は短くまとめ、フォームの上端がページの最初の画面に見える位置に置くのが目安です。説明が長くなる場合は、ページの冒頭に「フォームはこちら」のようなページ内のリンクを設け、フォームの位置まで移動できるようにします。

1ページに1つのフォーム

問い合わせと資料請求とセミナー申し込みを1ページに並べて埋め込むと、どれに入力すればよいか分からなくなり、ページも重くなります。フォームは用件ごとにページを分け、1ページに1つを基本にします。用件を選んでもらう必要がある場合は、1つのフォームの最初の質問で用件を選んでもらい、Googleフォームの「回答に応じてセクションに移動」で、用件ごとの質問に分ける方法もあります。

個人情報を集めるときにページに書いておくこと

サイトに埋め込んだフォームで名前やメールアドレスを集める場合、その情報を何に使うかを示しておきます。個人情報の保護に関する法律（個人情報保護法）は、本人から入力画面などで直接個人情報を受け取るとき、あらかじめ利用目的を本人に示すよう求めています（第21条第2項）。条文はe-Gov法令検索の個人情報の保護に関する法律で確かめられます。

具体的には、フォームの説明欄か、フォームのすぐ上のページの文に、次のような一文を入れます。

「ご入力いただいた情報は、お問い合わせへの回答とご連絡のためにのみ使用します。詳しくはプライバシーポリシーをご覧ください。」

サイトにプライバシーポリシーのページがある場合は、そのページへのリンクも添えます。Googleフォームの説明欄にもリンクを入れられますが、埋め込んだ窓の中のリンクを押すと窓の中で開いてしまうことがあるため、リンクはフォームの外のページの文に書くほうが確実です。どこまで書く必要があるかは事業の形や扱う情報で変わるため、詳しくは個人情報保護委員会の案内で確かめてください。

公開した後の点検と運用

埋め込んだフォームは、公開した後も放っておかず、定期的に動いているかを確かめます。

新しい回答の通知を受け取る

サイトのフォームから問い合わせが届いても、誰も気づかなければ意味がありません。Googleのヘルプによると、フォームの「回答」の画面のその他のアイコンから「新しい回答についてのメール通知を受け取る」を選ぶと、回答が届くたびにメールで知らせてもらえます。問い合わせのフォームでは、公開と同時にこの通知をオンにしておきます。

質問を直すと、埋め込んだ表示にも反映される

埋め込んだ窓は、Googleフォームのページをそのまま表示しています。そのため、質問の文言を直したり、選択肢を加えたりする作業は、Googleフォームの編集画面で行えば、サイトの側のコードを貼り直さなくても表示に反映されます。ただし、質問を増やしてフォームが長くなった場合は、iframeの高さが足りなくなっていないかを確かめます。

月に1回は試しの送信をする

サイトの改修やテーマの更新で、埋め込んだ部分が崩れることがあります。月に1回程度、スマートフォンとパソコンの両方から試しに送信し、回答が届くか、送信後の画面が正しく出るかを確かめておくと、気づかないうちに問い合わせが止まっていた、という事態を防げます。

うまく表示されないときの直し方

埋め込みでよく起きるトラブルと、確かめる場所をまとめます。

フォームが表示されない、エラーの画面になる

• フォームが公開されているかを確かめます。公開されていないフォームでは回答を受け付けられません。
• 回答できるユーザーが組織の中に限られていないかを確かめます。
• 貼ったコードが途中で切れていないか、引用符が全角になっていないかを確かめます。メールやチャットを経由してコードを受け取ると、記号が書き換わることがあります。

スクロールが二重になる、送信ボタンが見えない

iframeの高さがフォームの長さより短いと起きます。高さの数字を大きくし、スマートフォンの幅でも送信ボタンまで表示されるかを確かめます。

横にはみ出す

iframeの幅がコードの数字のまま固定されていると起きます。前の節のCSSで幅を100%にし、最大の幅を決めます。

送信後の画面が窓の中で表示される

送信が終わると、確認メッセージは埋め込んだ窓の中に表示されます。窓の高さがフォームに合わせて大きいと、確認メッセージが窓の上のほうに表示され、下が空白になります。確認メッセージに「このページの上部に戻って、引き続きサイトをご覧ください」のような案内を書いておくと、訪問者が迷いません。確認メッセージは、Googleフォームの「設定」の「プレゼンテーション」から編集できます。

見た目がサイトと合わない

埋め込んだフォームの見た目は、Googleフォームのテーマの設定に従います。Googleフォームでは「テーマをカスタマイズ」から、テーマの色、背景色、ヘッダー画像、フォントを変えられます。サイトの色に近いテーマの色を選び、ヘッダー画像を外すかサイトに合った画像にすると、ページになじみやすくなります。ただし、ボタンの形や入力欄の細かい見た目までサイトの側のCSSで変えることはできません。iframeの中はGoogleのページなので、サイトのCSSは届かない仕組みです。

自分で作ったHTMLの入力欄からGoogleフォームに送る方法の注意

検索すると、自分でHTMLの入力欄を作り、送信先をGoogleフォームにする方法を紹介する記事が見つかります。見た目を完全にサイトに合わせられる方法として知られていますが、これはGoogleが公式に案内している埋め込みの方法ではありません。Googleフォームの側の仕組みが変わると、ある日突然、回答が届かなくなることがあります。

問い合わせや申し込みのように、届かないと困るフォームでこの方法を使う場合は、定期的に試しの送信をして、回答が届き続けているかを確かめる手間がかかります。見た目を細かく作り込みたいなら、埋め込みのコードを使う方法の範囲で整えるか、デザインを自由に決められる別のフォームの道具を選ぶほうが、長い目で見て手間は少なくなります。

届いた問い合わせの管理まで考える

サイトにフォームを埋め込むと、問い合わせや申し込みが届き始めます。Googleフォームの回答はスプレッドシートに1行ずつ並び、新しい回答のメール通知も受け取れます。数が少ないうちはこれで十分ですが、担当を決めて返信し、対応が済んだかを記録する必要が出てくると、スプレッドシートに列を手で作り、メールソフトで返信する作業が重なっていきます。

こうした場面の選択肢の1つが、フォームの道具のHalictです。公式サイトによると、Halictはフォームで届いた1件ごとに担当者と状況（未対応、対応中、返信済み、完了など）を割り当てて管理でき、回答者への返信も同じ画面から送れます。送ったメールの開封とクリックが記録され、新しい回答をSlack、Teams、Discord、Chatworkに通知する設定や、Googleスプレッドシートに1行ずつ追記する連携も用意されています。フォームは公開リンクを配る形で使い始められ、回答者はログインせずに答えられると案内されています。

料金は使うメンバーの人数で決まり、1人で使うフリープランは0円で、フォームの数と回答の数はどのプランでも無制限です。Googleフォームで書き出したCSVを取り込んで移行することもできます。

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

問い合わせを受けて終わり、という使い方なら、Googleフォームの埋め込みで十分です。返信と対応の記録まで含めて回すようになったときに、道具の見直しを考えます。

フォームの埋め込みを仕事にする視点

Googleフォームの埋め込みは、手順だけ見れば数分の作業です。それでも、サイトの幅に合わせる、スマートフォンで送信ボタンまで表示させる、届いた回答の流れを整える、といった仕上げまで含めると、小さな会社や店舗では外部に頼むことも多い作業です。

在宅ワークとフリーランスの仲介を2004年から続けてきた運営者として見てきた限りでは、ホームページの小さな改修を任される人が繰り返し声をかけられるのは、コードを貼るだけでなく、スマートフォンでの見え方と、届いた後の流れまで確かめて納品する人です。依頼主が気づいていない「送信ボタンが切れている」を先に直せることが、次の依頼につながります。

HTMLとCSSでページを組む仕事は、LP制作・HTML/CSSコーディングのお仕事で詳しく紹介しています。フォームを含むページの見た目まで手がけるなら、報酬の目安はデザイナーの年収・単価相場で確かめられます。問い合わせのフォームを集客の入口として設計し、広告やSNSからの流れを整える仕事は、AI・マーケティング・セキュリティのお仕事が参考になります。

店舗のサイトに予約や問い合わせの窓口を設ける改修は、補助金の対象になることもあります。美容室・サロン向け補助金2026年版｜設備投資・内装リフォームに使える制度では、サロンが使える制度を整理しています。

GoogleフォームをHTMLに埋め込むときに押さえることは3つです。先にフォームを公開し、ログインを求める設定を外しておくこと。埋め込みコードを貼ったら、CSSで幅を100%にし、スマートフォンで送信ボタンまで表示される高さに調整すること。title属性で何のフォームかを伝え、試しの送信で回答が届くことを確かめてから公開すること。この順に進めれば、埋め込んだフォームがサイトの一部として自然に働きます。

よくある質問

Q. GoogleフォームのHTML埋め込みコードはどこで取得できますか？

フォームの編集画面の右上にある、縦に3つの点が並んだその他のアイコンをクリックし、「HTMLを埋め込む」を選ぶと表示されます。「コピー」を押して、サイトのHTMLに貼り付けます。先にフォームを公開しておかないと回答を受け付けられないので、右上の「公開」で公開の状態を確かめてから貼ります。

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

埋め込みコードのiframeに書かれた幅の数字のまま表示されているためです。CSSでiframeの幅を100%にし、最大の幅（たとえば640ピクセル）を決めると、スマートフォンでは画面の幅に合わせて縮みます。高さは自動では合わないので、スマートフォンで送信ボタンまで表示される数字に調整します。

Q. 埋め込んだフォームの中にスクロールが出てしまいます。直せますか？

iframeの高さがフォームの長さより短いと、枠の中にスクロールが出ます。高さの数字を大きくすれば直ります。スマートフォンでは文字の折り返しで縦に長くなるため、画面の幅ごとに高さを変えるCSSを書くと、パソコンでの空白も抑えられます。質問を増やしたときは高さも見直します。

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

ブロックエディタでカスタムHTMLブロックを追加し、その中に埋め込みコードを貼り付けます。カスタムHTMLブロックは、ブロックインサーターから追加するか、新しい段落に「/html」と入力してEnterキーを押すと追加できます。プレビューでスマートフォンの表示と送信ボタンまで見えるかを確かめてから公開します。