Contact Form 7のcheckbox・radioを使いやすくする方法

2014年10月4日

みんな大好き Contact form 7！ wordpressでサイトを作った事がある人は一度は聞いた事があるのでは？

お問い合わせフォームでも何でもそうですが、ラジオボタンやチェックボックスを作る時に、ボックスの部分だけじゃなく、文字の所をクリックしても選択出来ると便利で良いですよね。

こうゆうフォーム ↓ より、

こうゆうフォーム ↓ の方が、

ユーザビリティが高くて良いです。前者の場合はチェックボックスが小さくて、沢山あると押すのが面倒くさい。。

通常、Contact Form 7で、radioボタンやチェックボックスを作る時は、こんな感じで作ると思うんですが、

[html]
[radio Fruit "リンゴ" "ミカン" "スイカ" "キウイ"]
[checkbox Fruit "リンゴ" "ミカン" "スイカ" "キウイ"]
[/html]

フォーム１と同じ様に、文字を押しても選択できないフォームになります。

これに、ちょっとだけ文字列を加えるだけで、文字の部分を押しても選択が出来る様になります。

[html]
[radio Fruit use_label_element "リンゴ" "ミカン" "スイカ" "キウイ"]
[checkbox Fruit use_label_element "リンゴ" "ミカン" "スイカ" "キウイ"]
[/html]

「use_label_element」を途中に入れるだけなので簡単ですね！

日本人の方が作成されたプラグインなのですが、他にも沢山オプションがあって、色々試してみると面白いと思います