残りの設問数を表示するJavascriptをワードプレスプラグインContact form7内で動作させたいのですが、上手く動作しません。

###前提・実現したいこと
ワードプレスプラグイン「Contact form7」を利用して問い合わせフォームを作成し、その中で残りの設問数をパーセント表示をしたいです。

現在の状況としてましては、拾ってきたコードを基に使用したいコードを作成し、テスト環境ではソースコードの状態では動作を確認しました。
こちらのコードをContact form7で動作させようと思うと動きません。

またこちらのコードではinputの数を数えるようにできていると思うのですが、selectなどの項目も合わせて数える場合はどのように設定したらよいでしょうか？

###試したこと
・本番のワードプレス環境では動作（コンタクトフォーム７以外の部分）

###該当のソースコード

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ajax</title>
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
    <form action="form.html" method="post" name="hoge" id="js-form2">

<p id="output">dummy</p><p>%</p>
  <ul class="qustionwrap">
    <li>
      <input type="radio" id="qustion01_1" name="qustion01" value="1">
      <label for="qustion01_1">YES</label>
    </li>
    <li>
      <input type="radio" id="qustion01_2" name="qustion01" value="2">
      <label for="qustion01_2">NO</label>
    </li>
    <li>
      <input type="radio" id="qustion01_3" name="qustion01" value="3">
      <label for="qustion01_3">どちらでもない</label>
    </li>
  </ul>
  <ul class="qustionwrap">
    <li>
      <input type="radio" id="qustion02_1" name="qustion02" value="1">
      <label for="qustion02_1">YES</label>
    </li>
    <li>
      <input type="radio" id="qustion02_2" name="qustion02" value="2">
      <label for="qustion02_2">NO</label>
    </li>
    <li>
      <input type="radio" id="qustion02_3" name="qustion02" value="3">
      <label for="qustion02_3">どちらでもない</label>
    </li>
  </ul>
  <ul class="qustionwrap">
    <li>
      <input type="radio" id="qustion03_1" name="qustion03" value="1">
      <label for="qustion03_1">YES</label>
    </li>
    <li>
      <input type="radio" id="qustion03_2" name="qustion03" value="2">
      <label for="qustion03_2">NO</label>
    </li>
    <li>
      <input type="radio" id="qustion03_3" name="qustion03" value="3">
      <label for="qustion03_3">どちらでもない</label>
    </li>
  </ul>
  <ul class="qustionwrap">
    <li>
      <input type="radio" id="qustion030_1" name="qustion030" value="1">
      <label for="qustion030_1">YES</label>
    </li>
    <li>
      <input type="radio" id="qustion030_2" name="qustion030" value="2">
      <label for="qustion030_2">NO</label>
    </li>
    <li>
      <input type="radio" id="qustion030_3" name="qustion030" value="3">
      <label for="qustion030_3">どちらでもない</label>
    </li>
  </ul>
  <ul class="qustionwrap">
    <li>
      <input type="radio" id="qustion030_1" name="qustion031" value="1">
      <label for="qustion030_1">YES</label>
    </li>
    <li>
      <input type="radio" id="qustion030_2" name="qustion031" value="2">
      <label for="qustion030_2">NO</label>
    </li>
    <li>
      <input type="radio" id="qustion030_3" name="qustion031" value="3">
      <label for="qustion030_3">どちらでもない</label>
    </li>
  </ul>
  <ul class="qustionwrap">
    <li>
      <input type="radio" id="qustion030_1" name="qustion032" value="1">
      <label for="qustion030_1">YES</label>
    </li>
    <li>
      <input type="radio" id="qustion030_2" name="qustion032" value="2">
      <label for="qustion030_2">NO</label>
    </li>
    <li>
      <input type="radio" id="qustion030_3" name="qustion032" value="3">
      <label for="qustion030_3">どちらでもない</label>
    </li>
  </ul>
</form>

<div class="message" id="message">
<!-- 一時的にcssを直書きしてます汚くすいません！ -->
<div class="comment">
    <div id="restMessage">あと<span id="restCheckBoxLength"></span>問です。</div>
    <div id="lastMessage" style="display:none;">お疲れ様でした。チェック項目の入力が完了しました。最後に送付先情報を入力してください。</div>
</div>
<div class="bar" style="width:300px;height:30px;border:solid 1px #ccc;"><p style="width:0%;height:30px;background:red;" id="restCheckBoxPercent"></p></div>
</div>


    <script>
        var $form = $('#js-form2'),
                $restCheckBoxLength  = $('#restCheckBoxLength'),
                $restCheckBoxPercent = $('#restCheckBoxPercent'),
                $message             = $('#message'),
                $restMessage         = $('#restMessage'),
                $lastMessage         = $('#lastMessage'),
                radio_type_array = [],
                radio_type_length = 0;

        //チェックボックスが入っている数を習得
        var checkedInputLength = function(){
            return $form.find('input:checked').size();
        }

        //残り何パーセントかを習得
        var percentageFromForm = function(){
            return checkedInputLength() / radio_type_length * 100 + '%';
        }
        //パーセント習得表示用
        var percentageFromForm2 = function(){
            return checkedInputLength() / radio_type_length * 100;
        }

        //残り○個とパーセントを入れる
        var updateRestCheckBox = function(){
            $restCheckBoxLength.text(radio_type_length - checkedInputLength());
            if (percentageFromForm() === '100%') {
                $restMessage.hide();
                $lastMessage.show();
                setTimeout(function(){
                    $message.hide();
                },5000);
            }
            $restCheckBoxPercent.css('width', percentageFromForm());
        }

        //パーセント表示
       var updateRestCheckBox2 = function(){
	var percentNum = (percentageFromForm2());
	var percentNum2 = Math.round(percentNum);
	    target = document.getElementById("output");
	    target.innerHTML = (percentNum2);
	}


        //項目が何個あるかを習得
        $form.find('input').each(function(){
            var $this = $(this),
                    name  = $this.attr('name');
            if (radio_type_array.indexOf(name) == -1) {
                radio_type_array.push(name);
                radio_type_length++;
            }
        })

        //フォームの値が更新されたら更新状況をセット
        $form.on('change', function(){
            updateRestCheckBox();
        })

        //最初の値をセット
        updateRestCheckBox();

        //フォームの値が更新されたら更新状況をセット
        $form.on('change', function(){
            updateRestCheckBox2();
        })

        //最初の値をセット
        updateRestCheckBox2();
    </script>
</body>
</html>