MW WP Form のセレクトボックスで「選択してください」を空欄とみなす最も簡単な方法(JavaScript 非使用)
カテゴリー: WordPress
この記事は2017年4月19日に書かれたものです。情報が古い可能性がありますのでご注意ください。
WordPress のメールフォームプラグイン「MW WP Form」のセレクトボックスで、先頭に「選択してください」と表示してこれを空欄とみなす方法として、サポートフォーラム等で紹介されている方法は、次のように JavaScript を使う方法です。
管理画面でセレクトボックスを配置するときに
[mwform_select name="hoge" children=",山,海,川"]
のような感じでchildrenの最初に , を入れます。
これでvalueが空の項目が追加されます。
このままだと「選択してください」の表示がされないので、JavaScriptを使い<script type="text/javascript"> jQuery( function( $ ) { $( '#mw_wp_form_mw-wp-form-710 select option[value=""]' ) .html( '選択してください。' ); } ); </script>
としてやると表示されるようになります(セレクタは適当に合わせてください)。
ただ、これだと option 要素の内容(label)がないので HTML5 の文法的にはバリデーションエラーとなります。もっとも、MW WP Form では form 要素の action 属性の値が空なので、ここもバリデーションエラーとなるのですが。
で、いろいろ試していたら、MW WP Form の機能だけで簡単に、先頭に「選択してください」と表示してこれを空欄とみなす処理ができることがわかりました。
セレクトボックスを配置する際に次のように記述するだけで OK です。
[mwform_select name="hoge" children=":選択してください,山,海,川" post_raw="true"]
このように children の最初に “ :選択してください,
” を入れ、ショートコードの記述内に “ post_raw="true"
” を追加するだけです。
この “ post_raw="true"
” は、“ キー1:値1,キー2:値2
” のように選択肢を「:」で送信値と表示値に分割したとき、送信値をメールで送信するようにするための記述(MW WP Form では通常は表示値がメールで送信される)で、フォームタグジェネレーターで挿入する際に「メールで送信する値」にチェックすると追加されるオプションタグです。
これにより、「選択してください」の value 値(送信値)が空となり、必須項目のエラーチェックにも引っ掛かるようになります。
この場合、“ children=":選択してください,1:山,2:海,3:川"
” とか “ children=":選択してください,山:山,海:海,川:川"
” などと全ての選択肢を送信値と表示値に分割する必要はなく、“ children=":選択してください,山,海,川"
” とすれば「選択してください」以外の選択肢は表示値と同じ送信値が入ります。
なお、冒頭の JavaScript を使った方法は、3年以上も前に MW WP Form の開発者様ご自身がサポートフォーラムで答えていらしゃる方法で、これを引用して紹介している記事が散見されますが、上記の送信値をメールで送信するオプションがバージョン 2.3.0 で追加される以前のものです。
ここで紹介した方法が最も簡単で、ソースコードも文法的にもスマートではないかと思います。