ANAで飛びたい

マイル、ポイント、クレジットカードなど。ポイントを貯めてマイルに交換&ANA機に乗るブログ。夫婦で運営しています。

はてなブログにお問い合わせフォームを設置&通知メールを受け取る方法

f:id:ana-zoom:20170103205630j:plain

こんにちは、ずーむです。                          【更新】2017年3月27日

 

今回は、はてなブログにお問い合わせフォームを設置したので、手順をご紹介します。

 

お問い合わせフォームなんて、今まで必要性を感じていませんでした。しかし、2016年の年の瀬も押し迫ったころ、マイレージブログ業界にポイントサイトとのコラボ企画がいくつも出てきました。また、「マイルで100の世界遺産」のトートさんが、ANA公式サイトでインタビューを受けて、公認陸マイラー?!に、なっておられましたよね?

※2017年3月14日、私もANA公認陸マイラーとなりました。

 

それもこれも、ブログの管理人に連絡が取れるからこそです。

というワケで、全くそんなあてはありませんが、もしものときの万が一のために、私が行ったお問い合わせフォームの設置方法を解説いたします。

スポンサーリンク
 

お問い合わせフォームの必要性

ブログを運営していると、様々な読者とのつながりができてきます。記事を投稿した時点では、不特定多数の読者に対して情報発信していますが、読者の中には何かを感じてくださる人がいて、特定の記事に何かしらリアクションを取ってくださる方も居ます。

その方法として、コメント欄やツイッターなどが利用できますが、誰もがツイッターのアカウントを持っているわけではありませんし、他の方の目に触れるコメント欄では、意見を伝えるには少しハードルが高くなりますよね。

そんなときに、お問い合わせフォームがあると、直接やり取りができますし、今までになかった読者とのつながりが出来るコトにもなります。

 

また、導入で言及したように、企業からのアプローチを逃さない為にもお問い合わせフォームが必要です。私のような弱小ブログにそんな需要はないと思っていますが、判断するのは相手方の権利。コチラ側からその可能性を排除する必要は、全くないと思います。

 

さらに、お問い合わせフォームがあると、GoogleAdSenseに合格しやすいと言うウワサ(あくまでもウワサ)もありますよね。たとえウワサが真実ではないとしても、人事を尽くして天命を待つためにも、打てる手は全て打つべきだと思いませんか?

 

これらの理由から、ブログには問い合わせフォームが必要だと感じました。

 

メールアドレスを直接載せるのはNG

さて、お問い合わせを受けるためには、メールアドレスを相手に伝えるコトさえできれば、あちらから問い合わせしてもらえます。つまり、ブログのどこにでもメールアドレスを直接貼り付けてしまえば、お問い合わせ環境は整うんですよね。

でも、それはリスクが大きいので、推奨できないコトなんです。というのは、メールアドレスを公開してしまうと、メールアドレスを収集されて悪いコトに利用されかねません。例えば、迷惑メールがどんどん届く羽目になります。そんな面倒なコトになりたくないですよね?

 

そこで、相手にコチラのメールアドレスを知られずに問い合わせを受ける方法として、「お問い合わせフォームの設置」が挙げられます。

これだと、コチラの個人情報の公開は最低限にできますし、問い合わせする側に必須で入力する情報を求めるコトによって、いたずらも最小限に抑えられます。

 

手順

1.Googleフォームで、お問い合わせフォームを作成

参考にしたのは、「MUTANT」のてつさんのブログです

www.mutant-tetsu.com

 

f:id:ana-zoom:20170103210150p:plain

まずはGoogleにログインします。

ログインしたら、画面右上のBCG予防接種跡みたいなアイコンをクリックします。

余談ですが、BCGでしたっけ?ツベルクリン??

さらに、一番下の「もっと見る」をクリック。

 

f:id:ana-zoom:20170103210208p:plain

次に、「さらにもっと」をクリックして、さらに進みます。

 

 

f:id:ana-zoom:20170103210222p:plain

利用できるサービスの一覧が出てきます。

画面を下のほうへスクロールしていって、「フォーム」をクリックしてください。

 

f:id:ana-zoom:20170103210234p:plain

画面が切り変わります。

魅力的なフォームを作ろう、という画面になるので、真ん中の「Googleフォームを使う」をクリック。

Tomって、誰なんでしょうか。

 

f:id:ana-zoom:20170103210255p:plain

Google Forms画面へ切り替わるので、右下の丸に十字ボタンをクリックしてください。

言い換えるなら、蚊に刺された跡に爪で作る跡のようなアイコンです。

ミッフィーの口を45度動かしたアイコン、でも良いですね。

 

f:id:ana-zoom:20170103210310p:plain

フォームを作成します。

タイトル、フォームの説明文、入力してもらう項目、そして、いたずら防止のため、項目を必須項目に設定します。

 

f:id:ana-zoom:20170103210330p:plain

「ラジオボタン」と書いてあるアイコンをクリックして、メニューを出します。

次に、メニューから「記述式」を選択してください。

左下のところが、記述式に変わります。

これは、名前を直接記入してもらう方式という意味ですね。他にもチェックボックスや長文を書くコトが可能な「段落」などが選択できます。

これでまずは、「お名前」が入力必須項目になりました。

 

f:id:ana-zoom:20170103210356p:plain

どんどん項目を追加します。

問い合わせフォームですから、「お名前」「メールアドレス」「件名」「お問い合わせ内容」などの項目が必要でしょうか。

項目を追加するには、右側の一番上にある「丸に十字ボタン」をクリックして、項目を追加します。

メールアドレスも、必須にしたほうがいいと思います。紫色になって、右側にボタンがあれば必須になっています。画像ではまだボタンを押す前ですね。

 

f:id:ana-zoom:20170103210413p:plain

最後に、「お問い合わせ内容」を項目として設定します。

お問い合わせ本文は、長文に対応した「段落」を選択しましょう。

もちろん、必須項目にします。

最後まで入力したら、上にある目玉ボタンをクリックして、プレビューを見てみましょう。

 

f:id:ana-zoom:20170103210428p:plain

プレビューがコチラです。

必要最低限の項目があれば、良いのではないでしょうか。

でも、紫色がなんか気になりますね。

色を変えるには・・・

 

f:id:ana-zoom:20170103210442p:plain

先ほどの画面に戻り、パレットマークをクリック。

ここで色が変えられます。

私はマイレージブログらしく、ANAっぽいブルーにしました。

 

2.お問い合わせフォームを過去記事として投稿

f:id:ana-zoom:20170103210511p:plain

では次は、このフォームをブログに過去記事として投稿し、設置しましょう。

画面右上の「送信」ボタンをクリックしてください。

 

 

f:id:ana-zoom:20170103210523p:plain

フォームを送信、と表示されますので、「< >」をクリック。

HTMLを埋め込む、に表示されているアドレスをコピーしてください。

クリックするだけで、全てが選択されますので、右クリックなり、Ctrl+Cなりでコピーをどうぞ。

 

f:id:ana-zoom:20170103210542p:plain

コピーしたら、はてなにログインして、過去記事として投稿します。

過去記事として投稿する方法は、「編集オプション」から、過去の日付にして、「指定日時で予約投稿する」にチェックした状態で、投稿すればOK

なぜ過去記事として投稿するか?ですが、普通に投稿すると、新着に載ってしまうからですね。

私は、普段からこっそり投稿したい記事は、ブログを開設した日まで遡って投稿してます。

こっそり投稿したい恥ずかしい記事があるってコトですね。

 

3.サイドバーにリンクを設置

f:id:ana-zoom:20170103210923p:plain

過去記事として投稿ができたら、その記事へのリンクをサイドバーに張ります。

私は、それっぽくエンピツの画像にリンクしてみました。

以上で、お問い合わせフォームの設置は完成です。

 

 

f:id:ana-zoom:20170103211037p:plain

お問い合わせが着ているかどうか、また内容を確認するには、「Google Forms」から、お問い合わせフォームをクリックします。

 

 

f:id:ana-zoom:20170103211112p:plain

クリックすると、問い合わせが着ている場合は、「回答」欄に数字が入っています。

画像を見ると「2」になっていますね。

これは、私が自問自答した自作自演のお問い合わせです。

早く、ポイントサイトからタイアップの依頼なり、ANAからのインタビュー依頼がこないでしょうかねぇ。

届くのは、せいぜい何かの依頼の体をした、振り込め詐欺のメールくらいでしょうか・・・

 

スポンサーリンク
 

お問い合わせが有ったコトと、その内容をGmailへ通知するには?

さて、せっかくお問い合わせフォームを設置したのに、自分で見に行かないと気がつかないようでは、お問い合わせをスルーしかねませんよね。

お問い合わせフォームに問い合わせがあった場合に、その内容をGmailに通知するコトができます。

 

参考にしたのは、「Qiita」のKumassyさんのブログです

qiita.com

 

まずは、Kumassyさんのブログから、コードをコピーしてください。

コピーしたらメモ帳に貼り付けて、上から4行目の「youremail@example.com」の部分を、お知らせを送りたいメールアドレスへ変更してください。

 

function sendForm(e){

var subject = "問い合わせがありました"; //件名

var body = "問い合わせ内容\n------------------------------------------------------------\n\n"; //本文

var to = "ここに、通知を送りたいメールアドレスを入力します";

以下省略

 

f:id:ana-zoom:20170103211537p:plain

次に、先ほど問い合わせがあるか確認した画面まで移動します。

Google Formsに設置した、お問い合わせフォームを開いてください。

フォームを開いたら、画面右上の「三つの点々」をクリックして、メニューを出し、「スクリプトエディタ」を開きます。

 

f:id:ana-zoom:20170103211609p:plain

開いたら、先ほどのメールアドレスを変更したコードを、上書きします。最初からあるコードは消してしまいましょう。

 

 

f:id:ana-zoom:20170103211632p:plain

コピペが終わったら、タブから「リソース」を選択して、「現在のプロジェクトのトリガー」を選びます。

 

f:id:ana-zoom:20170103211645p:plain

トリガーの設定画面が出てくるので、画像を参考に設定してください。

sendForm」、「フォームから」、「フォーム送信時」にそれぞれを設定します。

設定が終わったら、「保存」をクリックして、保存して終了してください。

 

トリガーを保存した後に、終了するわけなのですが、最後の終了の仕方に迷いました。

私は、「ファイル」に「保存」がありますので、そこから保存して、画面を閉じて終了しました。

ちゃんと、お知らせが届くようになりましたので、間違っていなかったのかな?と思っています。

 

f:id:ana-zoom:20170103211707p:plain

ちなみに、問い合わせフォームからの、問い合わせ内容の通知は、画像のようになります。

これだと、問い合わせがあっても、見過ごすコトもありませんよね。

 

【更新】2017年3月27日 

さて、この記事を投稿して以降、ホントにANA公式から原稿執筆依頼が届きました(笑)。ウソから出た誠と言いますか、狙い通りと言いますか、期待して設置した問い合わせフォームとはいえ、びっくりしています。まさかホントに依頼が届くなんて、ねぇ。

私がANA公認陸マイラーに認定されたお話はこちら。

www.ana-zoom.com

 

そしてさらに、ポイントサイトの「ハピタス」からも執筆依頼が届きました。

その記事がこちらです。

www.ana-zoom.com

 

まとめ

2016年以上に盛り上がりそうな、2017年のマイレージブログ業界。

なにか良いコトがあるかもしれませんので、お問い合わせフォームを設置してみてはいかがでしょうか。

私は、はてなブログのお知らせくらい、毎日楽しみに問い合わせを待っています。

 

再掲

参考にしたのは、「MUTANT」のてつさんのブログです

はてなブログで問い合わせフォームを作る方法 - MUTANT

参考にしたのは、「Qiita」のKumassyさんのブログです

Google Formで問い合わせが来たときに、その内容をGmailに通知する - Qiita

 

おすすめ記事

www.ana-zoom.com

www.ana-zoom.com

www.ana-zoom.com

www.ana-zoom.com

www.ana-zoom.com

スポンサーリンク