Contact Form7のラジオボタンのデフォルトを空欄にする

Contact Form7のラジオボタンのカスタマイズについてご紹介します。

ラジオボタンのデフォルト選択を空欄（どれも選ばれていない状態）にする、との設定です。

具体的には、以下のようなフォーム・ラジオボタンにします。

なお、通常はこうです。

ラジオボタンの最初の項目が選択された状態になっています。

なぜわざわざその設定をするかというと、「誤ったラジオボタンが選択されていることに気づかないままフォームを送信する」という可能性があるためです。

空欄にしておけば、ラジオボタンを見て「選ぶ」という行為をしないと送信できないため、ミスの可能性を下げることができます。

設定はごく簡単ですので、必要な方はどうぞご一読ください。
（すでにラジオボタンを設置してあるなら、1分で済みます）

ラジオボタンの設置

まずは、ラジオボタンを設置します。

※すでにフォームにラジオボタンがあるなら飛ばしてください。

Contact Form7（CF7）のフォーム編集画面で、「ラジオボタン」（右端）をクリック。

以下の画面で「オプション」、つまりラジオボタンの選択肢を入力します。

1行ごとに選択肢が増えていきます。

入力したら右下の「タグを挿入」をクリック。

以下の画面のようになります。

この時点で画面にフォームを入れると、このようになります。

すでにラジオボタンが選択されていますが、ひとまずフォームは設置できました。

次に、この選択状態を外す方法を説明します。

ラジオボタンのオプション

ラジオボタンを設置済みの方は、以下の処理をするだけで完了です。

ラジオボタンの選択を外すには、真ん中にある「default:1」を「default:0」にします。

この画面で、、、

このように変更します。わずか１文字。

修正したらフォームを確認してみましょう。

これで完了です。

ラジオボタンは自動で必須扱いにあるため、このまま送信しようとするとエラー表示されます。
そのため、選択漏れも起きません。

また、少し見た目を整えるコードをご紹介します。

こんな感じにする時のコードです。

<table>
  <tbody>
    <tr>
      <th>
        参加セミナー名・日程
      </th>
      <td>
        [radio radio-seminar use_label_element default:0 "犬のしつけセミナー 1/1" "犬のしつけセミナー 1/11"]
      </td>
    </tr>
  </tbody>
</table>
[submit "送信する"]

おまけ（ラジオボタンを縦並びにする）

ラジオボタンを横並びでなく、縦並びにしたい場合のCSSもご紹介します。

.radio-58 .wpcf7-list-item {
  display:block;
}

「radi-58」の箇所にコンタクトフォームのラジオボタンの名前を入れ、追加CSSなどに挿入ください。

このようになれば成功です。

以上です！