コンタクトフォーム7+確認画面がすごく簡単にできる件 - ウエンのITスペシャリストへの道〜虎の巻〜

正確にはコンタクトフォーム7は使わないので、タイトルとは少し違いますのでがっかりされると思いますが、少しでもお役に立てればということでこの記事を書きました。

コンタクトフォーム7って非同期トラッキングでGoogleアナリティクスと同期できて非常に便利なんですが、我々日本の文化として、フォームに入力して、いきなり送信って対企業などのホームページを作っていると確認画面が絶対ないとダメなんだ！ってなりませんか？

contactform7だとJQueryなどで確認画面用のＪＳがあったりするのですが、如何せん私の実力不足でわからないし、動かない！だから違うのを使ってみたら、思った以上に簡単だったし予測検索に同じことで困っている方がいるんだろうと思ったので、ブログを書こうと思いました。

結論から言うと「MW WP Form」というプラグインを使用します。
http://plugins.2inc.org/mw-wp-form/

「MW WP Form　使い方」などで検索すると、とにかく難しそうな印象を受けましたが、肉弾戦で使ってみるとすごく使いやすいので、簡単にまとめてみました。詳細な使用方法などは本家のサイトや、詳しい方のブログを見てやってみてください。あくまで動作するまでを簡単に表現します。

1.まずはインストールしてください！（インストールの仕方は割愛）

2.左ナビゲーションに「MW WP Form」が出てくるのでクリック

3.新規作成（ここまではすべてコンタクトフォーム7と同じ）

4.ソースコードを書きます

ボタンがあるので設置したい箇所で使用したいフォームボタンを押下してください。
あと後でメールで表示する際に使用しますので、name属性は必ず指定してください。

私はこんな感じで作成します。シンプルです

<table class="common_table" style="width:100%;">
	<tr>
		<th>ニックネーム</th>
		<td><input type="text"></td>
	</tr>
	<tr>
		<th>メールアドレス<span class="required">必須</span></th>
		<td><input type="text"></td>
	</tr>
	<tr>
		<th>ご質問内容</th>
		<td><textarea style="height:150px;"></textarea></td>
	</tr>
</table>

指定できるものは本家のサイトに乗っているのでチェックしてください
http://plugins.2inc.org/mw-wp-form/manual/shortcode/

5、入力チェック（バリデーションルール）を選択します

バリデーションはfunctions.phpに直接記載します（という方法しか見つけれなかった）
まずコード見てください

add_filter( 'mwform_validation_ここにフォームのキー', 'mwform_validation_contact' );
function mwform_validation_contact( $v ) {
    $v->setRule( 'mail', 'noEmpty' );
    $v->setRule( 'mail', 'mail' );
    
    return $v;
}

「ここにフォームのキー」って書いている部分は画面左のほうにこんなところがあります。

僕の場合はmw-wp-form-26と書いているので「mwform_validation_mw-wp-form-26」になります
次にバリデーションルール！
$v->setRule関数にバリデーションをかけたいフォームのname属性,mwwpformのショートコードを記載します。
ショートコードはこんなものがありますのでご参考までに
http://plugins.2inc.org/mw-wp-form/manual/validation-rule/

僕が指定したのはメールアドレスかどうか？と必須の設定だけしました。

6.確認画面と完了画面の設定画面

ここは見たまんまです。サイトルート以降を記載してください。
サイトの階層に応じて変えてください。