Contact Form 7 Multi-Step Forms で、前のフォームからの入力値に応じて条件分岐をする

Contact Form7 って、いろんな組み合わせプラグインがあってカスタマイズ性が高く、めっちゃ便利ですね。

ページを分割して長いフォームを作ることができる Contact Form Multi-Step Forms。
ja.wordpress.org

ユーザーの入力値に応じて、質問項目の出し分け（条件分岐）ができる Contact Form Conditional Fields 。
ja.wordpress.org

どちらもすごく便利なプラグインですが、両者を組み合わせても、前のフォームの入力値に応じて条件分岐をすることはできません。
Conditional Fields は、同じページのフォーム内の入力値からしか条件を引っ張れないためです。

そこで、Multi-Step で作った前ページのフォームから値をとって、それを元に質問項目を出し分ける JavaScript を書きました。
1ページ目のフォーム内の "prefecture" というフォームへの入力内容が「岐阜」だった場合のみ、次のページでのフォームで「美濃」「飛騨」を選ばせるラジオボタンを出す、というサンプルです。

以下は Contact Form 7 の2つ目のフォームに記載しておく内容。Multi-step プラグインで用意される [multiform] で前フォームの回答内容を取得できますが、値を使うだけなので非表示にしておきます。

<label id="prefecture" class="hide">[multiform "prefecture"]</label>
<div id="area" class="none">
地域を選んでください
  [radio area use_label_element "飛騨地方" "美濃地方"]
</div>

上記にあてる CSS はこちら。[multiform] は値を使うので隠すだけの visibility: hidden とし、div は条件に該当しない限り使わないので display: none で存在を消しておきます。

.hide {
  visibility:hidden;
}

.none {
  display: none;
}

そして、こちらの js を body 下部に挿入。prefecture が岐阜の時のみ、ラジオボタンのエリアを display: block に上書きしています。

  prefecture = document.getElementById("prefecture").textContent;
  var elem;
  if ( prefecture == "岐阜" ) {
    elem = document.getElementById("area");
    elem.style.display ="block";
  }