第11回WordBench京都に参加して(1/13)


年末29日から正月はずっと寝込んでいて、何もできない散々な正月でした。

なんとか仕事始めまでには行動可能状態になったのですが、今持って体調はいまいち。
そのため今回は懇親会はパスとなりました・・・。来週はWordBench大阪に初参加(懇親会も!)なので、少し養生しておかねば・・・。

今回のテーマは、「問い合わせフォーム」です。誰もが一度は検討・使ったことのあると思う有名はプラグインの話ですね。デザイナーから見た実践的なお話ということ、プラグイン比較の話もありそうで、またWordBench大阪や神戸の方も参加されるようで、面白そうです!

特に、Contact Form 7, Trust Formは両方共日本人が作者なので、日本語処理もバッチリなはずなんです。その点も安心ですね。

※全く関係ないのですが、ふと検索しているとWordCamp Kyotoって2009年に開催されてたんですね!知らなかった・・・。今のWordBench京都が出来る前なので、別チームだったみたいですが・・。

会場への道すがら

少し時間に余裕があったので、ふらっと京都駅のヨドバシカメラによりました。
「そういやー、iPhoneに変えてからデジカメ情報見てなかったなぁ」という軽い気持ちでデジカメのエリアを中心に見たんですが、もう性能すごくあがってますね!iPhoneのような手軽に写真をとれるスマホと、被写体が動くような、あるいは夜景や大きなイベント等で写真を綺麗にとるには「やっぱりデジカメいるよなぁ」というのが素直な感想でした。2万円までのデジカメ検討しようかなぁと思う今日このごろです。

以下、「※」は筆者が思ったことや備忘録的に付け加えた内容です。

「Contact Form 7」のよくあるカスタマイズ(@sakuragi_kei)

※お話される方は、DTPやMovableTypeの経験が豊富な方とのこと。
後日公開されたスライド
感想:顧客とのやり取りが元になった内容なので、実務的でよかったと思います。

Contact Form 7とはメールフォームを作成・管理できるプラグイン。

メリット

一から作ると、「セッション管理」「不正アクセス防止処理」「エラー処理」「項目チェック」などなど、結構面倒でまた難しいものです。そういったことを考えなくてよいのは大きなメリット。
たしかに今でも一から問い合わせフォームを作っている(特殊なもの)ので、このメリットが非常に大きいと感じてます。

ではこういったツールを使った場合、カスタムするときにはどうするんだろうというお話をされました。プラグイン作者が日本人なので、マニュアルは日本語完備です(当たり前か・・・)。そのため公式サイトを見ると、かなり詳細なマニュアルがあり、ここでは面白いと思った内容だけを紹介しますね。

セレクトメニューで表示される内容と送信値を変更するには?

  • “表示内容|値”

と記載すればいい。HTML上ではなんと、表示内容しか見えないそうです。送る値はContact Form 7で保存されるので、送信値を隠すことができるメリットがあるとのこと。おおー!

予めフォームに値が入力されているようにするためには

aタグに値を入れておく(href=”****/?page=***&yourname=”<?php url_encode(‘名前’); ?>”&subject=”<?php urlencode(‘件名’); ?>”)とか。(urlencodeはInternet Explorerでの文字化け防止対策)。

IMEの自動切り替え

項目ごとにIMEをON/OFFにするなどが出来るらしい。

  • [text your-name class=”ime-off”]
    ime-mode: inactive; (CSS)
  • [text your-name class=”ime-on”]
    ime-mode: active; (CSS)

自前の送信ボタンにする

  • inputタグに、「src=”ボタン画像のURL” class=”wpc7-form-control wpcf7-submit”」

郵便番号から住所を自動入力

これいいですよねぇ。詳細は発表者のスライドが公開されるそうなので(ここで公開された)、それをみれば分かるかなと。

管理画面以外は、jQueryは外部読み込みしたほうがいい

お決まりとのこと。ふむ。

メールアドレス確認をするには

有名なサイトがあるので、そのコードを丸写ししたら基本的にはいける。でも大きな問題があるとのこと。
※同じツールを使ってのやり方は「Contact Form 7で確認画面を出すには」で纏め記事を出したことがあるので、合わせて参考にしてみてください。

メール送信後の画面表示

CSSで制御するのが一番簡単(発表者のスライド参照 / 公開されたらリンクします〜/ここで公開

確認画面を表示する

私も使っていますが、「パーマネントリンク設定」でないと動作しないとのこと。

確認用メールアドレスの整合チェックと組み合わせると、送信時にしか確認されない問題。JavaScriptの追加が必要になってくる。

スパムメール対策

画像認証のCAPTHAはいやがる顧客が多いとのこと。
Akismetプラグインもオススメだが、営利目的のサイトは有償となる。私も1つ購入して使ってますが、結構弾いてくれます。

Contact Form 7 Honeypotがオススメということです。

非表示のダミーフィールドを作って、そこに入力されていたら弾くという手法。
入力者側は見えないが、コンピュータには見ている入力が見える仕組みを入れるということ。
コンピュータによる自動スパム登録の場合には効果が高いとのこと。

これなかなか良さそうですね。

メールが届かない

送信メールサーバがスパム扱いされている場合もある。私も経験があるが、共有サーバがブラックリストに入っていてブロックされたり、Webからの送信そのものがブロックされることが稀に起こる。
あるいは、メールサーバとWebサーバが異なっている場合も考えられるとのこと。

WP Mail SMTP, Cimy Swift SMTPプラグインなどを使って、WordPressで使うメールサーバを指定すると解決する場合があるとのこと。

送信ボタンを連打されると多重送信されてしまう

JavaScriptで防止することが出来るとのこと。
[disableDoubleSubmit」というjQueryのプラグインを使うと楽ということですね。これは使えそう。

「Trust Form」プラグインの処理の流れとカスタマイズ(@as_chachamaru)

公開されたスライド

※発表者はシステムエンジニアでプログラマのため、プログラムの内部処理の事をわかった上で発言されてます。

※直感的な操作でフォームを作ることができるプラグイン。以前作者にお会いした時には、「確認画面もあるよ!」といっておられましたね。
※このプラグインも日本人が作者。日本の文化にあった問い合わせフォームなので、初めて使われる場合には、こちらのほうが分かりやすいかなぁと思います。(PHPやJavaScriptでガリガリできる人、いろいろ拡張したい人は、Contact Form 7の方が使いやすい場合あり。つまり独自機能の拡張はできないプラグインという感じの模様)

さて、Contact Form 7, Contact Coldform, Slick Contact Forms, User Noise, Popup contact form等ものすごい数の問い合わせフォームプラグインがあるけれど、Trust Formには「確認画面がある!」。何故か!?

確認画面は日本の文化

なので(WordPress本体も含めて)、プラグイン開発者は確認画面なんてものの発想が出てこないからだそう。Contact Form 7はその世界的な標準的なポリシーを元にするということなので、確認画面がないということとのこと。

特徴

  • 確認画面、データベースをサポートした問い合わせフォーム
    ※Contact Form 7の場合には、Contact Form 7 to Database Extension というプラグインをいれると、データベースがサポートされる。
  • HTMLタグを知らなくても、ドラッグ&ドロップでフォームが作成できてしまう
    ※Googleサイトみたいだな・・・
  • 項目にメモを付与できる(単なる管理用)

入力画面、確認画面、完了画面の3セット

を管理画面で作成できる。

自動返信

全部なら[FORM DATA]、パーツ毎なら[inputのname値]で埋め込むことができる。

メールアドレスが複数ある場合には不便!?

入力項目にメールアドレスが複数あると、それら全員の方に送られることになる。これは不便?

またこれを避けるためにテキストフィールドにメールアドレスを入れると、メールアドレスの形式チェックが出来ない問題がある。

※Contact Form 7では送信するメールアドレスの「項目」を指定されるので、この問題は発生しない。

データベースからCSVダウンロードする

標準でCSVダウンロードボタンがあるので、それで使える。
ただし、プラグインのcsvフォルダに書き込み権限がなければ「0バイト」になって内容が表示されない問題があるので注意。

※UTF-8保存されるので、Excelでそのまま開くと文字化けする問題有り(少し調べると簡単にExcel出力できそうなので、とりあえずContact Form 7 to Database Extensionの方は拡張してみようかなぁ。)

バリデーションは固定

入力出来る形式は標準で準備されているものに加えて追加することは難しいとのこと。

※でも作者はすごく気さくな方なので要望を出したら対応してくれそうだと思います。

エラーメッセージ

function.phpで書き換えることはできるが、なかなか難しいとのこと。

※Contact Form 7では各フォームで変更できる

CSSによるデザイン・レイアウト変更

管理画面で編集できる。リアルタイムで変更できるとのこと。
ただ全部に影響があるので、ガッツリ変更したい場合には、プラグインフォルダの
「trust-form-tpl-.php」を「trust-form-tpl-フォームID.php」にコピーして書き換えたらよいとのこと。

データベースに保存しない

標準は保存されるが、個人情報の関係で保存させたくない場合には、
wp-config.phpに

  • define(‘TRUST_FORM_DB__SUPPORT’, false);

を加えればよい。

お問い合わせフォーム座談会

※最初のセッション前の挨拶の時に「ポストイットを渡すので、何か聞きたいことがあったら貼っといて〜」というお話が。

はんなりカフェ(体験記はこちら)モドキを座談会ということでやってみようという試みが最近続いてますね。
今日はポストイットを使ってました。話し合った内容のうち「最も盛り上がった内容」「これは他のテーブルではやってないと自信を持てる内容」の2つを持って他のテーブルに移動、そこで議論していた内容と合わせて新たな何かを生み出すというもの。また@as_chachamaruさんこと瀬戸さんがまとめてFacebook(WordBench京都)のどこかにアップされるとのこと。

ここでは私のいたテーブルで盛り上がった話を少し紹介しますね。

画像認証(CAPTCHA)は鬱陶しい

人が見て理解できない画像認証が横行していて、非常に使いづらく顧客が避ける傾向にあるとのこと。
これは人が見て簡単に理解できる画像認証だと、OCRを始め技術を駆使したら簡単に突破されてしまうため、複雑化してきたんだろうと思いますが、確かに少し行き過ぎているよなぁと思います。

今回の第1セッションの方で紹介されていたContact Form 7 Honeypotで使われているHoneypotという手法が良さそうに思いますね。手法自体は有名ということで、人が入力できない隠し入力フォームをワナとして仕掛けておいて、コンピュータによる自動入力をしてきたときに、その隠し入力フォーム(コンピュータ側には通常の入力フォームに見える)に入力させ、それをもってスパムだと判断するもの。

プラグインのセキュリティは何を持って信頼できるの?

今に始まったことじゃないですが、何を持って信頼できるかというテーマ。
最終的にはプログラムコードを解析して調べるしかないけれど、それはプログラマでもかなり難しい(大規模なプラグインほど)ため、そう簡単ではない。「検索して悪い情報が1つでも見つかったらやめる」という手法を使っているという意見も出たが、たしかにそういった情報しかないなぁということを痛感した。「公式リポジトリに登録されているものは安心できるのでは?」という意見は、「それがどこまでチェックされているか分からないし信頼出来ない」というという意見も。

特に問い合わせフォームでは「クロスサイトスプリプティング攻撃」をされるとサイト改ざんの恐れもあることが指摘された。このあたりは、技術評論社のブログサイトの「第7回 いまさらながらクロスサイトスクリプティングの基礎の基礎」でうまく纏められているので知りたい方は読まれたらよいかなと思います。

Contact Form 7で投稿された問い合わせデータをデータベースに保存するには

  1. Contact Form to Database Extension
  2. Flaminco(http://contactform7.com/ja/save-submitted-messages-with-flamingo/ に説明)

の2つばかりが話題としてあがりました。

私は前者の方で「日本語ExcelのためのCSV出力」を作成して作者に取り込んでもらったことがありました。そのあたりは「WordPressプラグイン「Contact Form 7 to Database Extension」で日本語Excel出力が欲しい」でまとめています。

Excel出力のためのPHPコードの書き方を、本勉強会の間にいくつか試して成功したので、Contact Form to Database Extensionの方は拡張してみたいなと思います。

Contact Form to Database Extensionで登録されたデータを管理画面で編集できる

有料になりますが「Data Editor」を購入することで可能。現在、そのページが表示されるないですね。こっちの方からアクセスするとなんとか出ますね(私のPCの調子が悪いだけのような気がする、PRAMクリアするか・・・)。

という感じでした〜。

2013年1月13日 木谷

広告

第11回WordBench京都に参加して(1/13)」への4件のフィードバック

  1. ピンバック: WordPressプラグイン「Contact Form 7 to Database Extension」で日本語Excel出力が欲しい part2 « Kimiya Kitaniの徒然なるブログ

  2. ピンバック: Premium Wordpress Theme、HYPAXでサイトを作る

  3. >人が見て理解できない画像認証が横行していて、非常に使いづらく顧客が避ける傾向にあるとのこと。

    理解できない画像認証だと、使いづらい以前に使えないのではないでしょうか

  4. 発表者のコメントを意訳したわけですが、その通りだと思います。
    だから皆避けると。分かりやすくて強固な画像認証がいいのですが、それは使えないので最近はHoney Potを活用した迷惑メール対策プラグインが流行ってますね。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中