WordPress: Contact Form 7 をカスタマイズしてみた

応募フォーム的なものを作らなければならなくなったので、楽できないかなあ?
と調べたら、簡単! シンプル! Contact Form 7がいいみたい。

でも、シンプルすぎる故の落とし穴にはまってカスタマイズしまくるハメになったというお話です。

AjaxZip3を使って住所検索を簡単に実装

応募者情報の項目としてありがちな住所検索はAjaxZip3と組み合わせればさくっと実装完了。
やるじゃん! 簡単!

cf7-1-1

落とし穴1:バリデーション諸々がイマイチすぎる・・・

フォームができたぞ!
telフィールドがあるということは、その辺の書式チェック・補正もバッチリか!
ということで目をキラキラしながら入力、送信・・・っと!

次におまるくんが目にしたのは悲しい現実でした。
cf7-2
お、おう・・・!
全角入力したからな!!

これ、前時代的なフォームのやつや・・・。

埋め立て作業1:書式チェック・補正機能を追加しよう!

この時点で既に沸いてきた、もうベタ書きでフォーム作った方が早いやん・・・。
という気持ちに蓋をして。

書式補正はクライアントサイドでかけつつ、自前の書式チェックを付け加えるなら、こうかなぁの実装をします。
class属性を書式補正のターゲットにしつつ、書式チェックの判断基準にも使うよ!
コントロールごとにadd_filterしてたら面倒でやってられなくなるので、wpcf7_validateにフックしてなるべく後の追加の手間を省く感じに仕上げます。

落とし穴2:エラーメッセージが入力項目をman2manでバッチリマーク

やったー! ひらがなやら半角に補正がかかるし、書式のチェックもちゃんとできるようになったよー。

cf7-3-1

ほら、見て見て! エラーも表示されてるし!
郵便番号なんて2つに分断されるぐらいにでかでかとぉぉぉう・・・。

あ、あかん・・・。

埋め立て作業2:エラーメッセージの取り纏めができるようにしよう!

どうやらリファレンスに示されている規定のclassやsizeといった属性だけでなく、勝手属性をタグ内に記述すれば、$tag[‘options’]として取得できるようなので、

勝手属性 mergeerror を追加して、「ここのエラーはこっちに一括表示してね」の指定ができるようにしてみます。

テンプレートのzip1に、エラーが出たらzip2に表示してよ を指定。

WPCF7_Validation::$containerや、 $invalid_fields[‘idref’]が何をしてるのか実は追いきれていないけれど、置き換えてもたぶん問題ないんじゃね!?

という適当な推測の元、全てのエラーチェックが出そろった頃合いを見て、エラー内容の取り纏め結果を newで再構築しておきかえてしまうという若干強引な手段で対応してみました。

落とし穴3 : セットと言えば、同一入力チェックは?

郵便番号のセット項目エラーが纏まったぜ!!

cf7-4

そういえば、複数入力項目のセット・・・と言えば、
タイプミス防止のために、
メールアドレスをもう一度入力してください。
とか、パスワードをもう一度入力してください。

なんてのがよくありますよね。
そして、簡単! シンプル! だと、当然そういうの、ない? ですよねー。

埋め立て作業3 : 同一入力チェックな複数項目チェックを実装しよう

とりあえず定番らしいメールアドレスの入力確認かな?
を実装してみます。

タグの種別単位でチェックを追加するのもいいですけど、
似たようなチェックで都度、add_filterしてコードを増やしていくのは嫌なのでエラーの取り纏め同様、独自の属性を作って対応することにします。

confirm:グループ名 を指定すると、同一グループ名の入力値が一致しないとエラー! の実装です。

俺たちの戦いはまだはじまったばかりだ

cf7-5

よし、内容一致チェックもできたよー。
この辺までの実装で、やっとこさ「それっぽいフォーム」を使えるようになったかなあ。
のレベルにたどり着いた感じです。

他にも目に付くところはあるけれど、今回はここまで!
俺たちの戦いはまだ始まったばかりだ!