プラグインMW WP Formよく使うフォームタグを深掘り – はじめてのWordPress

WordPressのプラグイン「MW WP Form」では、「フォームタグジェネレーター」機能により初心者でも簡単にフォームが作れる優れものです。

MW WP Formの基本的な使い方は『プラグインMW WP Formで問合せフォームを作る』という記事で説明しています。

その記事では、テキスト、メール、テキストエリアの３種類のフォームタグを使ったお問い合わせページの作り方を解説。メールの入力では、確認のため２回入力し、それぞれが一致するかどうかチェックする機能の設定についても解説しました。

今回はそのときに記事の中では紹介できなかった、MW WP Formでよく使われる、次のフォームタグの設定方法を深掘りしていきます。

チェックボックス・ラジオボタン・セレクトボックス
日付ピッカー・年月ピッカー
電話番号
Numberフィールド
ファイルアップロード・画像アップロード

合わせてバリデーションルールについても、説明しますので参考にしてください。

バリデーションルールとは、必ず入力することを求める「必須項目」指定や「カタカナ入力」、「半角英数字入力」など、管理者の求める入力規則を指定できる機能です。

指定された規則どおりに入力されないとエラー表示され、正しく入力するよう促すことができます。

2022年3月17日追記

MW WP Formは最新バージョンの WordPress で使用した場合は互換性の問題が発生する可能性があります。
フォームを作成するにはプラグイン「Contact Form 7」のご使用をお勧めします。

Contact Form 7については以下のページで紹介しています。

よく使われるフォームタグ
よく使われるバリデーションルール
バリデーションで制限をかけたら注意したいこと
まとめ

よく使われるフォームタグ

ここでは、よく使われるフォームタグを以下の種別に分けて説明します。

チェックボックス・ラジオボタン・セレクトボックス
日付ピッカー・年月ピッカー
電話番号
Numberフィールド
ファイルアップロード・画像アップロード

それぞれ

概要
フォーム詳細設定

について説明しますので、順に読み進めて参考にしてください。

【注意】フォームタグには「name」(名前)を設定する必要があります。
「name」は日本語でも英数字でも構いませんが、誤動作の原因になりますので、同一フォーム内に同じ「name」をつけてはいけません。

チェックボックス・ラジオボタン・セレクトボックス

概要

チェックボックス・ラジオボタン・セレクトボックスは、表示された選択肢から希望する選択肢を選択できる機能です。

違いは

【チェックボックス】

複数選択が可能。画面の表示された□をクリック（タップ）する。

【ラジオボタン】

１つだけ選択可能。画面の表示された○をクリック（タップ）する。

【セレクトボックス】

１つだけ選択可能。選択肢がプルダウンメニューで表示される。

選択肢の数やその内容によって、どのタイプを使うか、どれが使い勝手が良いかを考えて選びましょう。

フォーム詳細設定

フォームの詳細設定画面では、３タイプ共通の項目と独自の項目があります。

それぞれの設定項目について説明しますので参考にしてください。

WordPressプラグインMW WP Formチェックボックス・ラジオボタン・セレクトボックスタグ詳細設定 — MW WP Formチェックボックス・ラジオボタン・セレクトボックスタグ詳細設定（クリックで拡大）

①選択肢

「今欲しい家具はなんですか？」という質問に対して、「ソファー、ベッド、テーブル」の３つの選択肢がある場合には、下図のように項目名を１項目１行で入力します。

WordPressプラグインMW WP Form　チェックボックス選択肢入力例 — MW WP Form　チェックボックス選択肢入力例

また、「:（コロン）」を使い「送信値と表示値」に分割することも可能です。

例えば、

1：ソファー
2：ベッド
3：テーブル

と入力すると

数字＝送信値
選択肢＝表示値

となります。

この場合、画面には

「ソファー　ベッド　テーブル」と表示値である選択肢のみが表示されます。

送信値にあたる数字は表示されません。

自動送信メールには、

ソファーが選択されれば「ソファー」と、ソファーとテーブルが選択されれば、「ソファー,テーブル」と表示値である選択肢のみが送信されます。

②メールで送信する値

自動送信メールに送信値にあたる数字のみを送信したい場合は、

「メールで送信する値」欄の

「選択肢を「:」で送信値と表示値に分割したとき、送信値をメールで送信」にチェックします。

WordPressプラグインMW WP Form　チェックボックス送信値指定例 — MW WP Form　チェックボックス送信値指定例

自動送信メールには、

ソファーが選択されれば「1」と、ソファーとテーブルが選択されれば、「1,3」と送信値のみが送信されます。

この場合も、画面には

「ソファー　ベッド　テーブル」と表示値である選択肢のみが表示されます。

送信値にあたる数字は表示されません。

なお、10：00のように「:（コロン）」を表示したい場合は「10：:00」と「:（コロン）」を２つ使います。

③初期値

選択肢の中から一つを選び入力しておけば、その選択肢が選択状態になった状態で表示されます。

WordPressプラグインMW WP Form　チェックボックス初期値入力例 — MW WP Form　チェックボックス初期値入力例

④区切り文字（チェックボックスのみ）

複数選択された場合、自動送信メールに指定した区切り文字で区切られて送信されます。

初期値では「,（カンマ）」が設定されています。

WordPressプラグインMW WP Form　チェックボックス区切り文字入力例 — MW WP Form　チェックボックス区切り文字入力例

⑤表示方法（チェックボックス・ラジオボタンのみ）

垂直に配置するにチェックすると、選択肢が１行ずつ並んで表示されます。

MW WP Form　チェックボックス垂直配置指定例

WordPressプラグインMW WP Form　チェックボックス垂直表示例 — MW WP Form　チェックボックス垂直表示例

非選択では並列に表示されますが、ページの表示幅によっては、下図のように選択肢の途中で改行されることがあるので注意しましょう。

特にスマートフォンでは機種やそれぞれの設定によって改行の位置が大きく変わりますので、垂直に配置にすることをお勧めします。

日付ピッカー、年月ピッカー

概要

カレンダーから該当する年月日または年月を選択できる機能です。

WordPressプラグインMW WP Form　日付ピッカー入力画面キャプチャ — MW WP Form　日付ピッカー入力画面の例

WordPressプラグインMW WP Form　年月ピッカー入力画面キャプチャ — MW WP Form　年月ピッカー入力画面の例

フォーム詳細設定

WordPressプラグインMW WP Form日付ピッカー・年月ピッカータグ詳細設定 — MW WP Form日付ピッカー・年月ピッカータグ詳細設定

①初期値

空欄では表示した時点での年月日、または年月が初期値として表示されます。

年月日または年月設定すると、その時点が初期値として表示されます。

②placeholder

ここに入力したテキストは、入力欄に薄い文字色で表示され、入力規則のガイドになります。

電話番号

概要

入力フィールドが市外局番-市内局番-加入者番号と３分割され表示されます。

WordPressプラグインMW WP Form　電話番号入力画面キャプチャ — MW WP Form　電話番号入力画面の例

電話番号の入力ではハイフンを入れる、入れないと指定される場合があり、面倒に感じてしまうことがあります。

とはいえ、ハイフンあり・なしの指定が無いと、どちらにすれば良いのか迷ってしまったりもします。

３つに区分されていれば順に入力するだけなので、お客様にストレスなくご利用いただけます。

フォーム詳細設定

WordPressプラグインMW WP Form電話番号タグ詳細設定 — MW WP Form電話番号タグ詳細設定

①半角英数字に変換

チェックなしのままでは、全角数字で入力すると半角数字に自動的に変換されます。

チェックすると全角数字も半角数字もそのまま入力することができます。

一般的にはチェックなしのままにしておくと良いでしょう。

Numberフィールド

概要

上下の矢印を操作し、数値を選択する機能です。

WordPressプラグインMW WP Form　ナンバーフィールド入力画面キャプチャ — MW WP Form　Numberフィールド入力画面の例

通販サイトでは購入個数を入力する際に使われています。

フォーム詳細設定

WordPressプラグインMW WP Form Numberフィールドタグ詳細設定 — MW WP Form Numberフィールドタグ詳細設定

①min

選択可能な最小値を指定します。

空欄のままだとマイナス値が表示されますので注意しましょう。

②max

選択可能な最大値を指定します。

商品の在庫数や定員数など、対応可能な最大値を指定するときに役立ちます。

③step

指定した数値の間隔で、数値を指定できます。

“5”を指定すると、入力欄には「5、10、15…」のように数値が表示されます。

初期設定では“1”が設定されています。

ファイル・画像

概要

お客様が所有しているファイルをアップロードしてもらう機能です。

WordPressプラグインMW WP Form　ファイル・画像アップロード画面キャプチャ — MW WP Form　ファイル・画像アップロード画面の例

フォーム詳細設定

WordPressプラグインMW WP Formファイル・画像アップロードタグ詳細設定 — MW WP Formファイル・画像アップロードタグ詳細設定

よく使われるバリデーションルール

指定したフォームタグに対し、必須項目や入力規則を設定することができます。

ここでは、バリデーションルールを以下の種別に分けて説明します。

必須項目設定
入力テキスト種類制限
項目形式制限
入力文字数制限
アップロード制限

必須項目設定

必ず入力をする項目を指定できます。

チェックボックス・ラジオボタン・セレクトボックスを必須項目にする場合は「必須項目（チェックボックス）」を選択します。

必須項目に指定された項目では、未入力、未選択状態で送信することができません。

他のバリデーションルールと合わせて指定することも可能です。

WordPressプラグインMW WP Form　必須項目チェックボックスエラー表示例

バリデーションルール	利用を推奨するフォームタグ	エラー表示例
必須項目	全てのフォームタグ（チェックボックス・ラジオボタン・セレクトボックスを除く）
必須項目（チェックボックス）	チェックボックスラジオボタンセレクトボックス

入力テキストの種類制限指定

WordPressプラグインMW WP Form　バリデーションルールテキスト入力規則設定 — MW WP Form　バリデーションルールテキスト入力規則設定

入力できるテキストを半角英数字やカタカナなど限定させることができます。

異なる種類のテキストを入力するとエラー表示され、送信することができません。

バリデーションルール	利用を推奨するフォームタグ	エラー表示例
半角数字	テキストテキストエリア
半角英字	テキストテキストエリア
半角英数字	テキストテキストエリア
カタカナ	テキストテキストエリア
ひらがな	テキストテキストエリア
ひらがなまたはカタカナ	テキストテキストエリア

項目形式制限

WordPressプラグインMW WP Form　バリデーションルール形式別入力規則設定 — MW WP Form　バリデーションルール形式別入力規則設定

テキスト・テキストエリア、および郵便番号や電話番号などの各形式フォームタグに対応したバリデーションルールを指定します。

メールアドレスや電話番号などのバリデーションルールを指定すると、その形式以外の文字列が入力されるとエラー表示され、入力間違いが無いよう促すことができます。

バリデーションルール	利用を推奨するフォームタグ	エラー表示例
郵便番号	郵便番号テキスト・テキストエリア
電話番号	電話番号テキスト・テキストエリア
メールアドレス	メールテキスト・テキストエリア
日付	日付ピッカーテキスト・テキストエリア
日付（年月）	年月ピッカーテキスト・テキストエリア
URL	URL テキスト・テキストエリア