乞食の生活

中年のおっさん世代が「面白い」「お得」と感じたものについてジャンルを問わず情報配信しています。ゲーム、ガジェット、お小遣い稼ぎ等の記事がメインです。

スポンサーリンク

【Googleフォーム】無料で簡単に「お問い合わせフォーム」をブログに設置する方法

f:id:neetkojikisan:20170801211530j:plain

皆さんのブログやホームページに管理人の連絡先は記載されているでしょうか。

連絡先があるだけでブログに安心感が生まれますし好印象になります。ですが個人で運営している場合にはメールアドレスなどの個人情報をネットに公表するのも少々不安ですよね。そこで今回は「Googleフォーム」を設置することで、Web上に「問い合わせ」フォームを作り連絡先として使う方法をご紹介します。

簡単なフォームでしたら数分程度で作れます♪

f:id:neetkojikisan:20170811183423j:plain

Googleフォームの設置と使い方

<目次>

Googleフォームとは?

「問い合わせ」や「アンケート」などのフォームを簡単に作成することができるGoogleが提供している無料ツールです。作成したフォームはWeb上に設置することができ、結果を集計したりメールに転送することができるため、ブログやホームページの連絡先としてよく使われています。

設置するメリット

 しっかりと運営している印象を与えることができますのでブログの信用に影響します。また、何かあった時の連絡先にもなりますし、仕事の依頼を受けるためにも必要です。

問い合わせをする側から見ても、「フォームに入力して送信ボタンを押すだけ」になるので双方にとってメリットがあると言えますね。では早速「Googleフォーム」を使ってみましょう。

問い合わせフォームを作成する

GoogleフォームはWeb上で作成しますのでそちらにアクセスします。

Googleフォーム:Google フォーム - アンケートを作成、分析できる無料サービス

f:id:neetkojikisan:20170811180646j:plain

「Googleフォームを使う」をクリックして進みましょう。ここで「Googleアカウント」でログインしていない場合はログインページに飛びますのでログインします。

 

こちらがログイン後のページです。フォームを新規作成するには右下の「+」をクリックします。

f:id:neetkojikisan:20170811181812j:plain

タイトルの作成

「+」をクリックすると新規フォームの画面になります。まずはフォームのタイトルを入れましょう。「赤枠で囲った部分」をクリックしてタイトルを入力します。

f:id:neetkojikisan:20170811182317j:plain

 

f:id:neetkojikisan:20170811182955j:plain

今回は問い合わせフォームを作りたいので「お問い合わせ」としておきました。

質問事項の作成

続いて質問事項を一つずつ入力していきます。ここでは「名前」「連絡先アドレス」「問い合わせ項目」「問い合わせ内容」の5つを作成します。必要に応じて項目を増やしたり変更してみてください。

名前欄の作成

それでは上の画像の「下赤枠内」をクリックし「お名前」と入力します。

 

f:id:neetkojikisan:20170811184305j:plain

続いて回答のタイプを変更します。現在のままでは「ボタンで選択する」タイプになっていますので「ラジオボタン」と表示されている部分の右側にある「▽」をクリック。

 

f:id:neetkojikisan:20170811184618j:plain

いくつかの回答タイプが表示されました。名前を入力させたいので「記述式」をクリックしましょう。

f:id:neetkojikisan:20170811185553j:plain

回答タイプを記述式にすることができました。入力を必須にしたいので右下の「必須」というバーを右にスライドさせます。

 

 ここまでの作業で1つ目の質問が完成しました。「名前」、「回答タイプ」「必須にするかの選択」の3つの項目を設定するだけです。

後は同じ要領で残りの質問項目を作っていくだけでいいので簡単ですね。

f:id:neetkojikisan:20170811185138j:plain

 

画面右側にあるメニューの「+」をクリックすると質問の項目を増やすことができます。

f:id:neetkojikisan:20170811190215j:plain

 

メールアドレス欄の作成

こちらから返信する際に必要なメールアドレス欄を作成します。

「ご連絡先メールアドレス」、「記述式」、「入力必須」で問題ないでしょう。

f:id:neetkojikisan:20170811190722j:plain

 

問い合わせ項目の作成

次に、問い合わせ内容についての大まかな項目分けを作成します。こちらはフォームを設置するブログやサイトによって項目が変わってくると思います。今回は「製品レビューについて」、「記事の執筆について」、「その他の問い合わせ」の3つにしました。「ラジオボタン」で「回答必須」にしています。

f:id:neetkojikisan:20170811191622j:plain

 

問い合わせ内容の作成

最後の項目です。問い合わせ内容を具体的に記述する欄を作成します。回答が複数行に及ぶ可能性があるので回答タイプを「記述式」にします。回答も必須ですね。

f:id:neetkojikisan:20170811192236j:plain

これで質問項目の作成が全て完了しました。

 

f:id:neetkojikisan:20170811192928j:plain

「質問枠内の上部にある点」をドラッグすることで質問の順番を入れ替えることができますので覚えておきましょう。また、画面右上にある「目のアイコン」をクリックするとプレビューを確認することもできます。

フォームの色を変更する

思った通りに表示されていたでしょうか。せっかくなのでサイトに合った色に変更してみましょう。目のアイコンの隣の「パレットのアイコン」をクリックで色の変更ができます。

f:id:neetkojikisan:20170811193352j:plain

 

今回はブルー系に変更してみました。見やすい色にするのがいいでしょう。

f:id:neetkojikisan:20170811194306j:plain

回答後のメッセージを作成

「問い合わせの入力後に表示されるメッセージ」が初期状態のままになっていますので変更しておきましょう。画面右上の「歯車のアイコン」をクリックします。

f:id:neetkojikisan:20170811194805j:plain

 

設定画面が開きました。「プレゼンテーション」のタブをクリックし「確認メッセージ」の欄にお好きなメッセージを入力しておきましょう。完了したら「保存」を忘れずに。

f:id:neetkojikisan:20170811195110j:plain

今回は「お問い合わせありがとうございます。内容を確認後返信いたします。」としました。本当は「何日以内にご返信します」と書きたいのですが、そう書いてしまうとセールスをはじめどんな内容であっても返信しなければいけないことになります。

少しずるいかもしれませんが、曖昧に書いておく方がいいかもしれませんね。

メール通知の設定

いざ問い合わせがあった時にすぐに対応できるよう、メールで通知する設定に変えておきましょう。フォームの作成画面に戻り「回答」タブをクリック>右側のメニューを開きます。

f:id:neetkojikisan:20170811200210j:plain

 

「新しい回答についてのメール通知を受け取る」をクリックしてチェックをいれておきましょう。フォームを作成した「Googleアカウント」のメールアドレスに通知のメールが届くようになります。

f:id:neetkojikisan:20170811200356j:plain

 

フォームをブログ(サイト)に設置

設定も完了したら次はブログ(サイト)上に問い合わせフォームを設置します。画面左上の「送信」をクリックします。

f:id:neetkojikisan:20170811201534j:plain

 

「フォームをメールで送る」(アンケートなどの用途の為)、「リンクのURLを取得する」、「ページ内に埋め込む」の3つから選ぶことができます。

リンクの場合は問い合わせフォームに飛んでもらい入力する形。埋め込みなら、自己紹介ページなどの内部にそのまま表示するので別のページに飛ぶ必要がなくなります。

f:id:neetkojikisan:20170811201826j:plain

私の場合は「問い合わせする必要がない人にまで表示されてしまう」のは閲覧者にとっても利益がないと思いましたのでリンクを貼る形で設置しました。どちらもURLを張り付けるだけですので手間はかかりません。実際に設置してみてから選んでもいいかもしれませんね。

 

f:id:neetkojikisan:20170811203438j:plain

「リンク」または「埋め込み」を選択して表示された枠内のコードをコピーします。後はそれをご自身のブログ(サイト)のお好きなページに貼りつければ完了です。今回は「はてなブログ」の「aboutページ」に設置する方法をご紹介します。

はてなブログへの設置方法

はてなブログのダッシュボードを開き「設定」>「aboutページ編集」へと進みます。

f:id:neetkojikisan:20170811204013j:plain

f:id:neetkojikisan:20170811204835j:plain

こちらの自由記述欄に貼りつけるだけでいいのですが「リンク」の場合htmlが表示されるだけでなんだか見た目がよくありません。

 

このように表示されてしまいます。

f:id:neetkojikisan:20170811205245j:plain

ですので少しだけhtmlを使って見栄えを良くしておきましょう。

< a タグに target=”_blank”>属性を付けることで「新しいタブで問い合わせページが開く」ように設定します。

以下をコピペするだけでOKです。赤色の部分のみ「先ほど取得したフォームのURL」と「リンク用テキスト」に変更してください。

<a href="問い合わせフォームのURL" target="_blank">リンク用テキスト</a>

<a href="http://www.neetkojiki.com" target="_blank">お問い合わせはこちらから</a>

これを貼りつけると以下のように表示されます。先ほどよりは見やすくなったのではないでしょうか。

f:id:neetkojikisan:20170811211104j:plain

 

ページ内に埋め込む場合は「埋め込み」を選択してコードを貼りつければ完了です。ただし、高さの欄を「1200ピクセル」以上に設定しておかないとページ内にフォームが収まりきらないのでわざわざスクロールする必要が出てきますので気を付けましょう。

f:id:neetkojikisan:20170811212127j:plain

 

ページ内に埋め込む形だとこのような表示になります。

f:id:neetkojikisan:20170811212415j:plain

 

これで問い合わせフォームの設置が完了しました。

念のために動作確認をしておいてもいいかもしれませんね。

f:id:neetkojikisan:20170811213128j:plain

 まとめ

・ブログ(サイト)の印象に関わるので可能ならば設置しておく

・項目はシンプルにしておくと問い合わせ(対応も)しやすい

・メール通知があるとすぐに対応できる

簡単なものならすぐに作れますので、まだ問い合わせフォームをお持ちでない場合にはおすすめできます。

ここまでお読みくださりありがとうございました。