Contact Form7のセレクトボックス（ドロップダウン）の初期値をカスタマイズする方法

ハシビィくん

Contact Form7のセレクトボックスが最初から選択されている状態でユーザーにきちんと選んでもらえないっす！

カピーさん

それは初期値を設定していないな？ユーザーに優しくないからサクッと直しちゃおう。

first_as_label “選択してください”を記述

Contact Form7のセレクトボックスにて、

[select menu-399 "お問い合わせ" "採用について" "取材" "その他"]

このような内容ですと、初期値は先頭の「お問い合わせ」が選択された状態になります。

入力欄を例えば「必須」にしたとしても、初期状態で既に「お問い合わせ」を選んだことになっているので、そのまま送信できてしまします。

「必須」項目として、きちんと選んでもらい。ユーザーに分かりやすいフォームにしたいのなら、first_as_label “選択してください”と記述してください。

“選択してください”の部分は好きに書き換えていただいて問題ありません。“未入力”や“選択されていません”などのように自由に使っていただけます。

first_as_label “選択してください”は運営者側が設定した初期値になりますので、必須項目とした際に、「選択してください」のままだとエラーメッセージが表示される仕組みになっています。

具体的な記述イメージは以下のようになります。

[select menu-399 first_as_label "選択してください" "お問い合わせ" "採用について" "取材" "その他"]

このように記述することで、入力欄の最初に「選択してください」が設定表示される形になります。

また、この「選択してください」は選択された値（答え）の扱いにはなりません。

【include_blank】でも設定可能

Contact Form7のコンタクトフォーム作成画面の「ドロップダウンメニュー」にて、「空の項目を先頭に挿入する」にチェックを入れていただくと、初期値を用意してくれます。私がテストしてみたところ、「以下から選択してください」というテキストで初期値が設定されていました。

「以下から選択してください」で問題ない場合は、この方法が1番簡単です。記述された状態のイメージが下記になります。

[select menu-399 include_blank "お問い合わせ" "採用について" "取材" "その他"]

include_blank以下の選択肢に関しては、通常通り"〇〇" "▲▲"などのように記述していただくと選択肢を増やすことが可能です。

「Contact Form7」のバージョンやテーマなどによって表示されるテキストは異なるかもしれません。過去の事例では、「– – –」などのように表示されていた事例もあるようです。

まとめ：Contact Form7のセレクトボックス（ドロップダウン）の初期値をカスタマイズする方法

Contact Form7を利用する上では必須のテクニックになりますので、きちんと知っておきましょう。