有限会社Willさんいん ホーム

サイトマップ

お問い合わせ

0852-28-6220(平日 9時30分から17時30分)

このページの位置: Home > フロントエンドエンジニアのblog > MW WP Form のセレクトボックスで「選択してください」を空欄とみなす最も簡単な方法(JavaScript 非使用)

フロントエンドエンジニアのblog

RSS

MW WP Form のセレクトボックスで「選択してください」を空欄とみなす最も簡単な方法(JavaScript 非使用)

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 で追加される以前のものです。

ここで紹介した方法が最も簡単で、ソースコードも文法的にもスマートではないかと思います。

この記事へのフィードバック

Facebook のコメントです。

コメントを残す

この記事のトラックバックURL:
https://www.will3in.co.jp/blog/article/select-as-blank-in-mw-wp-form/trackback/

このページの先頭へ