ezorisu-web

ウェブサイトのデザインとかお仕事の効率化とか

Contact Form 7 で送信先を分岐させる

メールフォームといえば Contact Form 7

WordPressのプラグイン、Contact Form 7でメールフォームを作ると、サイト上からメールを送ってもらうことができます。このメールの宛先を「ドロップダウンメニュー」や「チェックボックス」、「ラジオボタン」で選んでもらった項目に合わせて、振り分けてあげようと思います。

通常はコンタクトフォームのメールタブで「送信先」に送り先のアドレスを入れておきます。複数入れる場合は、カンマ(,)で区切ってアドレスを続けて入力します。
aaaa@gmail.com,bbbb@gmail.com
のように。

フォームタブの設定

さて、このアドレスをメールフォーム(Contact Form 7 では、コンタクトフォームと呼んでいる)の入力に合わせて分岐させます。
フォームタブで「ドロップダウンメニュー」「チェックボックス」「ラジオボタン」どれでもいいですが、選びます。


例えば、「ドロップダウンメニュー」の場合、フォームタグ生成のメニュー画面が出てきます。「オプション」で1行ごとに項目を入力します。これで通常のドロップダウンリストが出来上がります。


「このサイトへのコメント」「野鳥に関する質問」「入会について」の3つの項目を作ってみました。それぞれのコメントに対して別々の担当者のところへメールが送られるようにしたいとします。その場合は、行ごとの後ろに半角の縦棒「|」で区切ってメールアドレスを入れます。

1行目:このサイトへのコメント|abcd@gmail.com
2行目:野鳥に関する質問|efgh@gmail.com
3行目:入会について|ijkl@gmail.com

それぞれ送り先の担当者に合わせてアドレスを入れて下さい。
出来上がったメールフォームのドロップダウンでは後ろのメールアドレスは表示されません。
「チェックボックス」も「ラジオボタン」も基本形は同じです。

メールフォームの表示

「タグを挿入」ボタンを押して、フォーム画面に戻ります。ドロップダウンメニューのタグが挿入されています。

<label>を追加しておきましょうか。
[select menu-400 “このサイトへのコメント|abcd@gmail.com” “野鳥に関する質問|efgh@gmail.com” “入会について|ijkl@gmail.com”]
このタグは menu-400 になっています。ここで一旦「保存」。

メールタブでメール画面に移動。

メールタブの設定

上の方に「以下の項目にて、これらのメールタグを利用できます」と書いてあります。先程の [menu-400] というのもありますね。
送信先に [menu-400] を入れてやります。ドロップダウンメニューで選んだ項目のメールアドレスが送信先に入力されるようになります。
あれ? 「不正なメールボックス構文が使用されています。」と出てきました。よくわかりませんが、たぶんまだドロップダウンで項目を選んでいないため、アドレス以外のものが入力されていると判断されているのではないでしょうか。無視して進めてかまいません。試してみるとちゃんと送られます。
管理人のaaaa@gmail.comアドレスへ送りつつ、各担当者へも送る場合は、
送信先にカンマで区切って aaaa@gmail.com,[menu-400] と入れてあげればOK。

メッセージ本文にも [menu-400] を入れておきます。ただし、このままだと送られたメールの中では、ドロップダウンメニューの選んだ項目が表示されなくて、メールアドレスのほうが表示されてしまいます。これでは困るので頭に「_raw_」を付けます。
[_raw_menu-400] こうしておくとメール本文の方は選んだ項目が表示されます。

「保存」ボタンを押します。
上部のショートコードをコピーして、投稿記事や固定ページへペーストしてコンタクトフォームページを作ります。
ちゃんと送れるかどうか、テストしてみてね。

野鳥の会札幌支部ウェブサイトのリニューアル

野鳥の会札幌支部ウェブサイト

作ってから10年近くたつサイトでしたが、2012年10月にWordPressに移行して新しく作り直しました。今までの固定客(主に支部会員の方々)もいらっしゃるので、あまり大きく印象が変わらないようにしながら、Twitterなど今風のITに対応できるようにしてみました。
野鳥の会も高年齢化が進み、なかなか若い会員の方が増えてこない状況ですが、なんとか興味を持ってもらえるサイトにしていきたいです。
お知らせなどの更新も私がやっていますがWordPressにしてずっと楽になりました。月ごとにタイトル写真を入れ替えたりもしていたので、そういう作業は簡単でいいですね。

日本野鳥の会札幌支部:http://sapporo-wbsj.org

ウェブサイト作成 「北海道フィンランド協会」

北海道フィンランド協会ウェブサイトイメージ

北海道フィンランド協会:http://hokkaido-finland.com/

北海道とフィンランドの情報交換、交流親善を目的としたサイトです。
妻が何故か古くからのフィンランド協会会員だった縁で作成することになりました。昔フィンランド語講座を受講していたそうで、その当時一緒に学んだ人たちは今ではフィンランド語の先生になっていたり、フィンランドの楽器カンテレの演奏者になって全国を飛び回っていたりしています。
ちなみに妻はいまだにフィンランド語を話せません。フィンランド語はあきらめて、会員だけ続けていたみたい。

フィンランドの魅力を伝えたいというのがテーマだったので、タイトル部分にはフィンランド人の方が撮影した美しい写真を並べています。もうほとんど写真だけでこのサイトのイメージは決まったようなものです。
ドロップダウンメニューはオーロラのイメージです。「CSSでドロップダウンメニュー」の応用編ですね。
トップページのサイドバーにはtwitterのハッシュタグで「フィンランド」関連のつぶやきを流しています。
あまり記事の更新が期待出来なかったので、サイトを開いた時に何かフィンランド関係の話題が流れていればいいかなと思って設置しましたが、これは意外と面白かったです。けっこうフィンランドについて話題にしている人はいるものなのですね。

このサイト、外枠はできているんですが中身がなかなか追いついていない感じです。
権限のある人が中心になってまとめてくれるといいのですが、なかなかそれも難しいようで・・・
フィンランド式野球「ペサパッロ」の話しとか楽しそうな話題もあって、うまく活用していけば、面白くなりそうなんですが。
今後に期待。

ウェブサイト作成 「日本野鳥の会札幌支部」

日本野鳥の会札幌支部ウェブサイトイメージ

私は野鳥の会札幌支部の幹事をやっておりまして、2003年に作ったのがこのサイトです。もう9年前ですね。
当時はテーブルレイアウトとCSS両方使って作っていましたが、途中から徐々にCSSに移行していきました。
通信環境も今と比べるととても遅かったので、なるべくシンプルに軽くすることを一生懸命考えていた気がします。月日が立つうちにだんだん脂肪がたまってきた感じがしますけど・・・
元々シンプルなデザインが好きなので、これはこれで今でも気に入っています。
野鳥のアイコンやロゴマークも手書きでポチポチと作っています。
この時はGoLiveを使って制作していました。今はMacのエディタ mi を使ってサイトを作成しますが、野鳥の会札幌支部のサイトは昔ながらのホームページ形式なのでGoLiveなどを使うと、制作が楽と言うより更新がとっても楽になります。
それでもWordPressに比べると頻繁に更新が必要なサイトは手間がかかります。そういう訳でこのサイトはWordPressに移行するべくリニューアル準備中です。複数のスタッフで記事を書いていくにはWordPressは便利ですしね。

野鳥の会も年々高齢化が進んできて、会員数も減少気味です。若い人達に積極的に参加していただけるようにどうやってアピールしていくかが悩みどころです。スマートフォンやタブレット端末も考えないとね・・・

ウェブサイト作成 「合氣護身術大東流無傳塾」

無傳塾ウェブサイトイメージ

合氣護身術大東流無傳塾:http://muden.jp/

私は武術関係には縁がありませんでしたが、フィンランドつながりでサイト作成の依頼をいただきました。無傳塾はフィンランドやイギリスにも支部があり、外国の方もサイトをよく訪問してくれています。
大東流は合気道の元になった武道と言われていますが、合気道に比べると認知度が低いのでもっと知ってもらいたいというのが、このサイトの目的です。

合気道は動き回りながら相手の力をうまく利用してさばいていくような印象ですが、大東流はほとんど動きがなく、いかに自分の力を抜いて相手を崩すかが大切なようです。力が必要ないので、女性や子供でも大人の男性と一緒に稽古をして、ひょいひょいと相手をひっくり返しています。
子供のほうが素直に動いて余計な力が入らないから相手に技を掛けやすいともおっしゃっていました。
テコの原理を応用したり、相手の力を利用したりするのとも違っていて、何度も間近でみていますが何回見てもよくわかりません。

武道系は外国の方も興味を持っていただけるので、広く知ってもらうためにfacebook、twitter、YouTubeなどを連動させています。主要な解説文には外国人のお弟子さんによる英訳も併記しています。今のところfacebookとtwitterは、活用がうまくなされていませんが、YouTubeの動画を見てメールを下さる方が増えてきています。今後はfacebookページの充実がテーマですね。