Contactform7にプレビュー機能は付けられるのか?

WordPressのプラグインのContaform7という、お問い合わせなどによく使われるメールアプリケーションがあります。

先日、フォーラムのRSSフィードを見ていて、このプラグインにプレビュー機能は付けられないでしょうか?と言う質問が投げられていました。
が、以前にも、同様の質問はあったようで、リンクが投げ込まれていました。

その中では、Contactform7を初めとするフォームメールプラグインは、ほとんどのものが確認画面は表示しないタイプが多いとのこと。

一つの解決策として提案されていたのは、外部のCGIなどのwebメールをiframeで読み込む方法。
デザインが自由に変えられものを選択して、WordPress側のデザインに合わせれば、見た目的には違いはわからなく出来ると。

確認画面が必要な理由とはなんでしょう?
メールアドレスや、必要な項目の記入し忘れを防止するため?

確認画面を経由させることによって、スパムやいたずらへの抑止効果を狙っているもの?
まあ、いろいろあると思います。
とりわけ、おいらが知る範囲の企業系のサイトでは確認画面があるものが多いですね。
と、言うことは確認画面を用意する方が比較的、求められていると言うことなのでしょうね。

記入し忘れなどを防止するためと言うことなら、バリデーションを付加すれば事は足りそうですよね。

確認画面とまでは行かなくても、入力して、次の項目に移った瞬間にバリデーションチェックを掛けて、その結果をすぐさま表示できれば、事は足りるような気がします。
だとすれば、プラグインの改造なんて大げさなことをしなくても実現できそうです。

WordPressに、標準で使用されているjavascriptライブラリのjQueryのプラグインの中にもこのバリデーションをリアルタイムでやってくれるものがありますから、これを使えば良さそうです。

しかし…どうしても、確認画面が欲しいっ!

そんな場合は、javascriptを使えば、確認画面もどきは作れると思います。
まあ、実際に他のCMSのwebメールプラグインでも同様の話があり、作ってみた経験があります。
きちんと検証していないので、たぶんという思い込みの話になりますが、Contactform7には実は、送信後のメッセージを表示するために、空のdiv要素があらかじめ仕込まれているようです。

そこに、入力されたフォームの内容を確認画面よろしく、要素を追加してあげることで、確認画面もどきを作ることが出来そうな気がします。
その場合、送信ボタンに、javascriptから、submitイベントを一時横取りして、前記の確認画面部分を本野からの状態に戻してあげてから、submitイベントに渡してあげれば、その後はContactform7が通常通りの処理が出来る…のではないか?と。

もう一つの方法として、新しいウィンドウを作り、その中に確認画面を構築する。

ただし、この方法はポップアップブロックに引っかかる可能性があるし、javascriptからの制御も複雑になりがちなので、きちんと作り込まないと役に立たなくなります。

新しいウィンドウを使わないで、thickboxやlightboxのような、仮想モーダルウィンドウを構築するプラグインを利用するのも一つの方法です…が、普通のhtmlのコンテンツを表示できるプラグインじゃないと使えません。当たり前ですけど(汗)

心当たりの処ではjQuery SuperBox!がhtmlコンテンツが表示できそうです。
ただし、おいらはjQueryの扱いは詳しくないのでコードは明示できませんけど…(^_^;

まあ、興味がわいたら挑戦してみるのは、ありかもしれませんね…w

1 Comment Add Yours

  1. ぐだぐだ@ひらひら

    Contactform7の作者様が、フォーラムで『title』属性を付加できませんか?と言う要望にお応えするようなコメントが出ていました。
    もしも、『title』属性がサポートされるようになると、プレビューは作りやすくなりますね。
    プレビューを作る際は、項目名を探し出さなければならないから、要素の属性から取得出来るようになれば、比較的簡単にプレビューを装備させることが可能になると思われます。
    期待しておきましょう。