Contact Form 7 のラジオボタンで必須入力を設定するには

カテゴリー: ホームページのこと

タグ: Contact Form 7 WordPress ラジオボタンの必須入力

Contact Form 7 は WordPress のプラグインとして高い人気があり、手軽にフォームを作成できて便利なので私も使うことがありますが、ラジオボタンを配置したときにちょっと困ったことがありました。

Contact Form 7 でチェックボックスを配置する画面には必須入力の指定があるのですが、ラジオボタンの画面にはそれがないんです。

例えば、こういうフォームを作りたいときにはラジオボタンの選択を必須にできないと困るわけです。

今まで私が PHP や ColdFusion でフォームを作成したときには、ラジオボタンはたいてい必須入力にしてあって、送信前にチェックを行っていました。

私が作るフォームだけではなく、ラジオボタンが必須入力になっているフォームはよく見かけます。

そのくらい当たり前に行われていることがなぜ Contact Form 7 でできないのか不思議に思って調べてみたところ、W3C 勧告ではラジオボタンが常に必須入力として扱われるということを知りました。

» http://www.w3.org/TR/html401/interact/forms.html#radio

上記のページの英文を訳すとこんなかんじになります。

ラジオボタンのうちの１つだけが常にチェックされています。
もしラジオボタンの <INPUT> 要素のどれにも CHECKED が指定されていない場合、ブラウザが先頭のラジオボタンにチェックをつけなければなりません。
ブラウザによって動作は異なりますので、ホームページ制作者はラジオボタンのどれかひとつがチェックされているようにすべきです。

へぇ～、そうだったのかぁ・・・ってかんじです。

たぶん、Contact Form 7 は W3C 勧告に準拠しているためにこういう仕様になっているんだろうと思います。

Contact Form 7 では以下のように default:1 を追加すると、フォームを開いたときに先頭のラジオボタンがチェックされた状態になります。(default:2 とすると2番目のラジオボタンにチェック)

[radio mail_news default:1 "受け取る" "受け取らない"]

W3C 勧告では、必須入力として必ずどれかを選ばせたい場合にはドロップダウン・メニューかチェックボックスを使いなさい、ということなんでしょうね。

でもやっぱりラジオボタンを使いたいなぁ・・・。

ちなみに、いくつかのブラウザ(Internet Explorer, Chrome, Firefox, Opera, Safari)で試してみたところ、ラジオボタンのどれにも CHECKED が指定されていない場合に先頭にチェックをつけるブラウザはありませんでした。

投稿者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

メールでのお問い合わせはこちら