こんにちは "osaboo"です。"@osaboo_Bot"
GoogleフォームでWordPressにお問い合わせページを作る方法|プラグインなしで簡単!

WordPressブログサイトの固定ページにGoogleフォームを埋め込んで『お問い合わせフォーム』を設置する方法をご紹介します。

「お問い合わせ」ページって…プラグイン無しでもできるの?
WordPressにお問い合わせフォームを設置したいけれど、「プラグインの設定が難しそう…」「できるだけサイトを軽く保ちたい」と悩んでいませんか?
そんなときに便利なのが、Googleフォームを使ったお問い合わせフォームの作成です。
無料で使えて、フォーム送信内容は自動でGoogleスプレッドシートに記録されるので、とても便利!
このページでは、プラグインなしでGoogleフォームを使ってお問い合わせページを作る方法を、画像つきでやさしく解説します。
フォームの作成からWordPressへの設置まで、初心者でもすぐにできる内容になっているので、ぜひ参考にしてみてくださいね。
- プラグインを使わずに、お問い合わせページを作りたい
- 無料でフォームを設置したい
- Googleフォームの使い方がよくわからない
- フォーム送信内容を自動で記録・管理したい
- サイトを軽く保ちたいので、プラグインの数を減らしたい
- Googleフォームを使ったお問い合わせフォームの作成方法
- 作成したフォームのデザインや設定のポイント
- WordPressにGoogleフォームを埋め込む方法(スマホ対応あり)
- Googleスプレッドシートとの連携で自動記録する方法
- よくあるトラブルや注意点の解説
それではご覧ください。
Googleフォームでお問い合わせフォームを作るメリット
WordPressにお問い合わせフォームを設置する方法はいくつかありますが、Googleフォームを使う方法には、初心者にうれしいメリットがたくさんあります。ここでは、主な3つのメリットを紹介します。
プラグイン不要でサイトが軽い
Googleフォームを使えば、お問い合わせフォームのために専用プラグインをインストールする必要がありません。
WordPressサイトにプラグインを増やしすぎると、表示速度が遅くなったり、互換性の問題が発生したりすることも。
Googleフォームなら、外部サービスを使ってフォームを設置できるので、サイト本体に負荷をかけず、スッキリ軽い状態を保てます。
無料で使える
Googleフォームは、Googleアカウントがあれば誰でも無料で利用可能です。
わざわざ有料のフォーム作成ツールやサーバー側の設定を追加する必要もなく、初期費用・維持費ゼロでフォームが作れます。
コストを抑えながら、しっかりしたお問い合わせページを作りたい方にぴったりです。
送信内容を自動でスプレッドシートに保存できる
Googleフォームの最大の魅力のひとつは、回答内容が自動でGoogleスプレッドシートに記録されることです。
これにより、受信メールを一つずつ確認する手間が省けるうえ、問い合わせ内容を一覧で管理できてとても便利です。
例えば、以下のようなことも可能です。
- 問い合わせの内容をカテゴリ別にフィルターで管理
- スプレッドシートで必要なデータだけを抽出して集計
- 定期的なバックアップやチームでの共有も簡単
Googleフォームでお問い合わせフォームを作成する手順
この章では、Googleフォームを使って実際にお問い合わせフォームを作成する手順をご紹介します。
作成に必要なのはGoogleアカウントだけ。インストール不要で、すぐに始められます。
Googleフォームにログイン
『Googleフォーム』にアクセスします。
『ログイン』をクリックします。


ログイン情報を入力して『次へ』をクリックします。


- すでにGoogleアカウントにログインしてWebを閲覧している場合は、この画面はスキップされて自動的にフォーム作成画面が表示されます。
お問い合わせ用の新しいフォームを作成
「新しいフォームを作成」する画面が表示されます。
空白のフォームを選択
左端の『空白のフォーム』をクリックします。


『無題のフォーム』が表示されます。


「お問い合わせのフォーム」を作っていきましょう。
フォームのタイトルと「お名前(氏名)」の入力欄を追加・設定
まずは、最初に表示されるデフォルトのフォームから、タイトルと最初の質問項目を編集していきます。
- 題名の変更 『無題のフォーム』→『お問い合わせ』(必要であれば説明を入れる)
- 質問の変更 『無題の質問』→『お名前』(表現はお好みで…)
- 記述の変更 『ラジオボタン』→『記述式』( でスクロールして選択)
- 入力の有無 『必須』チェックする(ラジオボタン切り替え)
- 次項目追加 『+』をクリックして次へ(質問を追加アイコン)
❶〜❺ を処理します。(ここでの手順が基本になります)


- 記述の変更の補足


- 『 』をクリックすると左のドロップダウンメニューが表示されます。
デフォルトでは、「ラジオボタン」が表示されます。
ここで適した「書式・装飾」に変更することができます。
メールアドレスの入力欄を追加・設定
続いて、メールアドレスの入力欄を追加・設定します。
- 質問の変更 『無題の質問』→『メールアドレス』(表現はお好みで…)
- 記述の変更 『ラジオボタン』→『記述式』( でスクロールして選択)
- 入力の有無 『必須』チェックする(ボタン移動)
- 次項目追加 『+』をクリックして次へ(質問を追加アイコン)
❶〜❹ を処理します。


種類の入力欄を追加・設定
続いて、種類の入力欄を追加・設定します。
- 質問の変更 『無題の質問』→『お問い合わせの種類』(表現はお好みで…)
- 記述の変更 『ラジオボタン』→『ラジオボタン』(
- ラジオボタン項目を追記 『選択肢 1… 』→『ご意見・ご相談』『ご要望』『その他』→ 必要項目ボタン部分に追加(表現とボタンの数はお好みで…)
はそのまま)
- 入力の有無 『必須』チェックする(ボタン移動)
- 次項目追加 『+』をクリックして次へ(質問を追加アイコン)
❶〜❹ を処理します。


題名の入力欄を追加・設定
続いて、題名の入力欄を追加・設定します。
- 質問の変更 『無題の質問』→『題名』(表現はお好みで…)
- 記述の変更 『ラジオボタン』→『記述式』( でスクロールして選択)
- 入力の有無 『必須』チェックする(ボタン移動)
- 次項目追加 『+』をクリックして次へ(質問を追加アイコン)
❶〜❹ を処理します。


お問い合わせ内容の入力欄を追加・設定
続いて、お問い合わせ内容の入力欄を追加・設定します。
- 質問の変更 『無題の質問』→『お問い合わせ内容』(表現はお好みで…)
- 記述の変更 『ラジオボタン』→『段落』( でスクロールして選択)
- 入力の有無 『必須』チェックする(ボタン移動)
- 次項目追加 『+』はクリックせずに完了
❶〜❹ を処理します。


フォーム全体のプレビューをチェック
質問項目が漏れていないか確認しましょう。
『プレビュー』アイコンをクリックします。




Googleフォーム(サンプル)のプレビュー


テーマをカスタマイズ(テキストのスタイルと色変更)
フォームの基本項目をすべて入力し終えたら、「テーマをカスタマイズ」してデザインを整えましょう。
テキストのフォントやメインカラー、背景色などを自由に設定できます。
『テーマをカスタマイズ』アイコンをクリックしてサブメニューを開きます。


公開してWordPressに埋め込むHTMLをコピー
『公開』をクリックします。


ポップアップメニューが表示されます。
もう一度『公開』をクリックして完了です。


フォームを公開したあとは、WordPressに貼り付けるためのHTMLコードをコピーします。
- 『︙』3点リーダーをクリックします。
- 『HTMLを埋め込む』をクリックします。


ポップアップメニューが表示されます。
『コピー』をクリックします。


こんな感じのHTMLです。「後で使うので仮保存しておいて下さいね」
<iframe src=”https://docs.google.com/forms/d/e/1FAIpQLSd_g2pHhXnfzzGDhZN-HrfxLvlc-o9kcbLu3R6JS1ao7jYqr7ZA/viewform?embedded=true” width=”640″ height=”1070″ frameborder=”0″ marginheight=”0″ marginwidth=”0″>読み込んでいます…</iframe>
WordPressブログサイトにGoogleフォームを埋め込む方法
WordPressブログサイトの固定ページにコピーした『HTML』を埋め込んでいきます。
お問い合わせ用の固定ページを新規に追加
お問い合わせ用の固定ページを用意します。
Menu『WordPress管理>ダッシュボード>固定ページ>固定ページを追加』をクリックします。


固定ページのエディター画面が表示されます。
固定ページを追加したら、タイトル欄に「お問い合わせ」など、わかりやすいページ名を入力します。
この記事では『お問い合わせ』と入力します。


お問い合わせ用の固定ページに、先ほどコピーしたGoogleフォームのHTMLコードを貼り付けます。
ブロック挿入ツールを切り替え『カスタム HTML』ブロックを挿入します。
ブロック挿入ツールの切り替えが、わかりにくい方はクリックしてご覧ください。


『カスタム HTML』をクリックします。


Googleフォームで作成した「お問い合わせ」フォームのHTMLコードをペースト(赤枠部)します。


お問い合わせ用の固定ページを公開します。
右上の『公開x2』をクリックします。


プレビューで確認すると右側にスクロールバーが表示さる場合があります。


Googleフォームのスクロールバーを隠す!
スクロールバーが出てしまって画面が微妙に上下するのはカッコ悪い(私見)ので隠します。
そのままでも問題ないですが…
スクロールバーの表示をOFFにした形の『HTML』は下記の様になります。
(黄色マーカー赤字部が追加した部分です。)
<iframe src=”https://docs.google.com/forms/d/e/1FAIpQLSd_g2pHhXnfz88zGDhZN-HrfxLvlc-o9kcbLu3R6JS1ao7j33Yqr7ZA/viewform?embedded=true” width=”640″ height=”1070″ frameborder=”0″ marginheight=”0″ marginwidth=”0″ scrolling=”no” frameborder=”no”>読み込んでいます…</iframe>
上のように『HTML』に追加すると以下の様にスクロールが隠れた表示になります。


まとめ!GoogleフォームでWordPressにお問い合わせページを作る方法|プラグインなしで簡単!
今回は、WordPressにプラグインを使わずにお問い合わせフォームを設置する方法として、Googleフォームの使い方をご紹介しました。
Googleフォームを使えば…
- 無料で使える
- プラグイン不要でサイトが軽い
- 初心者でも簡単に作成できる
といったメリットがあり、シンプルなお問い合わせページにはぴったりです。
ただし、以下のような場合は専用フォームプラグイン(Contact Form 7やWPFormsなど)も検討してみてください。
- デザインを細かく調整したい
- 自動返信メールや通知機能を使いたい
- セキュリティやスパム対策を強化したい
まずは、今回の手順を参考にGoogleフォームで一つ作ってみて、必要に応じてステップアップしていきましょう!この記事がお役に立てば嬉しいです。
「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/