17
April
2012
5
comments reply

Contact Form 7 でラジオボタンを必須にする

みんな大好き Contact Form 7！駄菓子菓子 だがしかし、そのファースト・マトリックスが如き美しいアーキテクチャは、多くの場合、日本の悪しき慣習だったりクライアントのひとことだったり、ディレクターの思いつきによってメタメタにされてしまうのであった。。。

さて、今回は ラジオボタン

Contact Form 7 はなんでラジオボタンを必須にできないの？とみなさんおっしゃいます。ソレに対して Contact Form 7 のチェックボックス、ラジオボタン、メニュー のページでは、HTML の仕様 を見てみなはれと書かれています。Web 業界の中の人で仕様をちゃんと読んで仕事をする人の割合はだいたい消費税くらいなもんでしょうか。早く10%行くといいですね。
で、仕様を読んでみると「ラジオボタンてどれかひとつが選択されてなアカンやん。全部 OFF やったらブラウザがはじめのヤツを ON にしたったらええやん。ほんでもブラウザかてアテにならんでアンタがどれか ON にしとき。絶対やで。」言うてはります。
そう、必須も何もラジオボタンというのはハジメから「どれかひとつを選ばれてる状態にしておく」ものなのでした。さっそく default オプション で選択しておきましょう！

とは言っても

そんな HTML の仕様など関係無く毎日を生きてるおっちゃんおばちゃんとかは、未選択の状態から閲覧者にどれかひとつを選んで欲しいと言ってきます。未選択じゃなくても変わらないと思うのですが、そこはもうおっちゃんおばちゃんですから人の言うことなど聞く耳持ちません。Contact Form 7 ではそういうご要望に応えるため（かどうかは知らないぜ）に「チェックボックスを排他化する」という仕組みがあります。見た目はチェックボックスになりますが、選択できるのはひとつのみ。全 OFF の状態にもできます。すばらしい！

とは言っても2

おっちゃんおばちゃんですからラジオボタンの見た目がいいと言ってききません。じゃぁもう JavaScript で画像を使って見た目ラジオボタンにしたらええやんと思うのですが、そんなんメンドくさいやん、JavaScript 使えへんし、という方々のために以下のコードを捧げます。テーマの functions.php に貼付ければ OK◎

add_filter( 'wpcf7_validate_radio', 'my_validate_radio' ), 10, 2 );
function my_validate_radio( $result, $tag ) {
    $type = $tag['type'];
    $name = $tag['name'];

    if ( 'radio' == $type ) {
        if ( empty( $_POST[$name] ) ) {
            $result['valid'] = false;
            $result['reason'][$name] = wpcf7_get_message( 'invalid_required' );
        }
    }
        
    return $result;
}

※ radio* のタグ追加ではなくて、ラジオボタンならとにかく未選択は許さない仕様です。

動作確認バージョン
  • Contact Form 7 3.1.2

RELATED

     

5 Comments