【WordPress MW WP Form】選択によって表示切り替え

MW WP Formでフォームの選択肢に応じて項目を表示・非表示する方法を解説。
WordPressで条件分岐のフォームを簡単に実装するテクニックを初心者にもわかりやすく紹介します。
カスタムフォームでユーザー体験を向上させましょう。

MW WO Formの項目を追加します。

<tr>
<td class="method-area">[mwform_radio name="method" children="条件01,条件02" value="条件01"]</td>
</tr>
<tr class="open" value="open">
<td>表示非表示を切り替えたい内容を記載します。</td>
</tr>

表示・非表示を切り替えたい部分にclassとvalueを付与します。

Cssを追加します。

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

条件分岐のJavaScriptを記載します。

<script>
jQuery(function($) {
  $(function() {
    $('[name="method"]:radio').change(function() {
      var result = $("input[name='method']:checked").val(); 
      if(result === '条件01'){ // 条件01を選んだ場合
        $('.open-area').css('display', 'block');
        $('.required').css('visibility', 'visible'); // 必須項目を表示
      } else if (result === '条件02') { // 条件02を選んだ場合
        $('.open-area').css('display', 'none');
        $('.required').css('visibility', 'hidden'); // 必須項目を非表示
      }
    }).trigger('change');
  });
});
</script>

確認画面の設定

<script>
jQuery(function($){
var area = ($('.mw_wp_form_confirm .method-area').html());
if ( area.indexOf('条件02') != -1) {
$('.open-area').css('display','none');
}
});
</script>

自動返信の設定

サンクスメール

//お客様宛の自動返信
function my_mail( $Mail, $values, $Data ) {
  if ($Data->get( 'method' ) == '条件01'){ 
    $Mail->body =
    $Data->get('your-name'). "様
内容を記載いします。"."\n".
      "------------------------------------------------------------------------------"."\n".
      '資料請求 : '.$Data->get('method')."\n".
      '------------------------------------------------------------------------------'."\n"
    ;
  }
 elseif($Data->get( 'method' ) == '条件02'){ 
        $Mail->body =
        $Data->get('your-name'). "様
        "."\n".
          "------------------------------------------------------------------------------"."\n".
          'お名前： '.$Data->get('name')."\n".
        ;
    }
  return $Mail;
}
add_filter( 'mwform_auto_mail_mw-wp-form-aaa', 'my_mail', 10, 3 );

管理者宛メール

//管理者宛
function my_mail2( $Mail_raw, $values, $Data ) {
  if ($Data->get( 'method' ) == '希望しない'){
    $Mail_raw->body =
    $Data->get('your-name'). "様からお問い合わせがありました。"."\n".
      "──────────────────────────"."\n".
      '資料請求 : '.$Data->get('method')."\n".
      '──────────────────────────'."\n"
    ;
  }
elseif($Data->get( 'method' ) == '条件02'){ 
        $Mail->body =
        $Data->get('your-name'). "様からお問い合わせがありました。
        "."\n".
          "------------------------------------------------------------------------------"."\n".
          'お名前： '.$Data->get('name')."\n".
        ;
    }

  return $Mail_raw;
}
add_filter( 'mwform_admin_mail_mw-wp-form-aaa','my_mail2', 10, 3 );

必須項目を切り分ける

上記内容で表示非表示になったものを、表示された場合に、必須項目に切り替える。

function my_validation_rule( $Validation, $data ) {
    $method = $data['method'];
    if( isset( $method ) && $method === '条件01' ) {
      $Validation->set_rule( 'email', 'noEmpty', array( 'message' => '「条件01」の場合はこちらの項目は必須です') );
    }
    elseif ( isset( $method ) && $method === '条件02' ) {
        $Validation->set_rule( 'address', 'noEmpty', array( 'message' => '「条件02」の場合はこちらの項目は必須です') );
    }
   
    return $Validation;
   }
   add_filter( 'mwform_validation_mw-wp-form-00000', 'my_validation_rule', 10, 2 );