【この記事を読む前に】
「MW WP Form」は現在、脆弱性対応といった最低限のメンテナンスのみとなっており、WordPressのバージョンアップに伴って動作確認をする、ということは行なっていません。
既存のサイトでこのプラグインを使用しており、まだ別のプラグインへの移行準備が整っていない場合はこの記事も参考にしていただければと思いますが、もし新規のサイトに MW WP Form を使用しようとしている場合は別のプラグインにすることをおすすめします。
MW WP Form は無料で簡単にフォームを作成できるWordPressのフォームプラグインの一つです。簡単にフォームを作ることができますが、様々なカスタマイズができるのも MW WP Form の特徴です。
用途に合わせていろいろなことができるプラグインなので、基本的な使い方から今まで使用してきた設定方法をご紹介していきます。
確認画面付きのフォームを簡単に設置でき、問い合わせのデータ管理ができるのが MW WP Form の魅力です。
動作確認環境
まずはプラグイン追加画面から「MW WP Form」を検索しインストールし、有効化します。
【プラグインページ】
MW WP Form – WordPress プラグイン | WordPress.org 日本語
【公式ページ】https://mw-wp-form.web-soudan.co.jp/
有効化すると、管理メニューに【MW WP Form】という項目が追加されます。こちらをクリックすると一覧画面に移動するので「新規追加」をクリックしてフォームを作成していきます。
フォームの編集画面に移動したらまずはタイトルを設定しましょう。何のフォームか分かるタイトルにすればOKです。
タイトルの下に「選択してください」というセレクトボックスと「フォームタグを追加」というボタンがあります。このフォームジェネレーター機能を使って、フォームのコードを作成していきます。
ここからコードを生成せずとも直接コードを入力しても作成されます。慣れてきたらショートコードをコピペしてnameだけ変更する、といった書き方もできます。
「選択してください」の部分をクリックすると様々な入力項目が選べるようになっています。各フォーム項目によって適切なものを選んでいきましょう。
例としてテキスト入力のフォームタグを作ってみます。
項目から「テキスト」を選び「フォームタグを追加」をクリックすると以下のような画面に切り替わります。
name は必須項目です。nameには管理者が分かりやすいフォーム項目名を入力すればOK。name 以外の設定項目は空欄のままでも問題ありません。
必要な箇所を設定したら「Insert」をクリックします。
「Insert」をクリックすると本文のエディタにショートコードが追加されます。このショートコードがあることによってフォームの入力欄が生成されます。
↓
ショートコードだけではフォームの入力欄のみが生成されるだけなので、フォームの項目名も追加していきます。
↓
上記のままではフォーム欄に入力することはできますが、送信ができません。確認・送信・戻るボタンを追加していきます。
「ボタン項目」から設置するボタンを選びます。
（button）と（input）の2種類ありますが、どちらを使用しても確認や送信といった動作に違いはありません。CSSでのスタイルの当て方やJSで何かしら処理したいことがあるなど、場合によって適切な方を選びます。
CSSの適応範囲が広いのは button です。inputタグでは疑似要素が使えないため自由度が下がります。使用しているテーマによってCSSの作り方が異なると思うので、どちらが良いかわからない場合は実際に当てはめてみて確認してみて下さい。
どちらを使用しても問題はありませんが、一つのフォームで同じタグを設定するようにしましょう。
このボタンタグを設定すると、フォーム入力ページでは「確認画面へ」のボタンが表示され、フォーム確認ページでは「戻る」と「送信する」のボタンが表示されます。
確認ボタンや完了ボタンを設置すると、自動的にそのフォームの確認・完了画面のページが作成されます。
基本の作り方としてはフォームの項目名を入力し、フォームタグを設定するという形になります。各フォームタグの詳細設定について覚えていろいろな状況に対応できるフォーム項目を作れるようにしていきましょう。
本文入力エディタの下に「完了画面メッセージ」という欄があるので、ここに完了画面に表示させたい内容を入力すればフォームの完了ページで表示されます。
↓
【送信完了ページの例文参考】
【保存版】サンクスページのシーン別例文まとめ – 東京のホームページ制作 / WEB制作会社 BRISK
「完了画面メッセージ」の下に「URL設定」という欄があります。こちらは入力画面・確認画面・送信完了画面をそれぞれ別のURLにしたいときに設定します。
ここで何も設定していなければフォームを設置しているURL内で確認・完了ページの表示切り替えがされます。同じページ内で完結して問題なければ空欄のままで大丈夫です。
バリデーションは必須で入力してほしい場合や、ちゃんとしたメールアドレスの形式を入力してほしい場合などに使用します。他にも様々なバリデーションを設定できます。
ここではフォームでよく使用される「必須」のバリデーションを設定していきます。
下の方に「バリデーションのルール」という欄があるのでここでバリデーションを設定していきます。
「バリデーションのルールを追加」をクリックするとがバリデーションの入力設定欄が表示されるのでバリデーションを適用するフォーム項目と検証することを設定していきます。
今回は必須の入力欄を作りたいので、「必須」にチェックを入れます。「バリデーションを適用する項目」にはバリデーションをかけたいフォーム項目の name の値を入力します。
設定したバリデーションを削除したい場合は、左上にある「×」をクリックすると削除できます。
ちゃんとバリデーションがかかっていれば、何も入力せず送信ボタンを押すと「未入力です」というエラーテキストが表示され送信できないようになります。
バリデーションルールの追加や表示されるテキストの変更も可能です。以下の記事が参考になります。
画面右側に「自動返信メール設定」と「管理者宛メール設定」の項目があります。これらを設定しておくと、送信したフォームの入力内容をユーザーや管理者にメールで送ることができます。
ユーザーにメール送信を行う場合はフォームにメールアドレスの入力欄は必須です。
【自動返信メール設定】
| 件名 | メールのタイトル。 |
| 送信者 | メールの送信者の名前。 |
| Reply-to （メールアドレス） | 返信先のメールアドレス。 返信を受け付けたいメールアドレスを設定します。 |
| 本文 | メールの本文。 |
| 自動返信メール | メールの送信先のアドレスを設定します。 メールアドレスのフォームに設定した「name の値」を入力します。 |
| 送信元 （E-mailアドレス） | 自動メールの送信元のアドレス。 未入力なら自動的にシステムのアドレスが補完されます。 |
【管理者宛メール設定】
| 送信先 （E-mailアドレス） | メールの送信先アドレス |
| CC（E-mailアドレス） BCC（E-mailアドレス） | CC、BCCで送るメールアドレス 【CCやBCCについて】TO、CC、BCCの特徴と違い |ビジネスメールの教科書 |
| 件名 | メールのタイトル。 |
| 送信者 | メールの送信者の名前。 |
| Reply-to （メールアドレス） | 返信先のメールアドレス。 返信を受け付けたいメールアドレスを設定します。 |
| 本文 | メールの本文。 |
| Return-Path （メールアドレス） | 送信先に設定したメールアドレスにメールが送られなかった場合に送信するアドレスを設定します。空欄でも問題ありません。 |
| 送信元 （E-mailアドレス） | 自動メールの送信元のアドレス。 未入力なら自動的にシステムのアドレスが補完されます。 |
メールを送信する際に本文にはフォームの入力内容を表示させたいことがほとんどだと思います。 {nameの値} を入力することでフォームの入力内容が表示されます。
【メール本文の記載例】
お問い合わせありがとうございます。以下の内容で受け付けました。
お名前 : {name}
メールアドレス : {email}
お問い合わせ内容 : {content}【返信メールの書き方参考】【保存版】コピペで使える自動メール返信の例文まとめ！用途別に8つのテンプレートを紹介 | formlab
フォームの作成、メールの設定が完了したらフォームを設置したいページにショートコードを設定します。
画面右側に「フォーム識別子」という項目があってその下に表示されている [mwform_formkey key="000"] というコードをコピーします。あとはコピーしたコードを設置したいページの任意の場所にペーストすれば完了です。
セレクトボックスの初期値を値ではなく、「選択してください」といった表示にしたい場合は、以下のように設定します。
[mwform_select name="sample" children=":選択してください,選択肢１, 選択肢２" post_raw="true"]children の値の一番初めに :選択してください, と post_raw="true" を追加します。
該当のセレクトボックが必須項目でない場合、選択しない状態だと確認画面に「選択してください」と表示されます。空欄で表示させるには以下のように入力する方法もあります。
[mwform_select name="sample" children=",選択肢１, 選択肢２" post_raw="true"]「選択してください」といったテキストを表示させつつ、入力がなかった場合に確認画面で空欄にしたい場合はJavaScriptを使って調整することができます。
【参考】MW WP Formセレクトボックス未選択時確認画面で空白にする方法 | WEBクリエイターの部屋
複数のページで共通のフォームを使用し、なおかつ画面遷移するフォームを作る場合によくあるのがURL設定の項目で「入力画面URL」を空欄にし、確認・完了画面にURLを入力するパターンです。
しかし、「入力画面URL」が空欄でその他のURLを設定するとエラーになってしまいます。
MW WP Formでは、完了画面へ遷移させるためのアクションフックが用意されているので、これを利用します。確認画面は同一ページになってしまいますが、完了ページに遷移させることができます。
function my_mwform_after_send_01( $Data ){
$form_key = $Data->get_form_key();
if ( $form_key === 'mw-wp-form-01' ) {
wp_redirect('/thanks/');
exit;
}
}
add_action('mwform_after_send_mw-wp-form-01', 'my_mwform_after_send_01' );mw-wp-form-01 の数値部分は、フォーム識別子の key="000" を使用します。
[mwform_formkey key="123"] なら mw-wp-form-123 です。
MW WP Form はカスタマイズしやすいこと、またその情報が豊富にあることも利用ユーザーが多い理由の一つでしょう。いくつかの機能の実装方法をご紹介します。
郵便番号から住所を自動入力させたい時もあるかと思います。私はそんな時に zipaddr-jp プラグインを使っています。使い方の詳細は以下の記事にまとめていますので、対応させたい場合はご覧ください。
例えば「このイベントに参加する」というリンクをクリックしたら、フォームにそのイベントの内容が自動的に入力されるとユーザーは再度確認して入力する手間が省けますし、入力間違いを減らすことにもつながります。
このような機能を MW WP Form では簡単に実装することができます。
入力画面と確認画面を分けていると、移動した際にフォームの位置で表示されないことがあります。
そんな時は「 画面変遷時のスクロールを有効にする 」という項目があるので、チェックを入れることで解決できます。
思った場所に調整できない、といった場合は以下の記事が参考になります。
LP（ランディングページ）などでMW WP FORMを使用した時の位置調整 – Creator Note
問い合わせデータをカスタム投稿として作成する方法を詳しく書かれている記事があり、「こんなこともできるんだ」と思ったのでメモです。
MW WP Form では問い合わせデータを保存する機能がついていますが、そのデータを変更したいことがあったり、より管理しやすくしたいときに便利だと思います。