条件分岐を使いながら確認画面も使う時のテクニック Conditional Fields【Contact Form 7】Multi-Step Forms -WordPress

WordPressにて、Contact Form 7プラグインのお問い合わせフォームを確認画面を追加するのに便利なのが、「Contact Form 7 Multi-Step Forms」、そして、条件分岐で問い合わせフォームの分岐を作れるのが「Conditional Fields for Contact Form 7」だ。

これら2つを組み合わせて、条件によってフォームの質問を条件分岐しつつ、確認画面を表示しようとしたら、ハマった。

問題点

Conditional Fields for Contact Form 7の条件分岐 が、確認画面に移動すると動かない。画面が切り替わると、条件分岐の値を取得できない。

解決策

確認画面にこっそりテキストフィールドを用意しておき、JavaScriptで条件分岐に使っている値をテキストフィールドの値に代入して引き継ぐ。それをトリガーにして、確認画面でも条件分岐を発動させる。テキストフィールドは、CSSが画面の外に配置しておく（hiddenにすると条件分岐に使えないため）この方法の参考になったのが、こちらの記事。感謝です。

✓ あわせて読みたい

ContactForm7の条件分岐つきフォームで確認画面実装 – ABCウェブエンジニアblog

コード

JavaScriptコードは、確認画面の固定ページのContact Form 7 の下に、カスタムHTMLで配置する。

<script>
//今回の入力要素を取得
var current_category = document.querySelector("[name=menu-type2]");

//前回入力値を表示部から取得
var last_category_element = document.querySelector("#menu-type p");

//表示部からの入力が存在する場合のみ、その値を取得します
var last_category = last_category_element ? last_category_element.innerText : null;

//今回の入力要素値に前回の値を代入。
current_category.value = last_category;

</script>

今回は、入力画面では、”menu-type”のフィールドを条件分岐に使っていたので、その値を取得し、確認画面に配置したテキストボックスの”menu-type2″に代入する。

確認画面に、こそっと配置するテキストボックスはこちら。

[text menu-type2 class:menu-type2]

なお、取得するために、確認画面の条件分岐のトリガーになっているフィールドにIDが振られていないため、DIVで囲ってIDを設定する。こんな感じ。

<div id="menu-type">[multiform menu-type]</div>

テキストボックスを画面の外に配置するCSSはこちら。

input.wpcf7-form-control.wpcf7-text.menu-type2 {
 position: absolute;
  top: 0;
  left: -50vw;
}

これらを組み合わせると、確認画面でも条件分岐が動く。

ここまで解決するのに、かなりハマったので誰かの役に立つと嬉しい。