XServer お友達紹介プログラム!「キャンペーン価格をさらにお安く」

GoogleフォームでWordPressにお問い合わせページを作る方法|プラグインなしで簡単!

GoogleフォームでWordPressにお問い合わせページを作る方法|プラグインなしで簡単!

こんにちは "osaboo"osabooです。"@osaboo_Bot"

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

Question

「お問い合わせ」ページって…プラグイン無しでもできるの?

WordPressにお問い合わせフォームを設置したいけれど、「プラグインの設定が難しそう…」「できるだけサイトを軽く保ちたい」と悩んでいませんか?

そんなときに便利なのが、Googleフォームを使ったお問い合わせフォームの作成です。

無料で使えて、フォーム送信内容は自動でGoogleスプレッドシートに記録されるので、とても便利!

このページでは、プラグインなしでGoogleフォームを使ってお問い合わせページを作る方法を、画像つきでやさしく解説します。

フォームの作成からWordPressへの設置まで、初心者でもすぐにできる内容になっているので、ぜひ参考にしてみてくださいね。

こんな方におすすめ
  • プラグインを使わずに、お問い合わせページを作りたい
  • 無料でフォームを設置したい
  • Googleフォームの使い方がよくわからない
  • フォーム送信内容を自動で記録・管理したい
  • サイトを軽く保ちたいので、プラグインの数を減らしたい
この記事でわかること
  • Googleフォームを使ったお問い合わせフォームの作成方法
  • 作成したフォームのデザインや設定のポイント
  • WordPressにGoogleフォームを埋め込む方法(スマホ対応あり)
  • Googleスプレッドシートとの連携で自動記録する方法
  • よくあるトラブルや注意点の解説

それではご覧ください。

目次 "Contents"

Googleフォームでお問い合わせフォームを作るメリット

WordPressにお問い合わせフォームを設置する方法はいくつかありますが、Googleフォームを使う方法には、初心者にうれしいメリットがたくさんあります。ここでは、主な3つのメリットを紹介します。

プラグイン不要でサイトが軽い

Googleフォームを使えば、お問い合わせフォームのために専用プラグインをインストールする必要がありません。
WordPressサイトにプラグインを増やしすぎると、表示速度が遅くなったり、互換性の問題が発生したりすることも。

Googleフォームなら、外部サービスを使ってフォームを設置できるので、サイト本体に負荷をかけず、スッキリ軽い状態を保てます。

無料で使える

Googleフォームは、Googleアカウントがあれば誰でも無料で利用可能です。
わざわざ有料のフォーム作成ツールやサーバー側の設定を追加する必要もなく、初期費用・維持費ゼロでフォームが作れます。

コストを抑えながら、しっかりしたお問い合わせページを作りたい方にぴったりです。

送信内容を自動でスプレッドシートに保存できる

Googleフォームの最大の魅力のひとつは、回答内容が自動でGoogleスプレッドシートに記録されることです。
これにより、受信メールを一つずつ確認する手間が省けるうえ、問い合わせ内容を一覧で管理できてとても便利です。

例えば、以下のようなことも可能です。

  • 問い合わせの内容をカテゴリ別にフィルターで管理
  • スプレッドシートで必要なデータだけを抽出して集計
  • 定期的なバックアップやチームでの共有も簡単

Googleフォームでお問い合わせフォームを作成する手順

この章では、Googleフォームを使って実際にお問い合わせフォームを作成する手順をご紹介します。

作成に必要なのはGoogleアカウントだけ。インストール不要で、すぐに始められます。

Googleフォームにログイン

『Googleフォーム』にアクセスします。

『ログイン』をクリックします。

2576-1|Googleフォーム|ログイン

Googleアカウントをまだお持ちでない場合は、「アカウントを作成」をクリックして、無料で作成しておきましょう。

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

2576-2a|Googleフォーム|ログイン
  • すでにGoogleアカウントにログインしてWebを閲覧している場合は、この画面はスキップされて自動的にフォーム作成画面が表示されます。

お問い合わせ用の新しいフォームを作成

「新しいフォームを作成」する画面が表示されます。

空白のフォームを選択

左端の『空白のフォーム』をクリックします。

2576-3|Googleフォーム|新しいフォームを作成|空白のフォーム

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

2576-4|Googleフォーム|無題のフォーム

「お問い合わせのフォーム」を作っていきましょう。

フォームのタイトルと「お名前(氏名)」の入力欄を追加・設定

まずは、最初に表示されるデフォルトのフォームから、タイトルと最初の質問項目を編集していきます。

手順は次の通りです。
  • 題名の変更 『無題のフォーム』→『お問い合わせ』(必要であれば説明を入れる)
  • 質問の変更 『無題の質問』→『お名前』(表現はお好みで…)
  • 記述の変更 『ラジオボタン』→『記述式』(でスクロールして選択)
  • 入力の有無 『必須』チェックする(ラジオボタン切り替え)
  • 次項目追加 『+』をクリックして次へ(質問を追加アイコン)

❶〜❺ を処理します。(ここでの手順が基本になります)

2576-5a|Googleフォーム|無題のフォーム
  1. 記述の変更の補足
2576-11|無題のフォーム|ドロップダウンメニュー
  1. 』をクリックすると左のドロップダウンメニューが表示されます。

デフォルトでは、「ラジオボタン」が表示されます。

ここで適した「書式・装飾」に変更することができます。

メールアドレスの入力欄を追加・設定

続いて、メールアドレスの入力欄を追加・設定します。

手順は次の通りです。
  • 質問の変更 『無題の質問』→『メールアドレス』(表現はお好みで…)
  • 記述の変更 『ラジオボタン』→『記述式』(でスクロールして選択)
  • 入力の有無 『必須』チェックする(ボタン移動)
  • 次項目追加 『+』をクリックして次へ(質問を追加アイコン)

❶〜❹ を処理します。

2576-6a|Googleフォーム|無題のフォーム

種類の入力欄を追加・設定

続いて、種類の入力欄を追加・設定します。

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

❶〜❹ を処理します。

2576-7a|Googleフォーム|無題のフォーム

題名の入力欄を追加・設定

続いて、題名の入力欄を追加・設定します。

手順は次の通りです。
  • 質問の変更 『無題の質問』→『題名』(表現はお好みで…)
  • 記述の変更 『ラジオボタン』→『記述式』(でスクロールして選択)
  • 入力の有無 『必須』チェックする(ボタン移動)
  • 次項目追加 『+』をクリックして次へ(質問を追加アイコン)

❶〜❹ を処理します。

2576-8a|Googleフォーム|無題のフォーム

お問い合わせ内容の入力欄を追加・設定

続いて、お問い合わせ内容の入力欄を追加・設定します。

手順は次の通りです。
  • 質問の変更 『無題の質問』→『お問い合わせ内容』(表現はお好みで…)
  • 記述の変更 『ラジオボタン』→『段落』(でスクロールして選択)
  • 入力の有無 『必須』チェックする(ボタン移動)
  • 次項目追加 『+』はクリックせずに完了

❶〜❹ を処理します。

2576-9a|Googleフォーム|無題のフォーム

フォームの基礎入力作業は以上です。

フォーム全体のプレビューをチェック

質問項目が漏れていないか確認しましょう。

『プレビュー』アイコンをクリックします。

2576-12|フォーム全体のプレビューをチェック
yajirusi-sita-80x40

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

2576-10b|Googleフォーム(サンプル)のプレビュー

テーマをカスタマイズ(テキストのスタイルと色変更)

フォームの基本項目をすべて入力し終えたら、「テーマをカスタマイズ」してデザインを整えましょう。

テキストのフォントやメインカラー、背景色などを自由に設定できます。

『テーマをカスタマイズ』アイコンをクリックしてサブメニューを開きます。

2576-13|無題のフォーム|テーマをカスタマイズ

お好みで自由に設定してみて下さい。
メインカラーと背景色の変更程度がおすすめです。「あまり凝らないようにしましょう

公開してWordPressに埋め込むHTMLをコピー

『公開』をクリックします。

2576-14|無題のフォーム|公開

ポップアップメニューが表示されます。

もう一度『公開』をクリックして完了です。

2576-15|無題のフォーム|公開

フォームを公開したあとは、WordPressに貼り付けるためのHTMLコードをコピーします。

  • 『︙』3点リーダーをクリックします。
  • 『HTMLを埋め込む』をクリックします。
2576-16|無題のフォーム|HTMLコードをコピー

ポップアップメニューが表示されます。

高さの調整ができます。(サイトの表示幅に合わせると綺麗になります)

『コピー』をクリックします。

2576-17|無題のフォーム|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>

HTMLのコピーが完了したら、次はWordPressの固定ページに埋め込みましょう。ここからはWordPress側での作業になります。

WordPressブログサイトにGoogleフォームを埋め込む方法

WordPressブログサイトの固定ページにコピーした『HTML』を埋め込んでいきます。

お問い合わせ用の固定ページを新規に追加

お問い合わせ用の固定ページを用意します。

Menu『WordPress管理>ダッシュボード>固定ページ>固定ページを追加』をクリックします。

2513-25a|WordPress管理|ダッシュボード|固定ページ|固定ページを追加

固定ページのエディター画面が表示されます。

固定ページを追加したら、タイトル欄に「お問い合わせ」など、わかりやすいページ名を入力します。

この記事では『お問い合わせ』と入力します。

2513-26|固定ページ|お問い合せ|タイトル

お問い合わせ用の固定ページに、先ほどコピーしたGoogleフォームのHTMLコードを貼り付けます。

ブロック挿入ツールを切り替え『カスタム HTML』ブロックを挿入します。

ブロック挿入ツールの切り替えが、わかりにくい方はクリックしてご覧ください。
2350-23|エディター画面|ブロック挿入ツールを切り替え

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

2576-21a|エディター画面|ブロック挿入|カスタム HTML

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

2576-22|エディター画面|フォームのHTMLコード

お問い合わせ用の固定ページを公開します。

右上の『公開x2』をクリックします。

2576-18b|お問い合わせ用の固定ページを公開

以上でGooglrフォームの埋め込みは完了です。プレビューで確認してみましょう。

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

2576-19|お問い合わせフォーム|プレビュー

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』に追加すると以下の様にスクロールが隠れた表示になります。

2576-20|お問い合わせフォーム|プレビュー

以上で、Googleフォームを使った、お問い合わせフォームの固定ページが完成しました。
実際にお問い合わせフォームにテスト入力して、mailとコメントが届くか確認しましょう。

まとめGoogleフォームでWordPressにお問い合わせページを作る方法|プラグインなしで簡単!

今回は、WordPressにプラグインを使わずにお問い合わせフォームを設置する方法として、Googleフォームの使い方をご紹介しました。

Googleフォームを使えば…

  • 無料で使える
  • プラグイン不要でサイトが軽い
  • 初心者でも簡単に作成できる

といったメリットがあり、シンプルなお問い合わせページにはぴったりです。

ただし、以下のような場合は専用フォームプラグイン(Contact Form 7WPFormsなど)も検討してみてください。

  • デザインを細かく調整したい
  • 自動返信メールや通知機能を使いたい
  • セキュリティやスパム対策を強化したい

まずは、今回の手順を参考にGoogleフォームで一つ作ってみて、必要に応じてステップアップしていきましょう!この記事がお役に立てば嬉しいです。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/

  • URLをコピーしました!
  • URLをコピーしました!
目次 "Contents"