読者です 読者をやめる 読者になる 読者になる

GOOGZONW

ふと思い立ったことをまとめたら記事にあげるブログ

MENU

ブログにお問い合わせフォームを設置しました(はてなブログ)

はてなブログのコメント機能は心細く、またブログのコメント機能自体が当ブログのようなアフィリエイトブログでは邪魔になりがちです。しかし、一方で書いた者の責任として、ネガティブ・ポジティブを問わずフィードバックを受け付ける場は必要と思い、お問い合わせフォームを作成しました。もちろん名前、メールアドレスなどは記入せずともお問い合わせ頂けます。

 

設置場所はサイドバーに一つ。

f:id:katamichinijikan:20170303090342j:plain

そして記事下に一つ。

f:id:katamichinijikan:20170303090352j:plain

 

それぞれ、お問い合わせフォームへのリンクを設置しています。実際のリンク先はこちら。

お問い合わせ - GOOGZONW

 

 

過去に仕事でも使ったことのある、GoogleフォームというGoogleの無料サービスのひとつを使っています。

www.google.com

 

 

Googleフォーム使ってお問い合わせフォームやアンケートを作ろう

Googleフォームを使うと、お問い合わせフォームだけでなく、複雑な条件分岐を含んだアンケートなども作成することができます。手順を簡単にご紹介します。

 

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

既に作成したフォームがある場合には、この画面上にずらりと表示されます。

f:id:katamichinijikan:20170303090850j:plain

②フォームを新規作成します。

画面右下の「+」ボタンを押下します。

f:id:katamichinijikan:20170303091026j:plain

③フォームを作りこんでいきます。

タイトル説明を入力します。

タイトルは、例えば「お問い合わせ」だとか「読者アンケート」などですね。

説明はなくても構いませんが、「お気軽にお問い合わせください」や「〇〇に関するアンケートです」など簡単に1文でも説明があると良いでしょう。

f:id:katamichinijikan:20170303091336j:plain

④質問を作成します。

デフォルトで、1つ目の質問が作成されています。質問文を入力してみましょう。

更に、デフォルトでは回答方法としてラジオボタンが選択されています。これを適切な形式に変更していきます。

f:id:katamichinijikan:20170303091544j:plain

記述式:1行の文章を入力できる入力欄(氏名、メールアドレス、電話番号など)

段落:複数行の文章を入力できる入力欄(質問文、備考欄など)

ラジオボタンの例

こうやって、写真を追加することもできます。

f:id:katamichinijikan:20170303092526j:plain

均等目盛の例

均等目盛と聞くと、ピンとこない方も居られると思いますが、こういうやつです。

f:id:katamichinijikan:20170303092543j:plain

⑤質問やページを追加する

直観的なUIで、あまり迷うこともないと思います。

質問の追加は、画面下の左側の「+」ボタンをクリックします。ページを分けたい時には、右側の長方形が二段重ねになったボタンをクリックします。

f:id:katamichinijikan:20170303092812j:plain

⑥保存は自動保存

その他のGoogleのサービスで見られるように、保存は随時自動的に保存されています。

⑦プレビューを見て仕上がりを確認しましょう

画面右上の「目」のボタンをクリックすると、フォームのプレビューを確認することができます。

f:id:katamichinijikan:20170303093101j:plain

 

以上でフォームの作成は完了です。

これをブログに載せたり、メールで送信したり、SNSで発信することができます。

Googleフォームで作ったフォームを共有しよう

Googleフォームを共有するには、そのフォームの作成画面を開いた状態で、画面右上の「送信」ボタンをクリックします。

f:id:katamichinijikan:20170303093101j:plain

 

メール:メールでフォームを共有します。

リンク:リンクでフォームを共有します。

HTML埋め込み:ブログやホームページにHTMLを埋め込んでフォームを掲載します。

SNS共有:各SNSで共有します。リンクを使って共有できますが、便利なSNS共有ボタンが備わっています。

f:id:katamichinijikan:20170303093721j:plain

 

ブログに掲載する場合には、HTML埋め込み(青枠)を選択し、HTMLソースをコピーします。はてなブログの記事の作成画面から、「HTML編集」を選び、コピーしたソースを貼り付けます。

f:id:katamichinijikan:20170303094342j:plain

画面をはみ出てスクロールバーが出てしまう

HTML埋め込み用のソースの取得画面で、幅と高さを設定できますが、一度はてなブログ側にコピーしてきてからの方が調整がしやすいでしょう。

f:id:katamichinijikan:20170303094342j:plain

 

  • width="700" (横)
  • height="1100" (縦)

などと記述されている部分がそれぞれ横と縦の大きさです。

この数字を調整しながら、うまくブログの記事内に収まるように調整してみましょう。

フォームの色を変更したい

フォームはデフォルトでは紫をベースにした色遣いをしています。これを変更することができます。画面右上のカラーパレットをクリックします。

f:id:katamichinijikan:20170303093101j:plain

カラーパレットが表示され、好きな色をお選びいただけるほか、右上のボタンから、テーマを選ぶこともできます。

f:id:katamichinijikan:20170303095648j:plain

回答を見てみよう

回答を見たい時は、Googleフォームにアクセスし、回答を見たいフォームをクリックします。

f:id:katamichinijikan:20170303090850j:plain

 

回答タブを選択すると、回答結果を見ることが出来ます。

概要を選ぶとすべての回答がずらりと一覧表示されます。

個別を選ぶと、一つ一つの回答をフォーム形式で確認することができます。

また、右上の緑の四角に十字が入ったボタンを押すと、スプレッド形式で結果を出力することができます。

f:id:katamichinijikan:20170303095224j:plain

回答を締め切りたい

回答を締め切りたいフォームを開き、「回答を受付中」をOFFにしましょう。これだけで回答の受付を停止することができます。

f:id:katamichinijikan:20170303095224j:plain

回答があったら通知を受け取りたい

回答を通知で受け取るには、アドオンを追加する必要があります。

 

①Googleフォームの画面右上のメニューから、「アドオン」を選択します。

f:id:katamichinijikan:20170303100438j:plain

 

②アドオンの検索画面が開きますので、「Form Notification」で検索します。かなり多くのユーザーがいるアドオンですから、検索せずともトップに表示されているかもしれません。

f:id:katamichinijikan:20170303100512j:plain

Form Notificationの「+無料」ボタンをクリックしてアドオンを追加します。

f:id:katamichinijikan:20170303100600j:plain

④権限に関する警告が表示されます。「許可」ボタンをクリックします。

 

⑤Googleフォームを開きなおします。通知を設定したフォームを開くと、画面右上にアドオンボタンが表示されています。クリックし、「Form Notification」を選択します。

f:id:katamichinijikan:20170303100804j:plain

 

Configure notificationsを選択します。

f:id:katamichinijikan:20170303100925j:plain

 

⑦通知の設定画面が開きます。Notify meNotify respondentsの2つのチェックがあります。

 

Notify me:回答があったときに通知を受け取る機能です。

Notify respondents:回答があったとき、回答者に受付メールを送付する機能です。

 

Notify meの設定

My email addresses

回答があったときに通知を送る先のメールアドレスを指定します。

カンマ区切りで複数のメールアドレスが指定可能です。

Send notifications after every

いくつの回答ごとに通知を送るかを指定します。

10と指定すると、フォームへの入力10件ごとに通知が1通届きます。1と指定すると、フォームに入力があるたびに通知が1通届きます。

f:id:katamichinijikan:20170303100945j:plain

Notify respondentsの設定

Which question asks for their email?

作成したフォームのうち、メールアドレスの入力欄を選択します。

Notification email subject

フォームを入力してくれた人へ通知するメールの件名を指定します。

Notification email body

フォームを入力してくれた人へ通知するメールの本文を指定します。

f:id:katamichinijikan:20170303101316j:plain