[wp]ContactForm7のcheckboxとradioの構成

デザイン時に毎度困る。

こうなってます

こうしたとして

ラジオ
[radio radio-932 use_label_element "選択肢 1" "選択肢 2" "選択肢 3"]

チェックボックス
[checkbox checkbox-906 use_label_element "選択肢 1" "選択肢 2" "選択肢 3"]

承諾確認
[acceptance acceptance-201 optional] 同意する条件をここに指定する。 [/acceptance]

こうなる

ラジオ
<span class="wpcf7-form-control-wrap" data-name="radio-932">
    <span class="wpcf7-form-control wpcf7-radio">
        <span class="wpcf7-list-item first"><label><input name="radio-932" type="radio" value="選択肢 1"><span class="wpcf7-list-item-label">選択肢 1</span></label></span>
        <span class="wpcf7-list-item"><label><input name="radio-932" type="radio" value="選択肢 2"><span class="wpcf7-list-item-label">選択肢 2</span></label></span>
        <span class="wpcf7-list-item last"><label><input name="radio-932" type="radio" value="選択肢 3"><span class="wpcf7-list-item-label">選択肢 3</span></label></span>
    </span>
</span>

チェックボックス
<span class="wpcf7-form-control-wrap" data-name="checkbox-906">
    <span class="wpcf7-form-control wpcf7-checkbox">
        <span class="wpcf7-list-item first"><label><input name="checkbox-906[]" type="checkbox" value="選択肢 1"><span class="wpcf7-list-item-label">選択肢 1</span></label></span>
        <span class="wpcf7-list-item"><label><input name="checkbox-906[]" type="checkbox" value="選択肢 2"><span class="wpcf7-list-item-label">選択肢 2</span></label></span>
        <span class="wpcf7-list-item last"><label><input name="checkbox-906[]" type="checkbox" value="選択肢 3"><span class="wpcf7-list-item-label">選択肢 3</span></label></span>
    </span>
</span>

承諾確認
<span class="wpcf7-form-control-wrap" data-name="acceptance-201">
    <span class="wpcf7-form-control wpcf7-acceptance optional">
        <span class="wpcf7-list-item"><label><input aria-invalid="false" name="acceptance-201" type="checkbox" value="1"><span class="wpcf7-list-item-label">同意する条件をここに指定する。</span></label></span>
    </span>
</span>

階層は深いけど構成自体は一貫してるしSCSSで作れば散らかることはなさそう。

「wpcf7-radio」「wpcf7-checkbox」「wpcf7-acceptance」を指定して組むのが良さそうですね。

とりあえず<label>の中に<input>と<span>があってよかった。これの有無でだいぶ変わる。