【MW WP Form】ラジオボタンの選択項目によって分岐させたい!

ワードプレス

2022-01-08

ラジオボタンの選択によって表示・非表示を変える

難しいと思って避けてた案件…
下のサンプルのように、選択したラジオボタンによって表示・非表示を切り変えるフォームを作ります!
資料請求のラジオボタンで「希望する」を選択した場合、住所の項目が表れます。
(サンプルフォームは送信されません)

お名前
メールアドレス
お問い合わせ
資料請求
住所

ステップ① MW 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>住所</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>

上はMW Formコードの一例です。
表示・非表示を切り替えたい部分のtr(住所)にclassとvalueを付与します。
今回open-areaというclassとvalueを付けました。

ステップ② 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に設定します。

自動返信

{your-name}様
お問い合わせありがとうございます。
下記の内容で承りました。
追って担当から返信いたします。
——————————————————————————
【お名前】{your-name}
【メールアドレス】{email}
【お問い合わせ】{inquiry}
【資料請求】{bifurcation}
【住所】{your-address}
——————————————————————————

管理者宛メール

{your-name}様からお問い合わせがありました。
——————————————————————————
【お名前】{your-name}
【メールアドレス】{email}
【お問い合わせ】{inquiry}
【資料請求】{bifurcation}
——————————————————————————

次に「希望しない」を選んだ場合の自動返信の設定を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 );

 
こちらを参考にさせていただきました。ありがとうございます!
こちらは郵便番号での住所自動入力等も紹介してくださっています。

途中あきらめかけましたが💦参考サイトのおかげで何とか完成できました!
ありがとうございます!!

-ワードプレス

関連記事

よく使うWordPressテンプレートタグ

URLを出力するWordPressのテンプレートタグ phpファイルにテンプレートタグを使用することで、自動でURLを取得して表示してくれます。これでサイトURLが変わってもコードの修正をしなくても大 …

バージョンアップしたContact Form 7 に入力確認画面をつけたい!

入力確認画面が作れるプラグイン「Contact Form 7 Multi-Step Forms」 Contact Form 7をアップデートしたらフォームが動かなくなってしまった! 調べてみると確認画 …

固定ページでphpを使いたい

例えばトップページを固定ページで作成したとき、お知らせの新着一覧を固定ページ上で好きな位置に配置したいな、と考えたことはありませんか?

【MW WP Form】必須項目をラジオボタン選択肢によって変えたい

MW WP Formの必須項目を分岐で変更! お問い合わせフォームなどで、選択肢によって分岐させ、フォームの項目を変えるのは難しい。例えば、資料請求を選んだら住所入力欄が出てくるとか。 必須が多いとフ …

MW WP Formセレクトボックスに特定カテゴリーの記事タイトルを自動で表示させたい!

フォームセレクトボックスの選択肢をカテゴリーと連動 フォームの質問事項が頻繁に変わるとき、例えば商品が変わる度、注文フォームをいちいち修正するのは慣れていないと大変です。 新しい記事をアップしたら自動 …