ラジオボタンの元のコードは下記になり、他の項目と違い、クラスも多く、単純ではありません。
<div class=”p-contact__form-control”>
<dt class=”p-contact__form-first-label”>
<label
class=”p-contact__label p-contact__label–required”
for=”your-radio”
id=”your-radio”
>
<span class=”p-contact__form-label-text”>お問い合わせ項目</span>
</label>
</dt>
<div class=”p-contact__form-radio-items”>
<label class=”p-contact__form-radio-item”>
<input
class=”p-form-radio”
type=”radio”
name=”your-radio”
/>
<span>お店のご利用・ご予約について</span>
</label>
<label class=”p-contact__form-radio-item”>
<input
class=”p-form-radio”
type=”radio”
name=”your-radio”
/>
<span>ギフト(贈り物)について</span>
</label>
<label class=”p-contact__form-radio-item”>
<input
class=”p-form-radio”
type=”radio”
name=”your-radio”
/>
<span>アルバイト応募について</span>
</label>
<label class=”p-contact__form-radio-item”>
<input
class=”p-form-radio”
type=”radio”
name=”your-radio”
/>
<span>その他</span>
</label>
</div>
</div>
ラジオボタンの項目は４つあります。下記のように入力しました。オプションは１項目
１行で入力します。 ここの項目をlabel要素で囲むへチェック。
下記の赤枠のようなコードが出来上がります。
ただ、他の項目のようにこれだけではうまくいきません。関連するクラスが多く、Contact Form7特有のクラスがついているため、CSSを変更しなくてはいけないようです。
この修正に何時間もかかってしまいました。。。