MW WP Formの条件分岐フォームを作成しています

Question

###前提・実現したいこと
WordPress、PHP初心者です。

下記サイトを参考に、MW WP Formプラグインを使用した条件分岐のフォームを作成しています。
MW WP Formで条件分岐フォームを作る

セレクトボックスの選択肢によってカテゴリA〜Cを切り替えるようにしています(タブ切り替えのイメージ。jQuery使用)
このままですと、例えば「カテゴリC」を選択しチェックボックスを選択して、確認画面に遷移しても「カテゴリC」のチェックしたの内容が確認できない状態です。

実現させたいことは、入力画面でセレクトボックスの選択肢によって、確認画面の「カテゴリA」を選択したなら「カテゴリA」だけを表示、「カテゴリC」を選択したなら「カテゴリC」を表示させたいです。(説明がわかりにくいと思いますので、確認画面ソースコードもを記述しております)

また、自動送信メールにもセレクトボックスの選択肢を反映させたいのですが、参考サイトを元にカテゴリ毎でメール本文を分岐することはできました。
ですが、メールの本文に改行がないため入力した項目が１行でまとまってしまいます。
メール本文に改行を加えるカスタマイズはできるのでしょうか。

お手数をおかけいたしますが、ご教示いただければ幸いです。

###MW WP Formソースコード

<div class="personal_info">
  <p>お名前</p>
  [mwform_text name="name" id="name"]

  <p>電話番号</p>
  [mwform_tel name="tel" id="tel"]

  <p>メールアドレス</p>
  [mwform_email name="email" id="email"]
</div>

<div class="categories">
  <p>カテゴリ選択</p>
  [mwform_select name="カテゴリ選択" children="カテゴリA,カテゴリB,カテゴリC" id="cate_select"]

  <div id="category_a" class="content"> 
    <p>カテゴリA</p>
    [mwform_text name="好きなスポーツ選手"]
    [mwform_text name="好きなスポーツブランド"]
  </div>
 
  <div id="category_b" class="content">
    <p>カテゴリB</p>
    [mwform_image name="写真"]
  </div>

  <div id="category_c" class="content">
    <p>カテゴリC</p>
    [mwform_checkbox name="球技" children="サッカー,野球,バスケ" separator=","]
    [mwform_textarea name="その他質問"]
  </div>
</div>

 
[mwform_bback value="back"]戻る[/mwform_bback][mwform_bconfirm value="confirm"]確認する[/mwform_bconfirm][mwform_bsubmit name="send"]送信する[/mwform_bsubmit]
```

###jQueryソースコード
```ここに言語を入力
$(function(){
  $(".content").css({"display":"none"});

  $("#cate_select").on("change", function() {
    var val = $(this).val();

    if (val === 'カテゴリA'){
      $(".content").fadeOut();
      $("#category_a").fadeIn();

    } else if (val === 'カテゴリB'){
      $(".content").fadeOut();
      $("#category_b").fadeIn();

    } else if (val === 'カテゴリC'){
      $(".content").fadeOut();
      $("#category_c").fadeIn();
    }
  });
});

```

###カテゴリCを選択した場合(確認画面)
```ここに言語を入力
<div class="personal_info">
  <p>お名前</p>
  <p>  山田 太郎<input type="hidden" name="name" value="山田 太郎"></p>

  <p>電話番号</p>
  <p>  000-0000-0000<input type="hidden" name="tel[data]" value="000-0000-0000"><input type="hidden" name="tel[separator]" value="-"></p>

  <p>メールアドレス</p>
  <p>  [e-mail]<input type="hidden" name="email" value="[e-mail]"></p>
</div>

<div class="categories">
  <p>カテゴリ選択</p>
  <p>  カテゴリC<input type="hidden" name="カテゴリ選択" value="カテゴリC">
  <input type="hidden" name="__children[カテゴリ選択][]" value="{&quot;\u30ab\u30c6\u30b4\u30eaA&quot;:&quot;\u30ab\u30c6\u30b4\u30eaA&quot;,&quot;\u30ab\u30c6\u30b4\u30eaB&quot;:&quot;\u30ab\u30c6\u30b4\u30eaB&quot;,&quot;\u30ab\u30c6\u30b4\u30eaC&quot;:&quot;\u30ab\u30c6\u30b4\u30eaC&quot;}"></p>

  <div id="category_a" class="content is-show" style="display: none;">
    <p>カテゴリA</p>
    <p>    <input type="hidden" name="好きなスポーツ選手" value=""><br>
      <input type="hidden" name="好きなスポーツブランド" value="">
    </p>
  </div>

  <div id="category_b" class="content" style="display: none;">
    <p>カテゴリB</p>
    <p>    
    </p>
  </div>

  <!-- この#category_cのdivを表示させたい -->
  <div id="category_c" class="content" style="display: none;">
    <p>カテゴリC</p>
    <p>    サッカー,野球<input type="hidden" name="球技[data]" value="サッカー,野球"><input type="hidden" name="球技[separator]" value=","><input type="hidden" name="__children[球技][]" value="{&quot;\u30b5\u30c3\u30ab\u30fc&quot;:&quot;\u30b5\u30c3\u30ab\u30fc&quot;,&quot;\u91ce\u7403&quot;:&quot;\u91ce\u7403&quot;,&quot;\u30d0\u30b9\u30b1&quot;:&quot;\u30d0\u30b9\u30b1&quot;}"><br>
    質問内容<input type="hidden" name="その他質問" value="質問内容">
    </p>
  </div>

</div>

<p><button type="submit" name="submitBack" value="back">戻る</button><button type="submit" name="send" value="send">送信する</button></p>


```

Answer 1

自己解決いたしましたので、改善したコードを下記に記述いたします。
セレクトボックスで選択したvalueの値を取得するようにしています。

$(function(){
  $(".content").css({"display":"none"});

  $("#cate_select").on("change", function() {
    var val = $(this).val();

    if (val === 'カテゴリA'){
      $(".content").fadeOut();
      $("#category_a").fadeIn();

    } else if (val === 'カテゴリB'){
      $(".content").fadeOut();
      $("#category_b").fadeIn();

    } else if (val === 'カテゴリC'){
      $(".content").fadeOut();
      $("#category_c").fadeIn();
    }
  });

  var selectedA = $('#cate_select option[value="カテゴリA"]').prop('selected'),
      selectedB = $('#cate_select option[value="カテゴリB"]').prop('selected'),
      selectedC = $('#cate_select option[value="カテゴリC"]').prop('selected');
  var inputVal = $('#cate_select').find('input[type="hidden"]').val();

  if(selectedA || inputVal === 'カテゴリA'){
    $("#category_a").show();
  } else if(selectedB || inputVal === 'カテゴリB'){
    $("#category_a
b").show();
  } else if(selectedC || inputVal === 'カテゴリC'){
    $("#category_c").show();
  }

});