WordPressにGoogleフォームをレスポンシブ対応で埋め込む方法【初心者でも簡単】
山崎講師こんにちは。ゆうせいです。
今回は、WordPressにGoogleフォームを埋め込む方法について、初心者の方でも迷わずできるよう、丁寧に解説していきます。
特にスマートフォンやタブレットなど、どんな端末でも見やすく表示されるようにする方法（レスポンシブ対応）にも注目します。
なぜGoogleフォームをWordPressに埋め込むのか？
Googleフォームは、無料で使えて、アンケートやお問い合わせフォームが簡単に作成できる便利なツールです。
WordPressと組み合わせることで、以下のようなメリットがあります。
| メリット | 内容 |
|---|---|
| 無料で使える | Googleアカウントがあればすぐ使えます |
| デザインがシンプル | すっきりした見た目で、回答もスムーズ |
| 回答結果が自動でスプレッドシートに保存される | データ管理が簡単 |
| スマホ対応も可能 | HTMLを少し編集するだけで対応可 |
ステップ1：Googleフォームを作成しよう
まずはGoogleフォームを用意します。
- Googleフォーム にアクセス
- テンプレートを選ぶ or 空白フォームを作成
- 質問を入力して、必要に応じて画像や説明も追加
完成したら、いよいよ埋め込みコードを取得します！
ステップ2：埋め込み用のHTMLコードを取得
- 画面右上の「送信」ボタンをクリック
- 送信方法の中から「< >」アイコン（HTML）を選ぶ
- 表示されるコードをコピー (例:)
<iframe src="https://docs.google.com/forms/d/e/xxxxxxxx/viewform?embedded=true" width="640" height="800" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>ここまではGoogleフォーム側の準備です。次に、WordPress側の設定に進みましょう！
ステップ3：WordPressに埋め込む方法
埋め込み方法（クラシックエディター・ブロックエディター両対応）
クラシックエディターの場合：
- 投稿または固定ページを編集
- 「テキスト」モードに切り替え
- コピーしたHTMLコードを貼り付け
ブロックエディター（Gutenberg）の場合：
- 投稿または固定ページを編集
- 「カスタムHTML」ブロックを追加
- コピーしたHTMLコードを貼り付け
これで一応フォームは表示されますが、実はこのままだとパソコンでは問題なくても、スマホで見ると横が切れてしまうことがあります。
ステップ4：レスポンシブ対応にする
フォームがスマートフォンでも綺麗に見えるように、HTMLコードの一部を少しだけ編集します。
編集するポイント
デフォルトでは以下のようになっています：
<iframe src="..." width="640" height="800" ...></iframe>
この中の width="640" を、次のように書き換えましょう。
<iframe src="..." style="width:100%;" height="800" ...></iframe>
補足：なぜこうするの？
「width」は横幅のことですが、「640px」とピクセル指定してあると、スマホの画面よりも広くなってしまい、はみ出すことがあります。
そこで、「100%」にすると、「表示される画面の幅に応じて自動的にサイズが変わる」ようになります。
これをレスポンシブデザイン（responsive design）と言います。
ちょうど水の入った風船のように、器の大きさ（画面サイズ）に合わせて中身の形が変わるようなイメージですね！
よくある質問（FAQ）
Q. フォームが途中で切れて表示されないのですが？
height（高さ）の値が小さい可能性があります。
フォームが長くなった場合、height="800" の数値を 1000 や 1200 に変えると改善されます。
Q. セキュリティ上の問題はないですか？
GoogleフォームはGoogleが提供している公式サービスなので、基本的に安全です。
ただし、スパム対策のために「reCAPTCHA」などを併用するのもおすすめです。
まとめ
WordPressにGoogleフォームを埋め込む手順を振り返ってみましょう。
- Googleフォームを作成
- 埋め込み用コードをコピー
- WordPressでHTMLとして貼り付け
width="640"をstyle="width:100%;"に書き換えてスマホ対応！
これだけで、パソコンでもスマホでもきれいに表示できるフォームが完成します。
今後の学習のヒント
もし今回の内容が理解できたら、次のステップとして以下のことにチャレンジしてみてください！
- Googleフォームで条件分岐を使ってみる（質問の内容によって表示を変える）
- フォームの回答をGoogleスプレッドシートで自動集計する方法を学ぶ
- WordPressでお問い合わせ管理プラグイン（Contact Form 7やWPFormsなど）との比較をしてみる
少しずつスキルアップして、より見やすく、使いやすいサイト作りに役立ててくださいね！
セイ・コンサルティング・グループでは新人エンジニア研修のアシスタント講師を募集しています。
投稿者プロフィール
- 代表取締役
-
セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。
