経済的自由のススメ

タダでもやりたいことで勤労所得を得て、投資で不労所得を得て、それを死ぬまでに全部使い切る、という生き方のススメ

お問い合わせフォームをブログに設置するやり方

みなさん、こんにちは。面白そうと思うとどうしてもやってみたくなる今村です。

で、今回は、ふとお問い合わせフォームってどうやって作るんだろう?と思って調べてみたら面白そうで試してみたくなったので作ってみました。いや、あたしの場合、ブログを介してお仕事を得たいわけでも、人から質問を受けるようなレベルのものを書いてるわけでもなんでもないので、はっきり言ってお問い合わせフォームなんて必要ないんですが。

でもいつかお問い合わせフォームが要るようなサイトを作るかもしれない!……かどうかは疑問ですが、万が一もう一回作りたくなったときのためにメモっておきますので、「へー、面白そう」と思った方は、必要かどうかにかかわらず是非作っちゃってください。

出来上がり図

お問い合わせ用の記事を書いてそこにフォームを貼り付けて、グローバルメニューとかからそのページにアクセスできるようにするっていう方法もありますが、あたしはお問い合わせ用の記事を書きたくなかったので、サイドバーにボタン置いといて直接フォームにアクセスできるようにしました。こういうのです。↓

お問い合わせボタン例

お仕事の依頼が欲しい場合なんかは「こんな仕事を受け付けてます」とか「こういうことが得意です」みたいなお問い合わせ用の記事を書いてそこにお問い合わせフォームを張る方がいいかもしれません。その場合は「フォームのボタンを作る」を飛ばして読み進んでください。

フォームのボタンを作る

まず、ボタンを作ります。あたしは画像作るスキルは全くないので「お問い合わせ」と書いただけのシンプルなボタンですが、いろいろできる人は面白いボタン作っちゃってください。ここではマウスオーバーしたら色が変わるようにするため、色違いで2つ作りました。こんな感じです。↓

お問い合わせボタン画像例

ボタンができたら、フォトライフなど自分が画像をアップロードしている場所にアップロードして保存しておきます。

フォームを作る

何で作ってもいいんですが、あたしはGoogleフォームを使いました。GoogleフォームはGoogleドライブにアクセスし「新規」>「その他」>「Googleフォーム」を選択すれば出てきます。あとは好きなようにタイトルや質問を設定するだけです。あたしはこんな感じのフォームを作りました。

お問い合わせフォーム

Googleフォームの作り方はこちらで詳しく解説されています。

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

問い合わせを記録するスプレッドシートを作る

たくさんお問い合わせが来る人はこういうファイルに記録していくと便利なんじゃないかと思います。あたしはお問い合わせなんかこないだろうと思うんですが、どういうふうになるのか見たかったので作りました。

作ったフォームの「回答」のタブをクリックすると出てくる右端のアイコンをクリックして「回答先を選択」をクリックするだけで、お問い合わせが自動で蓄積されていくスプレッドシートを作ることができます。

メールでお知らせがくるように設定する

スプレッドシートが開いたら、お問い合わせが来たら自分にメールが届くように設定します。詳しいやり方はこちらを参照。

ASCII.jp:Googleフォームで自動返信システムをサクッとつくる (3/4)|Web制作をちょっと便利にするGoogle Apps Script入門

単に「フォームの送信がありましたよー」とお知らせが届くだけの通知ルールの設定と、フォームに書かれた内容も一緒にメールしてきてくれるスクリプトの設定の2つのやり方が説明されてます。両方やるとメールが2件届くので、スクリプトを設定する場合は通知ルールの設定は必要ありません。

フォームの作動を確認する

フォームの右上にある「プレビュー」のアイコンをクリックすると今作ったフォームが開きますので、何か入力してスプレッドシートやお知らせメールがきちんと作動するか確認してください。

はてなブログにボタンを設置する

いよいよブログにボタンを設置します。以下のHTMLコードを使います。

<a href="フォームのURL" target="_blank"><img src="お問い合わせボタンのURL(メイン)" 
onmouseover="this.src='お問い合わせボタンのURL(マウスオーバー用)';" 
onmouseout="this.src='お問い合わせボタンのURL(メイン)';"/></a>

フォームのURL

フォームの画面の右上にある「送信」ボタンをクリックして送信方法のリンクのアイコンをクリックするとフォームのURLが出てきますので、短縮してそれを上記のコードの「フォームのURL」の部分にコピペします。

ちなみに、HTMLのアイコンをクリックするとコードが表示されますので、お問い合わせの記事を書いてそこにフォームを埋め込みたい場合は、サイズの調整をしてこれを使えばOKです。

お問い合わせボタンのURL

アップロードしておいたお問い合わせボタンの画像を右クリックすると「画像URLをコピー」のオプションが出てきますので、これクリックしてメインの画像とマウスオーバー用の画像それぞれのURLを上記のコードの「お問い合わせボタンのURL(メイン)」と「お問い合わせボタン(マウスオーバー用)」の部分にコピペします。

設置

コードができたら好きな場所に入れます。あたしはサイドバーに入れました。サイドバーに入れるには、はてなブログのダッシュボードの左メニューから「デザイン」>「カスタマイズ」>「サイドバー」を選択して「+モジュールを追加」をクリックします。そして出てきたオプションから「HTML」を選んでタイトルをつけ、上のコードを貼り付ければOKです。

 

どうですか?やたらステップが多いので面倒と言えば面倒ですが、作業自体は簡単なので、難しいことをしないで達成感を得たいときにピッタリの作業ですよ。

 

後日談:

あたしのサイトではお問い合わせなんてこないだろうと思っていたんですが、アフィリエイトのASPの方から来ましたよ、お問い合わせ。仕事の依頼かブログの内容に関する質問くらいしか想像してなかったので、そういう方面からのお問い合わせもあるんだー、やっぱりお問い合わせフォーム大事!と思いました。