WordPress + Lightning のサイト制作・カスタマイズ・サポートを承ります

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

ホームページのこと
WordPress サイト開設スターターパック

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

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

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

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

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

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

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

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

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

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

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

ラジオボタンのうちの1つだけが常にチェックされています。
もしラジオボタンの <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 サイト制作・カスタマイズ・サポートを承ります

このブログを運営している、魚沼情報サービスの対馬です。ブログをご覧いただき、ありがとうございます。

弊社は、WordPress を使用したサイト制作・カスタマイズ・サポートを全国どこからでも承っています。

ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン (VK Blocks Pro ・ VK Filter Search Pro) を使ったサイト制作・カスタマイズを最も得意としています。

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

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

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

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

ホームページのこと
シェアする
魚沼情報サービスをフォローする
魚沼情報サービスのブログ