MW WP Form｜確認画面付きメールフォームプラグインの設定テンプレート！

• 
• 
• 

MW WP Form、使っていますか？

WordPress確認画面付きメールフォームプラグイン「MW WP Form」のご紹介。

開発したのはなんと長崎県の若手プログラマー北島氏！
プログラミングに関しては全く性に合わない私ですが、Webデザイナーでも何かプラグインを作れないものかと思いつつプラグインを作れる人に憧れを持っております。

最近になって、確認画面付きメールフォーム「MW WP Form」の話題を良く耳にするようになり、実際１度試したのですが、設定方法が難しく断念したことがあります。管理画面を見た瞬間、これはどうすれば良いの？…なんて。
しかし今回、クライアントワークにて確認画面付きメールフォーム設置の強い要望をいただいたので気合を入れて再チャレンジしてみました。メールフォームに確認画面がある事を確認する確認画面文化Japan（汗）

日本でのWordPressメールフォームプラグインの有名所は、「Contact Form 7」「Trust Form」と思うのですが、先日長崎のコワーキングスペースで「MW WP Form開発者である話題の人」について噂を聞き、親近感を感じたので、まじで「MW WP Form」を勉強しはじめたのでした。

しかし、開発者サイトにて設定方法などが書かれているのですが、どうもデザイナーという性質上、思考回路的に、感性人間にはなかなか設定が難しかった…。この記事では私と同じ感性人間な人たちにもどんどん使っていただけるよう、できるだけ直感的に設置できるように設定画面での設定テンプレートを綴りたいと思います。

今後、より便利になっていくと思うので、その都度更新していければと思います。

スポンサーリンク

まずは、WordPressのダッシュボード左メニューの”プラグイン”ら”プラグイン画面”を開き、「新規追加」をクリックし、MW WP Formを検索してインストールしましょう。
※2014年11月現在では、ver.2.0.0
⇒ MW WP Form の使い方
⇒ MW WP Form ダウンロード

※MW WP Formをしっかり動かすには、テーマに wp_head()、wp_footer()、get_header() が必須です。

• 設定簡単！フォームの項目は、エディターから簡単追加
• 同一URLでの画面遷移、違うURLでの画面遷移にも対応
• 本文入力（メールフォーム項目）
• 完了画面メッセージ
• バリデーションルール
• 自動返信メール設定
• 管理者宛メール設定
• フォーム識別子を固定ページの任意の位置に配置
• フォーム並びの調整（CSS適用）
• 確認画面付きメールフォームプラグイン「MW WP Form」で制作費アップ？！
• MW WP Form の設定機能でより便利に！
• MW WP Formをより便利に使うプラグイン
• MW WP Form 作者の北島氏と九州のWordBenchのみんな
• MW WP Form のネーミング

設定簡単！フォームの項目は、エディターから簡単追加

MW WP Formの編集画面は、WPダッシュボードのサイドバーにあります。MW WP Formプラグインを有効化すると表示されます。

新規追加で確認画面付きメールフォームを何個も作成できます（Contact Form 7 を使った事がある人はわかると思います）

”フォームを編集”を開くと、入力する場所がたくさんありますが、フォームの項目を追加するには、本文上のMW WP form専用”ドロップダウンメニュー”から項目を選び「フォームタグを追加」をクリックして追加していけます。

例えば、テキストフィールドを追加したい場合、ドロップダウンメニューから選択し「フォームタグを追加」ボタンをクリックすると、詳細な設定ができるポップアップが表示されます。
必要に応じて細かい設定ができるので、設定を終えたら「Insert」をクリックしましょう。本文中にフォームタグが追加されます。

※ドロップダウンメニューからタグを追加していかなくても後に綴る記事のソースをコピペすれば作業工数を省略できます。

同一URLでの画面遷移、違うURLでの画面遷移にも対応

MW WP Formは、”入力画面”、”確認画面”、”完了画面”、”エラー画面”、それぞれでURLを設定できるのですが、同一URLにて入力画面から確認画面を経て送信完了画面まで画面遷移を行う場合は、”入力画面URL”、”確認画面URL”、”完了画面URL”、”エラー画面”へのURL入力は不要です。

しかし、それぞれ画面が欲しい場合は、固定ページでそれぞれページを作成しURLをあてます。固定ページを複製していくのがベターです。エラー画面は省略してもよいです。

ページ名　　　　　　　　URL
● お問合せ（入力画面）　　http://******.com/contact/
● 確認画面（確認画面）　　http://******.com/contact/kakunin/
● 送信完了（完了画面）　　http://******.com/contact/completed/
● エラーがあります。（エラー画面）　　http://******.com/contact/error/

本文入力（メールフォーム項目）

お問合せ種別（チェックボックス）
[mwform_checkbox name="お問合せ種別" children="資料請求,リフォーム相談,その他お問合せ" value="資料請求"]

メールアドレス（テキストフィールド）
[mwform_text name="メールアドレス" size="24" maxlength="60" value="メールアドレスを入力します"]

お名前（テキストフィールド）
[mwform_text name="お名前" size="20" maxlength="20" value="お名前を入力します"]

フリガナ（テキストフィールド）
[mwform_text name="フリガナ" size="20" maxlength="20"]

性　別（ラジオボタン）
[mwform_radio name="性別" children="男,女,半々" value="男"]

郵便番号（郵便番号フィールド）
[mwform_zip name="郵便番号"]

都道府県（セレクトボックス）
[mwform_select name="都道府県" children="北海道,宮城,東京,愛知,大阪,広島,福岡,沖縄"] ※略してます

ご住所（テキストフィールド）
[mwform_text name="ご住所" size="24" maxlength="60" value="ご住所を入力します"]

お電話番号（電話番号フィールド）
[mwform_tel name="お電話番号"]

リフォーム日時（Datepickerを表示）
[mwform_datepicker name="リフォーム日時"]

リフォーム箇所写真（画像アップロードフィールド）
[mwform_image name="リフォーム箇所写真"]

お問合せ内容（テキストエリア）
[mwform_textarea name="お問合せ内容" cols="26" rows="12" value="お問合せ内容を入力します"]

確認画面へ進むボタン
[mwform_submitButton preview_value="確認画面へ" submit_value="送信する"]　[mwform_backButton value="戻る"]

● ショートコード一覧と属性
各入力フォームやボタンに属性（必須など）を付けるには、コードの直接追加するかバリデーションルールの追加で設定可能。
フォームタグの説明は公式サイトに記載されております。
⇒ MW WP Form　ショートコード一覧

完了画面メッセージ

文言のサンプルを下記に記載しておきます（任意に書き換えを）。

送信完了

この度はお問合せメールをお送りいただきありがとうございます。
後ほど、担当よりご連絡をさせていただきます。
今しばらくお待ちくださいますようよろしくお願い申し上げます。

なお、しばらくたっても弊社より返信、返答がない場合は、
お客様によりご入力いただいたメールアドレスに誤りがある場合がございます。
その際は、お手数ですが再度送信いただくか、
お電話（ 06-6666-6666 ）までご連絡いただけますと幸いです。

何かご不明な点等ございましたら、お気軽にお問合せ下さい。

バリデーションルール

キーはnameを利用します。設置した項目ひとつひとつに必須の有無など、細かいルールを付けれる場所です。

自動返信メール設定

１、件名には”メールのタイトル”を入力。
２、送信者には送信者名を入力。
３、送信元（E-mailアドレス）には、メール受信者のメールアドレスを入力。
※ カンマ（,）区切りで複数のメールアドレスを入力することで、複数人にメールを送信することができます。
４、本文には下記（サンプル）を入力。（文章内容は任意）

この度はお問合せメールをお送りいただきありがとうございます。
後ほど、担当よりご連絡をさせていただきます。
今しばらくお待ちくださいますようよろしくお願い申し上げます。
※このメールは自動返信メールになります。
お問合せ種別 : {お問合せ種別}
メールアドレス : {メールアドレス}
お名前 : {お名前}
フリガナ : {フリガナ}
性　別 : {性別}
郵便番号 : {郵便番号}
都道府県 : {都道府県}
ご住所 : {ご住所}
お電話番号 : {お電話番号}
リフォーム日時 : {リフォーム日時}
リフォーム箇所写真 : {リフォーム箇所写真}
お問合せ内容 :{お問合せ内容}
--
このメールは◯◯◯.comのお問合せフォームから送信されました。

キー（name）を{　}（かもめカッコ）で囲むだけ。
５、自動返信メールには、メールアドレスに設定したキー（name）”メールアドレス”を入力。

管理者宛メール設定

１、送信先（E-mailアドレス）には、メール受信者のメールアドレスを入力。
※ カンマ（,）区切りで複数のメールアドレスを入力することで、複数人にメールを送信することができます。
２、件名には”メールのタイトル”を入力。
３、送信者には、{お名前}を入力（任意のキー）。
４、送信元（E-mailアドレス）には、{メールアドレス}を入力（任意のキー）。
５、本文には下記（サンプル）を入力。（文章内容は任意）

お問合せ種別 : {お問合せ種別}
メールアドレス : {メールアドレス}
お名前 : {お名前}
フリガナ : {フリガナ}
性　別 : {性別}
郵便番号 : {郵便番号}
都道府県 : {都道府県}
ご住所 : {ご住所}
お電話番号 : {お電話番号}
リフォーム日時 : {リフォーム日時}
リフォーム箇所写真 : {リフォーム箇所写真}
お問合せ内容 :{お問合せ内容}
--
このメールは◯◯◯.comのお問合せフォームから送信されました。

キー（name）を{　}で囲むだけ。

フォーム識別子を固定ページの任意の位置に配置

フォーム編集画面の右上に表示されているフォーム識別子に記載されているコードを固定ページのお問合せページなどの任意の位置にコピペすると完成です。

「更新」ボタンをクリックして保存、実際の画面を表示して確認をしましょう。

フォーム並びの調整（CSS適用）

ラジオボタンやチェックボックスの位置をCSSで縦並びにするには下記を参照に。

※項目で改行

label {
	display:block;
}

確認画面付きメールフォームプラグイン「MW WP Form」で制作費アップ？！

以上、MW WP Form 編集画面での設定方法になります。

わかりましたかね？直感的に利用するために綴ってきましたが、目的に合ったフォーム内容に独自で変更されて下さい。メール文章などのサンプルもオリジナルに書き換えて下さいね。

クライアントには、「メールフォームに確認画面は要りますか？」と制作前に一度聞いておきましょう。
「確認画面要る！」って言われたら、確認画面無しのメールフォーム制作費に少しプラスしちゃいましょうw

確認画面文化Japan！クライアント好みの便利なメールフォームプラグインを作ってくれた北島氏に感謝です。
大変便利なプラグインを作ってくれた北島氏には寄付をしなきゃです。困った事があったら直接の発注もOKのようですよ！

今後の開発を楽しみにしております。

MW WP Form の設定機能でより便利に！

フォーム編集画面の右下に表示されてある意味不明な「設定」群を少し解説。

１、「URL引数を有効にする」にチェックをすると、下記ページ内容の実装が可能です。
⇒ MW WP Form｜記事ページの投稿タイトルをメールフォームの件名に引っ張ってくる方法

２、「問い合わせデータをデータベースに保存」にチェックをすると、WordPressのダッシュボードで、チェックをしたメールフォーム宛の受信メールの件数をグラフで確認できます。
データベースに保存された受信メール情報は、CSV形式でダウンロードする事もできます。

３、「画面変遷時のスクロールを有効にする」にチェックをすると、確認画面などへの移動の際、同じフォームの位置を保ちます（同じ位置へ移動します）。スクロール要らずw

４、「Akismet 設定」の項は、Akismet（スパムコメントを防ぐプラグイン）を使用する項目のキーを入力してください。

MW WP Formをより便利に使うプラグイン

WordPressプラグインのプラグインを知ったのは最近です（笑）

⇒　拡張版 レスポンシブ対応 MW WP Form Standard
お問合せフォームに必要な標準的な項目を持つフォームのHTML作成と、バリデーション、管理者宛メール、自動返信メールの設定が行われた状態でフォームの新規作成が行えます。メールフォームをスマートフォン対応にされたい方も要チェック。
MW WP Form　の初期設定がわからなかったら素直にこの”MW WP Form Standard”を買いましょう（500円）

⇒　スパムを排除 MW WP Form CAPTCHA
MW WP Form に CAPTCHA（画像認証）機能を追加するプラグイン

⇒　MW WP Form Generator
GUIでフォーム作成ができ。HTMLやエディタでのフォーム作成が苦手の方も簡単にフォームが作成できるプラグイン（5,000円）
※ 2種類（Business&Block）のスタイルアドオンがありそれぞれ500円
※ MW WP Form Standard とは併用できない。

MW WP Form 作者の北島氏と九州のWordBenchのみんな

写真は私の故郷WordBench鹿児島（右）、熊本（左）、長崎（中央）の運営者方。
WordCamp Kansai で集合♪
⇒ 長崎から WordCamp Kansai 2014 に参加した話

MW WP Form作者である北島氏はWordBench長崎の運営をされております。MW WP Formについて質問があれば、是非長崎まで会いに行かれて下さい♪

MW WP Form のネーミング

気になるMW WP Form のネーミングの”MW”ですが、北島氏のサイト名（モンキーレンチ）の略称からきているようです。なるほど！ご自分で言い難いと仰ってました（笑）