tarouken.com

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

email, mailing, contact

ページ内目次

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

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

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

スクリーンショット 2022 02 27 15.26.28



なお、通常はこうです。

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

スクリーンショット 2022 02 27 15.26.02

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

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


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


ラジオボタンの設置

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

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


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

スクリーンショット 2022 02 27 15.23.37


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

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

スクリーンショット 2022 02 27 15.24.39

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


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

スクリーンショット 2022 02 27 15.25.32


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

スクリーンショット 2022 02 27 15.26.02

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

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

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

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


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

この画面で、、、

スクリーンショット 2022 02 27 15.25.32 1


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

スクリーンショット 2022 02 27 15.26.19 1


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

スクリーンショット 2022 02 27 15.26.28


これで完了です。

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


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


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

スクリーンショット 2022 02 27 15.28.33
<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などに挿入ください。


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

スクリーンショット 2022 02 27 15.30.06


以上です!

コメントを残す

メールアドレスが公開されることはありません。

Share
わがい

わがい

プログラミング(Web制作)・ライティングに携わっています。 いくつかの会社で勤めて、2020年にフリーランスになりました。 苦手なことを避けつつ、好きなことで働けるような環境作りをめざしてコツコツやってます。 HTML/CSS/JSのほか、WordPress制作、特にElementorやSnow Monkeyといったローコードを用いた短納期での制作が得意です。 また生活・健康の水準を高めるため、米国株投資や筋トレもやってます。

最近の記事

ページ内目次