はてなブログにお問い合わせフォームを作り、メールで通知させる方法

はてなブログでは、お問い合わせのフォームが用意されているわけではないです。ワードプレスのように便利なプラグインがあるわけでもないので、Googleフォームを使いたいと思います。

Googleフォームでお問い合わせフォームを作る

• お問い合わせ用のGoogleフォームを作る
• 作成したフォームのHTMLを埋め込む

手順としては上記の通り。それではやっていきます。

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

まずは、上記のリンクからGoogleフォームを作成します。

「Googleフォームを使う」ボタンクリック。

色々テンプレートがありますが、空白のものを選択します。

フォームが表示されるので、これをお問い合わせフォーム用にカスタマイズしていきます。

+ボタンで項目を追加することができるので、メールアドレスなどの必要な項目を追加していきましょう。

フォームが完成したら送信ボタンを押し、そのフォームのHTMLを表示させます。

ここで表示されるHTMLをコピーしてはてなブログに埋め込みます。ここでサイズを調節できるので、自分好みのサイズにしてみてください。

はてなブログに埋め込む

お問い合わせ用の記事を作成する

さっきコピーしたHTMLを新規記事に貼り付けます。これをプレビューして見ると、作成したお問い合わせフォームが表示されているのではないでしょうか。

こんな感じですね。これを公開して、そのURLをリンクとしてサイドバーに埋め込みます。しかし、普通に公開するとトップページにその記事が表示さレれて格好悪いので、投稿日を全ての記事の一番過去に設定して投稿してやります。

サイドバーにフォームのリンクを出す

デザイン→カスタマイズ→サイドバーと進み、「モジュールを追加」をクリック。

ここのタイトルを「お問い合わせ」とし、中身は以下のようにリンクとなるようにしてあげましょう。

<a href="公開したお問い合わせ記事のリンク">お問い合わせフォーム</a>からどうぞ

これで保存し、ブログを表示させるとこんな感じになります。

このリンクをクリックすると、さっき投稿したお問い合わせフォームの記事にとぶわけです。

Googleフォームの送信先は、Googleフォーム

さっき作ったお問い合わせフォームから何か入力して送信すると、その内容はGoogleフォームの「回答」というところに保存されます。何か適当な内容をさっき作ったフォームから送信して、Googleフォームを作ったページに戻って確認してみましょう。

ここでメールアドレスやお問い合わせ内容を確認することができます。 ですが、これでは通知もこないし、ましてやメールでもないのでお問い合わせがあったのかどうかが非常にわかりづらいです。なので、お問い合わせフォームから何か送信されたらメールに通知が来るようにカスタマイズします。

メールに通知する

Googleフォームからボタンをクリックして、「回答先を選択」をクリックします。

ここで新しいスプレッドシートを作成を選択します。名前はなんでもいいですが、お問い合わせとしておきます。 作成ボタンを押したら、スプレッドシートが作成されます。

スプレッドシートはGoogleドライブに保存されるので、そこを見にいきます。

Google ドライブ - 写真やドキュメントなど、ファイルのクラウド ストレージとバックアップ

Googleドライブを見てみると、さっき作った「お問い合わせ」という名前のスプレッドシートがあるはず。これをダブルクリックして開きます。開くと、フォームで送信した内容が入っているのではないでしょうか。

メールの通知を有効にするために、「ツール」から「通知ルール」をクリック。

「ユーザーがフォームを送信したとき」「メール-その都度」に設定し保存。

完了ボタンを押して、完了です。

フォームから送信して確認

再度フォームに内容を入力して送信してみましょう。送信すると、「"お問い合わせ"が更新されました」というメールが来るはずです。メール内にスプレッドシートのリンクがあるので、そこから入力した内容を見ることができます。