HOME BLOG WordPress(ワードプレス) WordPressにGoogleフォームを入れる方法

WordPressにGoogleフォームを入れる方法

ビジネス系のWebサイトには、お客さまからお問い合わせを受け付けたり、メッセージを返信したりする「お問い合わせフォーム」が不可欠です。
Googleが無償で提供している「Googleフォーム」を活用すれば、オリジナルのお問い合わせフォームを簡単に実装することができます。

今回は、WordPressで制作したwebサイトに「Googleフォーム」を入れる方法をスクリーンショットを交えながら、わかりやすく解説して参ります。

※「Googleフォーム」の特徴については、以下の記事で詳しく解説していますのでぜひご覧ください。

手順1.フォームを作成する

どんな質問項目を設定するかが重要ですので、Googleフォームを開いて実際に設定入力する前に、手書きでもエクセルでもいいので構成を考えてから作業に入ることをお勧めします。
ここでは例として

  • お名前
  • メールアドレス
  • お問い合わせの種別
  • お問い合わせの内容

にしていきます。実制作の際はご自分の状況に合わせて設定してください。

質問の構成ができたら、Googleフォーム作成ページにログインして実際の作成に入ります。

新しいフォームを作成

ログインするにはGoogleのアカウントが必要です。
「新しいフォームを作成」の左端、「空白」を選択してください。

「無題のフォーム」が開きます

すると、「無題のフォーム」が開きます。ここでどんなフォームにしていくか、具体的に作っていきます。デフォルトの「無題のフォーム」の部分は、あなたが装備するフォームのタイトルになりますので、「お問い合わせフォーム」や「お問い合わせはこちら」など任意に書き換えてください。

フォームの中身を順番に設定していきます

デフォルトで最初に表示されている「無題の質問」の内容から作りこみます。
大抵は「お名前」を最初に記入していただきます。
「ラジオボタン」になっている箇所をプルダウンすると、いろいろ項目オプションが選べます。「お名前」はユーザーさんに入力していただくものですので、「記述式」を選択します。

「質問を追加」でカラムを追加

「お名前」のカラム(整然と順に並ぶコマ)ができました。
右に表示された「質問を追加」で次のカラムを作成します。

次の質問項目を追加します

例示では二番目の項目に「メールアドレス」を設定しました。やはり「記述式」を選択、右下の「切り替えスライダーボタン」は「必須」に。
特に答えなくても構わない質問の場合は、このスライダーをOFFにします。

記述式でなく、選択肢も設定可能

例示では次の質問を「お問い合わせの種別」としました。このような質問設定の場合、ラジオボタンで選択肢を設けることができます。
選択肢の中に該当する項目がない場合に備えて「その他」が用意されています。「その他」を選択すると、具体的な内容を記述するスペースが出てきます。

「段落」を選ぶと長文記述窓ができます

問い合わせフォームで記入していただく箇所が多すぎると、途中で離脱されてしまうリスクが高まるので質問数は必要最小限にするのが望ましいです。
例示では、具体的に内容を記述いただく質問で最後にしています。

この場合は、書いていただく内容により文章量がかわりますので、右のプルダウンから「段落」を選択してください。すると、記入スペースに「記述式テキスト(長文回答)」という文字が出現します。

これでひとまず、フォームの中身が完成です。

手順2.フォームの外観を整える

テーマをカスタマイズ

右上にアイコンが並んでいます。パレットアイコンにカーソルを合わせると「テーマをカスタマイズ」できます。

ヘッダー画像やテーマカラーなどが変更可

テーマオプションとして、ヘッダーやカラー、背景色、フォントスタイルなどが設定できます。

こんな感じでヘッダーに画像を入れられます

ヘッダー画像を設定すると、フォームタイトルの上に画像が表示されます。
この画像も、表示するかしないか、するならどんな画像にするのか、フリー画像かオリジナルか、などあらかじめ決めておきましょう。

完成したフォームを、WordPressのサイトへ埋め込みます。その手順を以下に示します。

手順3.作ったフォームをWordPressへ

「送信」クリックでポップアップが表示

「送信」ボタンをクリックすると、「フォームを送信」のポップアップ・ウインドウが開きます。「送信方法」の箇所にいくつかアイコンが並んでいるのがわかると思います。

HTMLが表示されます

左から三番目のアイコン<>をクリックすると、埋め込み用HTMLが表示されます。これをコピーしてください。

Googleフォームを表示するWordPressへ

WordPressのダッシュボードへ移動します。固定ページで、Googleフォームを表示するページにカーソルを合わせ、編集モードにします。

編集(ビジュアルエディター)モードへ

編集モードで、右上に並ぶアイコンの右端「オプション」を選ぶとエディターのモードがチェンジできます。「コードエディター」(テキストエディター、になっている場合もあります)ではなく「ビジュアルエディター」を選択してください。

ブロックエディタで先ほどのHTMLを貼り付けます

左上「+」アイコンから、カスタムHTMLのブロックを選択します。そこに先ほどコピーしたHTMLをペーストします。このとき、タイトルのテキストを変更することもできます。

プレビューするとフォームが現れます

右上の「プレビュー」をクリック、作成した問い合わせフォームがWordPress画面に現れます。意図した通りの文言、項目、表示になっているか確認してください。修正があれば、適宜Googleフォーム作成画面やWordPress編集画面に戻って直してください。

実際に記入してテスト送信してみる

自分のWordPressサイトにアクセスして、実際にフォームに記入してみてください。記入し終えたら下の送信ボタンを押して、メールが届いているか確認してください。

Googleフォームには、回答がなされた(フォームに入力があった)場合、フォーム作成者にメール通知する機能が装備されています。

メールで通知が受け取れる設定に

Googleフォームの画面で、上部中央にある「回答」タブを開き、右上の三点リーダをクリックします。表示された「新しい回答についてのメール通知を受け取る」にチェックすれば、回答時に通知メールが届きます。

※Contact Form7では「フォームから送信したのに、受付メールが届かない」といった事象が発生することがあるため、「WP Mail SMTP」というプラグインを使った対策を以下の記事で解説しています。

しかし、Googleフォームでは「メール通知を受け取る」設定にすれば、Googleのサーバーからメールが送られてくるため、WP Mail SMTPの導入は不要です。

まとめ

閲覧しているwebサイトにお問い合わせフォームがあれば、ユーザーはメールソフトや電話を使わなくても気軽に問い合わせができます。「電話の方がいい」というユーザーさんもいらっしゃいますが、アクセスできるチャネルを複数用意しておくこと自体が、サイトの信頼性につながります。

Googleフォームの利用は簡単にできるうえ、内容も問い合わせに限らずアンケート調査など情報収集に役立つ便利ツールです。ぜひ有効に使って、より望ましいWordPressサイト運営に役立ててください。