2008年11月29日土曜日

Bloggerに無料メールフォーム設置?

Bloggerにはメールフォームの機能は標準ではついていないようです。無料で利用できるFC2メールフォーム忍者メールフォームを設置するしかないのかなと思っていたのですが、Docのフォームが使えそうな感じです。

GoogleドキュメントのフォームをBloggerに貼り付けてみる。
  1. Googleドキュメントのスプレッドシートを新規に作成する。アクセス権は自分のみ。非公開。
  2. このスプレッドシート用のフォームを作成する。
  3. このフォームをBloggerに貼り付ける。記事として作成し、リンクを貼る。サイドバーに貼る。
  4. このスプレッドシートに書込みがあったら自分宛にメールで通知する。
これで、フォームに必要な項目を設定すれば、無料メールフォームの出来上がり?
フォームやスプレッドシートのリスク管理がどの程度のものかはよくわかりませんが、私のようなIT素人が自分でセキュリティを考えて設定するよりはよほど安全かと(笑)。https(SSL)対応のようですし。


(1)Googleドキュメントのスプレッドシートを新規に作成する。
  1. Googleドキュメントのスプレッドシート画面へ。
  2. 「新規作成」「スプレッドシード」で新規のスプレッドシートを作成する。
  3. 受信のためのスプレッドシートでわかるようにファイル名をつける。
ここでは、「Blogger受信箱」とつけて保存。
※ ファイルのアクセス権は自分のみ(非公開設定)。




(2)このスプレッドシート用のフォームを作成する。
  1. 「フォーム」「フォームの作成」をクリックする。
  2. スプレッドシートの名前がフォーム名にデフォルトで入っているので、好きな名前にする。
  3. ここでは仮に「お問合せ」とする。
  4. 質問の始めに「名前」が入っている。「お名前」と変更(お好みで)し、質問の形式「テキスト」を選択。
  5. 次に必要な項目を設定する。ここでは、「メールアドレス」と「メッセージ」を加える。
  6. 質問は「メールアドレス」と記入し、質問の形式「テキスト」を選択。
  7. 「+質問を追加する」をクリックし、「段落テキスト」を選択。
  8. 質問は「メッセージ」と記入し、「段落テキスト」を選択。
  9. 「このアンケートに関する説明文を入力します」に好きな説明文を入れる。
  10. ここでは仮に「Shayahへのお問合せはこのメールフォームからお願いします」と記入。
  11. 「名前」「メールアドレス」「メッセージ」を必須にするのであれば「この質問を必須にする」をそれぞれの質問ごとにチェックする。
  12. 「完了」
  13. 「その他の操作」「確認を編集」で受信直後に表示するメッセージを編集。











(3)フォームをBloggerに貼り付ける。
  1. スプレッドシート(Blogger受信箱)に戻って、「フォーム」「フォームを埋め込む」をクリック。
  2. 「これをブログまたはウェブサイトに貼り付けます」のアドレスタグをコピーして、Bloggerに貼り付ける。
  3. フォームメール用の記事を作成するか、もしくは、サイドバーに貼り付ける。






(4)スプレッドシートに書込みがあったら自分宛にメールで通知する。
  1. スプレッドシート(Blogger受信箱)に戻って、「共有」「通知ルールの設定」
  2. 条件と通知方法を設定する。
  3. 変更があるごとに通知する設定になっていたほうが後でわかりやすいか。





実験的にメールフォームを記事本文で作ってみました。こちらです。
また、右サイドバーの下方にも設置してみました。

Googleドキュメントのフォームは、スタイルシートで細かい表示設定をすることはできませんが、必要最小限のメールフォームの役割ははたしそうな感じです。ラジオボタン、チェックボックス、リストからの選択などが簡単に作れ、必要なデータ収集を簡単にできる感じです。(ホームページ作成ソフトで作るのと比較して)


【追加】2011.9.12
フォームをBloggerに貼り付ける方法
「これをブログまたはウェブサイトに貼り付けます」のアドレスタグをコピーして、Bloggerに貼り付ける。


この貼り付ける方法について、お問い合わせがあったので、追加します。


(「アドレス」ではなく「タグ」というようなので、以下、タグで説明します)


(a)Bloggerの記事に貼り付ける場合

  1. 投稿記事の編集ページには[作成][HTML]があります。この[HTML]をクリックします。
  2. 貼り付けたいところに、コピーしたタグを貼り付けます。
  3. プレビューで確認し、問題がなければ保存、公開します。

(b)Bloggerのサイドバーに貼り付ける場合

  1. [レイアウト]画面をクリックします。
  2. サイドバーに[ガジェットを追加]をクリックします。
  3. [HTML/JavaScript]を追加します。
  4. コピーしたタグを貼り付けます。
  5. この時、サイドバーの幅とか高さに合わせるように、width、heightの長さを調整します。(例) このブログの場合、width="230"height="620"に調整しました。
  6. 問題がなければ保存、公開します。
実際のレイアウトは、閲覧する人のブラウザや画面設定によっても異なって見える場合がありますので、いくつかの条件設定で確認してください。




3 件のコメント:

Shayah さんのコメント...

Firefoxで確認して使える!と思ったのですが、いま、IE6で確認すると、横幅が枠の中に入らないようです。IE7のPCでは大丈夫?のように見えますが・・・。

横幅が枠の中に入らないと、入力途中で画面が動いちゃって使いにくいですね。

何か対策の方法があるのかどうか、ちょっと調べてみます。

ふーみん さんのコメント...

自分のブログでも試してみました
こんな方法があるのですね、驚きです!

Shayah さんのコメント...

ふーみん さん
こんばんは。すみません、このブログ放置していました。

Googleドキュメントの設定を日本語にすると、IEでは文字化けするようですね(Firefoxでは普通に見えます)。English(US)設定にすると、とりあえず文字化けは避けられるようですが。