WordPress:「MW WP Form」のセレクトボックスをjQuery(JavaScript)なしで初期値ありの必須項目に設定する方法

  • Posted on
  • Category : WordPress
WordPress:「MW WP Form」のセレクトボックスをjQuery(JavaScript)なしで初期値ありの必須項目に設定する方法

WordPressで簡単にフォームを実装できるプラグイン「MW WP Form」で、セレクトボックスを初期値ありの必須項目に設定する方法です。以前はjQuery(JavaScript)を使って実装していたのですが、使用せずに設定する方法を教えてもらったので備忘録です。

※紹介している内容は、MW WP Form Ver 3.2.1 で検証した内容になります。
「MW WP Form」についての基本的なインストール・使用方法については割愛しているので、使用したことない場合などはプラグインの詳細も含め「MW WP Form」で確認してください。

以前はjQueryが必要だった

このカスタマイズを実装していた具体的バージョンはすぐ思い出せないですが、以前はselectに初期値を設定して且つ必須項目にしたいというときは、下記フォーラムで「MW WP Form」作者の方が回答しているようにjQueryを用いて実装する必要がありました。

方法としてはフォーム作成時にセレクトボックス項目先頭に空項目を追加して未選択時にエラーが表示されるようにしつつ、そこにjQueryを使って初期値となる文言を追加するというものになり、この実装方法を知って以降同じようなことをする場合はこの方法を基本的に利用していました。
ただ、どのバージョンからかjQueryを使用せずにその動作ができるようになっていたらしく、以下で紹介する方法を使うことでjQueryなしでも初期値ありの必須項目に設定したselectを設置できます。

jQueryなしで初期値ありの必須項目に設定する

結論から言うと、jQueryなしで初期値ありの必須項目が設定されたselectを設置したい場合は、post_rawという送信値と表示値を分割するオプションを使って実装することができます。

まず、セレクトボックスを挿入する際は「選択肢」項目で設定したい項目を1項目につき1行という形で入力していきますが、この1行目に初期値として設定したい文言を入力します。
その際、その文言の先頭に:を記述し、例えば初期値を「選択してください」にしたければ1行目には:選択してくださいという形で入力します。
その後、「選択肢」項目下にある「メールで送信する値」項目にチェックを入れ、その他設定の必要があれば入力・選択をして完了ボタンを押下すれば、下記のようなショートコードが出力されているのを確認できます。

[mwform_select name="example" children=":選択してください,項目01,項目02,項目03" post_raw="true"]

普段から使い慣れているとか既にselectが設置済みという人は、childrenの先頭に:付きで初期値としたいものを記述して、post_raw="true"を記述するというのを直接変更する形でももちろん問題ないです。

あとは、このselect要素に対して必須項目のバリデーション設定を行ってあげれば、以前はjQueryを使って実装していた初期値ありで必須項目に設定するいうと動きをjQueryなしで実装することができます。

Back to Top

WordPress:「MW WP Form」のセレクトボックスをjQuery(JavaScript)なしで初期値ありの必須項目に設定する方法

WordPress:「MW WP Form」のセレクトボックスをjQuery(JavaScript)なしで初期値ありの必須項目に設定する方法

/ WordPress

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。