WixにGoogleフォームを埋め込む方法｜HTMLコードの貼り付けと表示調整
Wixで作ったサイトに、申込フォームやアンケートを置きたいとき、すでに使い慣れたGoogleフォームをそのまま活用できると準備が進めやすくなります。ただ、「リンクを貼るだけでよいのか」「スマートフォンで見切れないか」「Wixフォームのほうが管理しやすいのか」と迷うこともあります。
Googleフォームは、公開後に取得できるHTMLコードをWixの埋め込み要素へ貼り付けるとページ内に表示できます。ただし自動ではレスポンシブにならないため、パソコンとスマートフォンで幅・高さを調整します。
この記事では、2026年10月24日時点の公式情報をもとに、設置手順、表示調整、Wixフォームとの使い分けを整理します。
GoogleフォームをWixに埋め込む流れ
作業は、Googleフォーム側で公開・共有設定を確認し、埋め込みコードを取得してから、Wixへ貼り付ける順番です。Googleの公式ヘルプでは、回答者がアクセスできるようにフォームを公開したうえで、ウェブサイトやブログへ埋め込めると案内されています。
作業する場所 | 主な操作 | 確認したい点 |
|---|---|---|
Googleフォーム | 設定を確認してフォームを公開 | 回答できる人、メール収集、回答回数、受付期間 |
Googleフォーム | 埋め込み用HTMLを取得 | 幅と高さ、フォームの内容、送信後の表示 |
Wixエディタ | HTML埋め込み要素へコードを貼る | 要素の横幅・高さ、ページ内の設置位置 |
公開サイト | テスト回答を送る | PC・スマホ表示、通知、回答保存、完了案内 |
「回答を1回に制限する」を有効にすると、回答者はGoogleアカウントへのログインが必要です。一般向けの窓口では、公開範囲やメールアドレスの収集方法も確認します。
Googleフォームで埋め込みコードを取得する
Googleフォームを開き、まず質問項目と「設定」を確認します。現在のGoogleフォームでは、回答者に共有する前にフォームを公開する必要があります。公開後、共有画面の埋め込みアイコン「<>」を選び、表示する幅と高さを指定してHTMLコードをコピーします。
埋め込みコードは、`<iframe ...>`から始まり、GoogleフォームのURLと初期の幅・高さが含まれています。質問数が多い場合は高さを大きめにすると、フォーム内のスクロールを短くできます。
公開前には、回答受付の対象、メールアドレスの収集、回答の編集可否、回答者へ回答のコピーを送るかも確認します。ファイルアップロードの質問を使う場合、回答者はGoogleアカウントへのログインが必要になるため、一般向けの問い合わせフォームでは特に案内が必要です。
WixへHTMLコードを貼り付ける
Wixエディタでフォームを置きたいページを開き、「要素を追加」から埋め込みコードの要素を追加します。ページ上の埋め込み要素を選択し、「コードを入力」へGoogleフォームのHTMLコードを貼り、「適用」で保存します。
GoogleフォームのコードはHTTPSを使うため、Wixが案内する「HTTPSコードとURLのみ表示」という条件に合います。貼り付けた直後に空白へ見えても、要素の高さが小さすぎる場合があります。まず埋め込み要素自体を縦に広げ、プレビューでフォームの上部が表示されるか確認すると原因を切り分けやすくなります。
フォームの直前に、対象者、所要時間、受付内容、返信の目安を短く添えると、利用者が入力するか判断しやすくなります。
PCとスマートフォンで幅・高さを調整する
Wix公式ヘルプでは、HTMLとURLの埋め込みはiFrameであり、元のサイトがレスポンシブでも、埋め込みは自動ではレスポンシブにならないと案内されています。ここが表示調整で迷いやすい点です。
Googleフォーム側のコードにある幅を`100%`へ変更すると、埋め込み枠の中では横幅に合わせやすくなります。ただし、Wix上の埋め込み要素そのものの大きさは別に調整します。パソコン版では本文幅に合わせ、モバイル版では左右にはみ出していないかを確認してください。
高さは質問数や説明文の長さで変わります。短すぎるとフォーム内のスクロールが増え、長すぎると下に大きな空白が残ります。質問を追加・削除したときも公開ページで見直します。
症状 | 考えられる原因 | 見直し方 |
|---|---|---|
右側が切れる | コードの固定幅が埋め込み枠より大きい | コードの幅を100%にし、Wix側の要素幅も調整 |
下部が見えにくい | Wix側の要素高が不足 | 送信ボタンと完了画面まで見える高さへ変更 |
大きな空白が残る | 要素高がフォームより大きい | PC・スマホを別々に見て高さを縮める |
何も表示されない | コードの貼り付けミス、公開設定、HTTPS以外 | 最新コードを再取得し、設定とプレビューを確認 |
送信後の案内まで確認する
表示できたらテスト回答を1件送り、必須項目のエラー、送信後のメッセージ、回答の保存先まで確認します。
Googleの公式案内によると、Googleフォームの回答はフォーム画面で確認でき、Googleスプレッドシートへリンクして保存することもできます。新しい回答のメール通知も設定できます。ただし、Googleフォーム内の完了画面からWixページの別セクションへ自動で移動する設計には向かないため、送信後メッセージに次の行動を具体的に書く方法が現実的です。たとえば「2営業日以内にメールでご連絡します」「お急ぎの場合は電話をご利用ください」のように伝えます。
広告から訪問を集めている場合は、フォーム送信を計測できるかも別に確認します。埋め込みフォームはGoogle側のiFrame内で動くため、Wixページ上の通常ボタンと同じ感覚で送信イベントを取得できるとは限りません。広告計測が重要なら、計測方法を決めてからフォームを選ぶと手戻りを減らせます。
GoogleフォームとWixフォームの使い分け
Googleフォームは、社内でGoogle Workspaceやスプレッドシートを使い、回答を共有・集計したい場合に扱いやすい選択肢です。アンケート、参加確認、簡易な申込受付にも向いています。
一方、Wixフォームの公式案内では、サイトのデザインに合わせてフォームを配置でき、回答をWixの「フォーム・回答内容」で管理できると説明されています。連絡先項目へ入力された情報はWixの連絡先にも保存され、フォーム送信通知やWixオートメーションを使った案内へつなげられます。
重視すること | Googleフォームが合いやすい | Wixフォームが合いやすい |
|---|---|---|
回答の共有先 | Googleスプレッドシートで集計したい | Wix管理画面で問い合わせをまとめたい |
見た目 | Googleフォームの形式で問題ない | サイトのデザインに合わせたい |
その後の運用 | Google側で通知・集計したい | Wix連絡先・Inbox・自動メールへつなげたい |
計測・導線 | 簡易受付やアンケートが中心 | サイト内の申込導線を細かく整えたい |
どちらが優れているというより、回答を誰がどこで確認し、送信後に何をするかで選ぶと分かりやすくなります。少人数でGoogleスプレッドシートを日常的に使う会社ならGoogleフォーム、Wix内で問い合わせ対応や顧客管理までまとめたい会社ならWixフォームが候補になります。
公開前に確認したい項目
フォームが公開され、想定する利用者が回答できるか
Googleアカウントへのログインが必要な設定になっていないか
個人情報の利用目的と問い合わせ先を案内しているか
パソコンとスマートフォンで横切れや大きな空白がないか
必須項目、送信、回答保存、担当者への通知が動くか
送信後の返信時期や次の行動が分かるか
広告やアクセス解析で必要な計測方法を用意できるか
Googleフォームの埋め込みは、既存のフォームを活かしながらWixサイト内に受付窓口を作れる方法です。まずは回答者の条件と保存先を決め、1件のテスト送信を最後まで行うと、公開後の問い合わせ対応も始めやすくなります。
※本記事は2026年10月24日時点の公式情報をもとにした一般的な解説です。サービスの画面、仕様、利用条件は変更される場合があります。個人情報を扱う場合は、最新の利用規約・プライバシーポリシーを確認し、必要に応じて専門家へご相談ください。
