kdcsライブラリー

お問い合わせメールフォームなどを作成するときラジオボタンやチェックボックスを使うことがあるが、contactform7のデフォルトではラベル付けが行われないためボタンやボックスを直接クリックしなければならない。

スマホではラジオボタンやチェックボックスが小さいためクリックしづらいので選択項目のテキスト部分を含めクリックできるようにしたい。

contactform7では、個々のチェックボックス(またはラジオボタン)を タグで囲む「use_label_element」が用意されている。

例：個人と法人を選択してもらうラジオボタン

<p>[radio your-type use_label_element "個人" "法人"]</p>

出力されるhtml

<p><span class="wpcf7-form-control-wrap your-type"><span class="wpcf7-form-control wpcf7-radio"><span class="wpcf7-list-item first"><label><input type="radio" name="your-type" value="個人" />&nbsp;<span class="wpcf7-list-item-label">個人</span></label></span><span class="wpcf7-list-item last"><label><input type="radio" name="your-type" value="法人" />&nbsp;<span class="wpcf7-list-item-label">法人</span></label></span></span></span></p>

ラジオボタンを横並びにする場合のcss
※wpcf7-list-item-labelというクラスにマージンを加え項目の間隔調整を行う

#mailform input[type=radio] {
    display: inline-block;
}
.wpcf7-list-item-label {
    margin: 0 30px 0 0;
}

「use_label_element」を知る以前の記述
個々の選択項目にラベル付けは行え、出力もされるが、未選択の場合name属性のyour-typeがcontactform7内で処理されないため[your-type]のテキストが出力されてしまう。

<p>個人または法人を選択してください<br><span class="wpcf7-list-item"><input type="radio" name="your-type" id="personal" value="個人"><label class="wpcf7-list-item-label" for="personal">個人</label></span><span class="wpcf7-list-item"><input type="radio" name="your-type" id="office" value="法人"><label class="wpcf7-list-item-label" for="office">法人</label></span></p>