【第一回】WordPressでよく使われるフォーム（MW WP Form）についていろいろ便利フックをまとめてみた。
MW WP FORMとは？
MW WP Form — WordPress Plugins
MW WP Formは、WordPressを使用したサイトでお問い合わせフォームや応募フォームなどの「フォーム」を簡単に作れるWordPressのプラグインです。
フックとは？
WordPressのプラグインやテーマやコアなどで、それぞれの開発者が用意してくれている「後付け機能（上書き的機能）」のようなものです。
フックには、「アクションフック」「フィルターフック」というものがあります。
アクションフックとは？
アクションフックはプログラムが実行されていく流れの中で「このプログラムが走る時に、機能を追加したい！！」ということができる機能です。もちろん、その反面の「この機能はここでは不要なので削除したい」ということもできます。
フィルターフックとは？
WordPressやプラグインやテーマでは様々な入出力を行う際にフィルターという処理を用意してくれています。その入出力時に「この機能を追加したい！」「この選択肢を増やしていきたい」「この出力されている文字を○○という文字に置き換えたい」等ができる機能です。
MW WP FORMで使える「フィルターフック」「アクションフック」について
MW WP FOAMでは、とても多くのフィルターフックやアクションフックがあります。
実際に作者である「Takashi Kitajima様」がサイトとしてまとめて頂いているサイトがあるのでご紹介します。
https://plugins.2inc.org/mw-wp-form/
見ていただくとたくさんのフィルターフックやアクションフックがあると思います。その中でも、私たちが制作を通して「これは使える！！」と思ったものをご紹介しようと思います。
ケース1：○○が入力や選択がされていたら△△を必須にしたい！
よく、「コース1が選択やチェックが入ったら年齢を必須にしたい」という問い合わせを受けることがあります。
そうした要望に対して、MW WP FORMでは「mwform_validation_mw-wp-form-xxx」というフィルターフックを用意してくれいています。
このxxxにはフォーム番号が入ります。
MW WP FORMを使っているとこのような上記のような画面が出てくると思います。
xxxにはmwform_formkey key=”ここに入っている数字”を入れてもらえればと思います。
そして、使っているテーマのfunction.phpに下記のコードを追記していきます。
<?php
function my_validation_rule( $Validation, $data, $Data ) {
if($data['コース1']){
$Validation->set_rule( '年齢', 'noEmpty' );
}
return $Validation;
}
add_filter( 'mwform_validation_mw-wp-form-xxx', 'my_validation_rule', 10, 3 );
?>このコードを追加することで、コース1を選択や入力されている人だけ年齢を必須にすることができるようになります。
ケース2：記事からお問い合わせに移動したときに前に見ていた記事の情報をお問い合わせに引き継ぎたい。
よく不動産や求人サイトをWordPressで制作依頼をされることがあり多く注文を受けるのがこの機能です。物件であれば物件ID。求人であれば求人IDを追加する。そういった引継ぎなのですが、これにはある手順が必要になります。まずフォーム作成部分にて
上図の「URL引数を有効にする」にチェックを入れておきます。そして、お問い合わせのURLにパラメーターをつけるようにしていきます。
<a href="?php echo home_url('/contact/'); ?>?post_id=記事ID">この記事について問い合わせする</a>とすると、
//タイトルをテキスト入力欄に表示
[mwform_text name="post_title" size="60" value="{post_title}"]
//記事の作成日をテキスト欄に表示
[mwform_text name="post_date" size="60" value="{post_date}"]
//記事の内容をテキストエリアに表示
[mwform_textarea name="post_content" size="60" value="{post_content}"]
//記事のIDをテキスト欄に表示
[mwform_text name="post_date" size="60" value="{ID}"]ということができるようになります。これだけでも十分なのですが、任意のパラメーターを入力値に入れることも可能です。
そこで使うのが「mwform_value_mw-wp-form-xxx」です。例えば、記事のカスタムフィールド（例として今回はrecruit_id(スマートカスタムフィールド)）をフォームへ反映させたい場合ですが
<a href="<?php echo home_url('/contact/'); ?>?recruit_id=<?php echo SCF::get('recruit_id'); ?>">この求人に応募する</a>という形で記載していきます。そして、function.phpに下記を記載してください。
function my_mwform_value_02($value, $name){
if($name === 'recruit_id' && !empty($_GET['recruit_id']) && !is_array($_GET['recruit_id'])){
return $_GET['recruit_id'];
}
return $value;
}
add_filter('mwform_value_mw-wp-form-xxx', 'my_mwform_value_02', 10, 2);MW WP FORM側で
[mwform_text name="recruit_id" size="60"]と用意しておけば、自動的に値が入るようになっていきます。
ケース3：郵便番号を入力したら自動的に住所欄に住所が入るようにしたい
例えば弊社サイトのお問い合わせ、https://www.urban-project.jp/contact/partners/にて使用しているように郵便番号を入力すると自動的に住所欄に住所が入力されると思います。こちらの方法として下記の手順をご紹介します。
こちらは、アクションフックやフィルターフックとは異なりますが、意外と要望があるので使い方を記載してみます。
まず、header.phpの</head>の前に
<script type='text/javascript' src='//jpostal-1006.appspot.com/jquery.jpostal.js'></script>こちらを入れていただいて、MW WP FORMの部分で
[mwform_text name="郵便番号" id="postalcode" class="postalcode" size="60" placeholder="例：000-0000"]
[mwform_select name="都道府県" id="prefectures" class="prefectures" children=":選択してください,,北海道,青森県,岩手県,宮城県,秋田県,山形県,福島県,茨城県,栃木県,群馬県,埼玉県,千葉県,東京都,神奈川県,新潟県,富山県,石川県,福井県,山梨県,長野県,岐阜県,静岡県,愛知県,三重県,滋賀県,京都府,大阪府,兵庫県,奈良県,和歌山県,鳥取県,島根県,岡山県,広島県,山口県,徳島県,香川県,愛媛県,高知県,福岡県,佐賀県,長崎県,熊本県,大分県,宮崎県,鹿児島県,沖縄県"]
[mwform_text name="市区町村" id="address_01" class="address_01" size="60" placeholder="例：○○○○○○○○○○○○"]
[mwform_text name="丁目番地" id="address_02" class="address_02" size="60" placeholder="例：○○○○○○○○○○○○"]という設定をして下さい。次に、footer.phpに下記のコードを入力してください。
<script>jQuery(function($){ $(window).ready( function() { $('#postalcode').jpostal({ postcode : [ '#postalcode' ], address : { '#prefectures' : '%3', '#address_01' : '%4' '#address_02' : '%5%6' } }); }); });</script>
とすると郵便番号を入れると自動的に住所が出てくるようになると思います。
この記事を書いたライター
