MW WP Formを導入してみました。

WordPressのメールフォームプラグインMW WP Formを当サイトに導入してみましたので個人的感想や設置方法などを

MW WP Formの特徴

確認画面が表示可能
受け取ったメールはデータベースに保存可能
送信後ブラウザをリロードしても２重送信されません
バリデーションルールが豊富
管理画面上から自動返信メール、管理者宛メールの設定ができる

送信後ブラウザをリロードしても２重送信されないのは嬉しい機能です。ちなみにブラウザの戻るで戻ってもう一度送信しても送信できませんでした。トランザクショントークンでしょうか？まだ仕様を詳しくみてないのであれですが、さりげなくその辺が実装で来ている所が心憎いです！

MW WP Formの実装

プラグインを有効化し、僕がまず気になるのがhead内にでるcss読み込みの記述です。 functions.phpに以下を入力して読み込みを解除します。

function delstyle(){
wp_deregister_style( 'mw-wp-form' );
}
add_action('wp_print_styles', 'delstyle');

function delstyle(){

wp_deregister_style( 'mw-wp-form' );

}

add_action('wp_print_styles', 'delstyle');

管理画面から必要な項目を入力しフォームを作ります。

管理画面で以下のように入力すると

[mwform_textarea name="お問い合わせ内容"]

1	[mwform_textarea name="お問い合わせ内容"]

htmlは以下のようになります。

<input type="text" name="お名前" value="" />

1	<input type="text" name="お名前" value="" />

EFO的にも僕的にも項目数は少ない方が良いので今回は3項目のシンプルなフォームを作りました。以下管理画面に入力した項目です。

<dl>
<dt>お問い合わせ内容</dt>
<dd>[mwform_textarea name="お問い合わせ内容"]</dd>
<dt>お名前</dt>
<dd>[mwform_text name="お名前"] <span class="conf_none">例）山田太郎</span>
</dd>
<dt>メールアドレス</dt>
<dd>[mwform_text name="メールアドレス"] <span class="conf_none">例）yamada@irec.jp</span>
</dd>
</dl>
<div class="form_btn">
<ul>
<li class="subm2">[mwform_backButton]</li>
<li class="subm">[mwform_submitButton]</li>
</ul>
</div>

<dl>

<dt>お問い合わせ内容</dt>

<dd>[mwform_textarea name="お問い合わせ内容"]</dd>

<dd>[mwform_text name="お名前"] <span class="conf_none">例）山田太郎</span>

</dd>

<dt>メールアドレス</dt>

<dd>[mwform_text name="メールアドレス"] <span class="conf_none">例）yamada@irec.jp</span>

</dd>

</dl>

<ul>

<li class="subm2">[mwform_backButton]</li>

<li class="subm">[mwform_submitButton]</li>

</ul>

</div>

ボタンを画像にしたかったのでcssのインデントで-9999にするかvalue値を空にするか悩みましたがsubmitのvalue値を空にしました。気軽にアップデートができなくなるのでプラグインのファイルを直接いじるのはいやだったのですが、system/mw_form.phpの547行目あたりを以下のように編集しました。

※2015.10.23追記
現行バージョンでsubmitのvalue値を空にすると確認画面に遷移しない症状を確認しておりますので推奨しません。

public function submit( $name, $value ) {
	$_ret = sprintf( '<input type="submit" name="%s" value="" />', $this->e( $name ), $this->e( $value ) );
	return $_ret;
}

public function submit( $name, $value ) {

$_ret = sprintf( '<input type="submit" name="%s" value="" />', $this->e( $name ), $this->e( $value ) );

return $_ret;

}

追記-jQueryでValueを消す-

最近jQueryを勉強してまして、ValueをjQueryで消す方法を覚えたので実装しました。条件分岐でヘッダーに記述しました。

<?php if(is_page(array('inquiry','confirm','error'))): ?>
<script>
jQuery(function($){
	$(".form_btn li input").val("");	
});
</script>
<?php endif; ?>

<?php if(is_page(array('inquiry','confirm','error'))): ?>

jQuery(function($){

$(".form_btn li input").val("");

});

</script>

<?php endif; ?>

これで気軽にアップデートできます。

jQueryをつかって郵便番号での住所の入力補助もできるようです。
MW WP Formに郵便番号による住所入力補完をつけるには

僕が導入するならもうちょっと項目を少なくしたいので以下のような記述になります。

ヘッダーに

<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>
<script type="text/javascript">
$(function( $ ) {
    $( 'input[name="zip11"]' ).keyup( function( e ) {
        AjaxZip3.zip2addr(this,'','addr11','addr11');
    } )
} );
</script>

$(function( $ ) {

$( 'input[name="zip11"]' ).keyup( function( e ) {

AjaxZip3.zip2addr(this,'','addr11','addr11');

} )

} );

</script>

フォーム登録に

<dt class="any-icon">所在地</dt>
<dd>
<span class="zip">〒[mwform_text name="zip11"]</span><br>
[mwform_text name="addr11"]
</dd>
</dl>

<dd>

<span class="zip">〒[mwform_text name="zip11"]</span><br>

[mwform_text name="addr11"]

</dd>

</dl>

管理画面とかでもっと簡単にボタンを画像にできたりすると最高です。

2013年10月14日月曜日
：Naruhiko Wakai

BLOG

MW WP Formを導入してみました。

MW WP Formの特徴

MW WP Formの実装

追記-jQueryでValueを消す-

ヘッダーに

フォーム登録に

Sponsored Links

comments コメントをキャンセル

Sponsored Links

Naruhiko Wakai