【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 );

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

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

-ワードプレス

関連記事

最初の数行を表示させて、残りは会員限定で閲覧できるWPの限定コンテンツを作りたい

【プラグイン無し】moreタグ以降はログインで表示させる限定をコンテンツを作成! 今回はログインフォーム、限定コンテンツについて調べました! やりたいことは下記になります。 ・コンテンツの最初の数行を …

ページの最初の画像を自動でアイキャッチにする

読みやすさや視線誘導のために、記事一覧にアイキャッチ画像を設定します。 「読んでみたい」と思ってもらえるアイキャッチ画像を準備したいですね! WordPressでは編集画面右下の「アイキャッチ画像を設 …

WordPressサイト公開後のチェックリスト10項目

WordPressサイト本アップ後に確認したいこと 制作したサイトの本アップ時に確認していることリストです。 私はWordPressをインストールしたディレクトリのURLで制作して、お客様に校正してい …

特定のページだけにcssやjsを読み込ませたい!

JavaScriptやcssのファイル、読み込まれるのに時間がかかりページが重くなります。 必要なページだけにリンクさせたいですよね。 今日はページごとにファイルをリンクする方法をまとめました! ❶h …

MW WP Formが動かない!確認画面にいかない!原因は?

入力画面でループして確認画面やエラーの表示に遷移しない、せっかく入力したのに確認画面を押すと、リロードされて消えてしまい、先に進まない…。なかなか解決せずはまってしまったMW WP Form。試してみた内容をご紹介しています。