この記事では「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は、
- テキストエリア
- チェックボックス
- ラジオボタン
- 送信ボタン
- 確認ボタン...etc
など設置してカスタマイズすることができます。
MW WP Formの導入方法
MW WP Formの導入方法は下記のとおりです。
１：プラグインのインストール
２：お問い合わせフォームの作成
３：ショートコードを埋め込む
プラグインのインストール
WordPress 管理画面のプラグインから「MW WP Form」を検索し、インストール→有効化します。（インストールしても「有効化」しないと使えないので注意しましょう）
有効化すると、管理画面左サイドバーに「MW WP Form」が追加されます。
お問い合わせフォームの作成
左サイドバーのお問い合わせをクリックして「新規追加」します。
新規追加をクリックすると、下記のような画面が表示されます。
「選択してください」のプルダウンメニューでは、フォーム内に挿入するテキスト項目や送信ボタン、ラジオボタンなどを選択することができます。
画面下部では、完了画面メッセージの設定やURL設定、バリデーションルールの設定をすることができます。
ショートコードを埋め込む
コンタクトフォームを表示する場合は、下記のショートコードをお問い合わせページ内に埋め込みます。
例えばオリジナルテーマなどで作成している場合は、管理画面の固定ページでお問い合わせページを作成し、page-contact.phpを作成して下記のコードを埋め込むと画面に表示されます。
<?php get_header(); ?>
<?php echo do_shortcode('[mwform_formkey key="39"]'); ?>
<?php get_footer(); ?>特にカスタマイズが不要な場合は、デフォルトの機能だけでも十分使用可能です。なお、フォームの見た目を変更したい場合は、検証ツールを開いてクラス名を確認しながらスタイルを適用していくといいでしょう。（MW WP Formの場合、独自のクラスで作成されています。）
MW WP Form のカスタマイズ方法
MW WP Formでは、下記の項目をカスタマイズすることができます。
〇 入力項目
- 日付ピッカー、年月ピッカー
- テキスト、テキストエリア、メール
- 電話番号、郵便番号
- Numberフィールド、Range フィールド、URLフィールド
- ファイル、画像、パスワード
〇 選択項目
- チェックボックス
- ラジオボタン
- セレクトボックス
〇 ボタン項目（button）
- 戻るボタン
- ボタン
- 確認ボタン、送信ボタン
〇 ボタン項目(input）
- 戻るボタン
- ボタン
- 確認ボタン
- 送信ボタン
- 確認・送信
〇 エラー項目
- エラーメッセージ
〇 その他の項目
- カスタムメールタグ
- hiddenフィールド
日付ピッカー、年月ピッカー
日付や年月を入力できるフォームを生成します。
下記は日付ピッカーの設定画面ですが、年月ピッカーも同様の画面です。
日付ピッカー、年月ピッカーでは、クラスやid属性、フォームのサイズを指定することができます。placeholderでは、例えば「日付を入力してください」などのテキストを表示することができます。
nameでは、作成するフォームの項目名を設定できます。
〇 表示結果
テキスト、テキストエリア、メール
テキスト、テキストエリア、メールではテキスト入力欄やメールアドレス入力欄を生成します。テキストエリアは、複数行の入力欄を生成します。
下記はテキストの設定画面ですが、テキストエリアやメールも同様の画面です。
テキスト、テキストエリア、メールでは、クラスやid属性、フォームのサイズを指定することができます。placeholderでは、例えば「テキストを入力してください」などのテキストを表示することができます。
〇 表示結果
電話番号、郵便番号
電話番号、郵便番号では、電話番号や郵便番号の入力欄を生成します。
下記は電話番号の設定画面ですが、郵便番号も同様の画面です。
電話番号、郵便番号では、クラスやnameを指定することができます。
〇 表示結果
Numberフィールド、Range フィールド、URLフィールド
Numberフィールドは数字を入力できるフィールド、Range フィールドはレンジ調整ができるフィールド、URLフィールドはURL入力フィールドをそれぞれ作成できます。
下記はNumberフィールドの設定画面です。Rangeフィールドも同様に、最小値や最大値、ステップなど設定することができます。
下記はURLフィールドの設定画面で、max-lengthでテキストフィールドに入力できる最大文字数を設定できます。
〇 表示結果
ファイル、画像、パスワード
ファイルと画像とパスワードは、それぞれの入力フィールドを生成します。
下記はファイルの設定画面で、画像も同様の設定画面になります。
下記はパスワード設定画面で、max-lengthでテキストフィールドに入力できる最大文字数を設定できます。
〇 表示結果
チェックボックス、ラジオボタン、セレクトボックス
チェックボックスとラジオボタン、セレクトボックスはそれぞれのフォームを生成します。
下記はチェックボックスの設定画面ですが、ラジオボタンやセレクトボックスも同様の画面になります。選択肢の部分で、チェックボックスとラジオボタン、セレクトボックスに表示する項目を入力することができます。
〇 表示結果
戻るボタン、ボタン、確認ボタン、送信ボタン
戻るボタン、ボタン、確認ボタン、送信ボタンはボタンを生成します。
inputタイプとbuttonタイプのボタンがあります。
下記は、確認・送信ボタンの設定画面ですが、他のボタンも同様の画面になります。それぞれの設定画面では、ボタンの中に表示するテキストを入力することができます。
表示結果
戻るボタンはこの時点で空欄になっていますが、例えば確認ボタンをクリックして確認画面などに遷移すると、戻るボタンが表示されるようになります。確認ボタンも、確認画面に遷移すると「送信する」などの送信ボタンが表示されるようになります。
エラー項目
エラー項目は、エラーメッセージフォームを生成します。
入力画面には、エラーメッセージを表示したいフォームのname属性を指定します。
例えば、テキスト入力フォームのデフォルトで表示されるエラー表示は「表示しない」にチェックを入れます。（これをしないと、エラーメッセージが2つ表示されてしまう）
テキスト入力フォームのname属性を、上記の「エラーを表示したい要素のname属性」蘭に入力します。
下記のように、エラーメッセージのkeysの値とテキストのname属性が同じにします。
例えば、テキストを必須項目にして空欄のまま送信ボタンをクリックすると、下記画面のように任意の場所にエラーメッセージが表示されます。デフォルトだと、テキスト入力フォームの直下にメッセージが表示されます。
このように、エラー項目は任意の場所にエラーメッセージを表示させたい場合に使用します。（この際、テキストのフォームのように、デフォルトでついているエラーメッセージは非表示にしましょう）
カスタムメールタグは、フィルターフックで返される値を画面表示することができます。例えば、会員番号に紐づくデータを確認画面に表示して、メール送信、ということができます。
hiddenフィールドはユーザーからは見えないものの、フォームのデータをサーバーに送信するために使用されるフィールドです。
完了メッセージ
下記の項目で、完了画面のメッセージを設定できます。
例えば「お問い合わせありがとうございます」のようなメッセージを入力しておけば、送信ボタンをクリックして完了画面に遷移したときに、そのメッセージが表示されます。
URL設定
URL設定では、入力画面や確認画面、完了画面のURLを設定することができます。
例えば、入力画面では「https://test.com/contact/」、確認画面では「https://test.com/confirm/」、完了画面では「https://test.com/complete/」のように設定すると、入力画面で送信ボタンや確認ボタンをクリックすると、設定した確認URL→設定した完了URLにそれぞれ遷移できるようになります。
オリジナルテーマで作成している場合は、
- 入力画面：page-contact.php
- 確認画面：page-confirm.php
- 完了画面：page-complete.php
のようにphpファイルを作成し、それにあわせて管理画面でもそれぞれの固定ページを作成する必要があります。
バリデーションルール
バリデーションルールを下記の画面で設定できます。バリデーションとは、フォームの入力内容が要件に合っているかチェックするものです。
例えば、バリデーションルールでテキストフォームを必須に設定すれば、テキストフォームを空欄のまま送信しようとするとチェックに引っかかり、入力を促されます。
下記のように、テキストフォームでname属性に「textform」と設定し、
バリデーションルールで、バリデーションを適用する項目に設定したname属性を入力し、必須項目にチェックをいれます。
画面でテキストフォームを空欄のまま送信しようとすると、下記のようにエラーメッセージが表示されます。
このように、フォームの項目ごとに設定できます。
自動返信メール
MW WP Formの画面右側に自動返信メールの設定ができます。
〇 自動返信メール
- 件名：件名に表示されるテキストを入力します。
- 送信者：サイト名や会社名などを入力します。
- Replay-to（メールアドレス）：自動返信メールの返信先を指定します。
- 本文：返信メールの本文を入力します。
- 自動返信メール：自動返信メールを送る相手のメールアドレスを入力します。
- 送信元：送信元のメールアドレスを入力します。
本文では例えば、お問い合わせフォームの設定画面でテキストフォームに下記のように設定したとすると、
自動返信メールの本文では、下記のように{}の中にnameで設定した値を入力します。
これで自動返信メールでは{}の部分に相手の名前が入るようになります。
まとめ
MW WP Form のカスタマイズ方法について解説しました。WordPressでお問い合わせページを作る際は実際に手を動かして実装してみましょう。
Contact form 7の記事については、下記の記事で解説していますのであわせてご覧ください。
