【MW WP Form】ラジオボタンの選択によって分岐　表示・非表示を変える

PR　当ページのリンクには広告が含まれています。

ラジオボタンの選択で分岐するフォームの作り方

SAMPLE

下のサンプルのように、選択したラジオボタンによって表示を変えます。
資料請求のラジオボタンで「希望する」を選択した場合、住所の項目が表れます。
（サンプルフォームは送信されません）

ステップ①　プラグイン「MW WP Form」の設定

<table>
<tr>
<th class="bold">お名前</th>
<td>[mwform_text name="your-name" size="60"]</td>
</tr>
<tr>
<th class="bold">メールアドレス</th>
<td>[mwform_email name="email" size="60"]</td>
</tr>
<tr>
<th class="bold">お問い合わせ</th>
<td>[mwform_textarea name="inquiry" cols="50" rows="3"]</td>
</tr>
<tr>
<th class="bold">資料請求</th>
<td class="bifurcation-area">[mwform_radio name="bifurcation" children="希望する,希望しない" value="希望しない"]</td>
</tr>
<tr class="open-area" value="open-area">
<th class="bold">住所</th>
<td>[mwform_text name="your-address" size="60"]</td>
</tr>
</table>
<div class="contact_btn">
[mwform_submitButton name="submit" confirm_value="確認する" submit_value="送信する"][mwform_bback class="modoru" value="back"]戻る[/mwform_bback]
</div>

ステップ②　footer.phpにJavaScriptを配置

下記のJavaScriptを配置します。
name="bifurcation"の部分には、MW Formで設定した切り替えたいラジオボタンのnameを入れます。
1行目はjqueryを読み込んでない場合、追加します。
.trigger('change');を入れて、確認画面から戻った場合も表示・非表示が変わらないようにしました。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
jQuery( function($) {
  $(function() {
     $('[name="bifurcation"]:radio').change( function() {
         var result = $("input[name='bifurcation']:checked").val(); 
         if(result === '希望する'){ //希望するを選んだ場合
                $('.open-area').css('display','block');
         } else if (result === '希望しない') { //希望しないを選んだ場合
                $('.open-area').css('display','none');
         }
     }).trigger('change');
  });
});
</script>

ステップ③　css設定

はじめは住所部分が表示されないようにcssにフォームの入力ページの住所を非表示にしておきます。「.mw_wp_form_input」は入力画面フォームについているクラスです。

.mw_wp_form_input .open-area{display: none;}

ステップ④　確認画面の設定

確認画面の表示・非表示の設定です。
JavaScriptが効かない場合は、wp_footerの前後やheader.phpなど、JavaScriptの配置位置を変えてみてください。

<script>
jQuery(function($){
var area = ($('.mw_wp_form_confirm .bifurcation-area').html());
if ( area.indexOf('希望しない') != -1) {
$('.open-area').css('display','none');
}
});
</script>

ステップ⑤　自動返信の設定

今回は「希望する」を選んだ場合の自動返信、管理者宛メール内容は通常通りMW Formに設定します。

自動返信

管理者宛メール

次に「希望しない」を選んだ場合の自動返信の設定をfunction.phpで行います。function.phpの編集は、ミスするとサイトがエラーで表示されなくなったり、WP編集画面が使えなくなるので、バックアップを取って、FTPでファイルをアップロードすることをおすすめします。

自動返信

下記コードをfunction.phpに追加します。mw-wp-form-aaaの「aaa」にはフォーム識別子の数字を入れます。

//お客様宛の自動返信
function my_mail( $Mail, $values, $Data ) {
  if ($Data->get( 'bifurcation' ) == '希望しない'){ 
    $Mail->body =
    $Data->get('your-name'). "様
お問い合わせありがとうございます。
下記の内容で承りました。
追って担当から返信いたします。"."\n".
      "------------------------------------------------------------------------------"."\n".
      'お名前 : '.$Data->get('your-name')."\n".
      'メールアドレス : '.$Data->get('email')."\n".
      'お問い合わせ : '.$Data->get('inquiry')."\n".
      '資料請求 : '.$Data->get('bifurcation')."\n".
      '------------------------------------------------------------------------------'."\n"
    ;
  }
  return $Mail;
}
add_filter( 'mwform_auto_mail_mw-wp-form-aaa', 'my_mail', 10, 3 );

管理者宛メール

下記コードをfunction.phpに追加します。こちらもmw-wp-form-aaaの「aaa」にはフォーム識別子の数字を入れます。

//管理者宛
function my_mail2( $Mail_raw, $values, $Data ) {
  if ($Data->get( 'bifurcation' ) == '希望しない'){
    $Mail_raw->body =
    $Data->get('your-name'). "様からお問い合わせがありました。"."\n".
      "──────────────────────────"."\n".
      'お名前 : '.$Data->get('your-name')."\n".
      'メールアドレス : '.$Data->get('email')."\n".
      'お問い合わせ : '.$Data->get('inquiry')."\n".
      '資料請求 : '.$Data->get('bifurcation')."\n".
      '──────────────────────────'."\n"
    ;
  }
  return $Mail_raw;
}
add_filter( 'mwform_admin_mail_mw-wp-form-aaa','my_mail2', 10, 3 );

おわりに

フォームの入力項目が多いと、入力が面倒に感じ問い合わせをしないユーザーもでてくるので、見た目で項目が少なくて簡単な印象を与えられるのがメリットです。
後、毎回感じますがプラグイン「MW WP Form」はプログラミングが得意ではなくてもカスタマイズしやすいところが嬉しいです。