MW WP Formを導入してみました。
WordPressのメールフォームプラグインMW WP Formを当サイトに導入してみましたので個人的感想や設置方法などを
MW WP Formの特徴
- 確認画面が表示可能
- 受け取ったメールはデータベースに保存可能
- 送信後ブラウザをリロードしても2重送信されません
- バリデーションルールが豊富
- 管理画面上から自動返信メール、管理者宛メールの設定ができる
送信後ブラウザをリロードしても2重送信されないのは嬉しい機能です。ちなみにブラウザの戻るで戻ってもう一度送信しても送信できませんでした。トランザクショントークンでしょうか? まだ仕様を詳しくみてないのであれですが、さりげなくその辺が実装で来ている所が心憎いです!
MW WP Formの実装
プラグインを有効化し、僕がまず気になるのがhead内にでるcss読み込みの記述です。 functions.phpに以下を入力して読み込みを解除します。
1 2 3 4 |
function delstyle(){ wp_deregister_style( 'mw-wp-form' ); } add_action('wp_print_styles', 'delstyle'); |
管理画面から必要な項目を入力しフォームを作ります。
管理画面で以下のように入力すると
1 |
[mwform_textarea name="お問い合わせ内容"] |
htmlは以下のようになります。
1 |
<input type="text" name="お名前" value="" /> |
EFO的にも僕的にも項目数は少ない方が良いので今回は3項目のシンプルなフォームを作りました。以下管理画面に入力した項目です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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> |
ボタンを画像にしたかったのでcssのインデントで-9999にするかvalue値を空にするか悩みましたがsubmitのvalue値を空にしました。 気軽にアップデートができなくなるのでプラグインのファイルを直接いじるのはいやだったのですが、system/mw_form.phpの547行目あたりを以下のように編集しました。
※2015.10.23追記
現行バージョンでsubmitのvalue値を空にすると確認画面に遷移しない症状を確認しておりますので推奨しません。
1 2 3 4 |
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で消す方法を覚えたので実装しました。条件分岐でヘッダーに記述しました。
1 2 3 4 5 6 7 |
<?php if(is_page(array('inquiry','confirm','error'))): ?> <script> jQuery(function($){ $(".form_btn li input").val(""); }); </script> <?php endif; ?> |
これで気軽にアップデートできます。
jQueryをつかって郵便番号での住所の入力補助もできるようです。
MW WP Formに郵便番号による住所入力補完をつけるには
僕が導入するならもうちょっと項目を少なくしたいので以下のような記述になります。
ヘッダーに
1 2 3 4 5 6 7 8 |
<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> |
フォーム登録に
1 2 3 4 5 6 |
<dt class="any-icon">所在地</dt> <dd> <span class="zip">〒[mwform_text name="zip11"]</span><br> [mwform_text name="addr11"] </dd> </dl> |
管理画面とかでもっと簡単にボタンを画像にできたりすると最高です。
- 2013年10月14日月曜日
- :Naruhiko Wakai
コメントを残す