ContactForm7の条件分岐つきフォームで確認画面実装

ContactForm7と条件分岐Conditional Fields、確認画面Muti-Step Formプラグイン併用問題

Wordpressで一般的によく使われているフォームプラグインとして有名な
「Contactform7」

こちらに確認画面や完了画面を追加するプラグインとして
「Contact Form 7 Multi-Step Forms」
が割と有名かと思います。

さらに条件分岐付きのフォームにするためには
「Conditional Fields for Contact Form 7」
というプラグインがよく使われているのですが、これとMulti-Step Formsのプラグインの併用で少々つまづきがあったので、解決法も合わせてメモしておきたいと思います。

問題：Conditional Fieldsがうまく動かないポイント

Conditional Fieldsは条件分岐の内容をフォームだけでなく送信されるメールにも反映できるのですが、その際のグループタグや条件がMulti-Step Formsを使用した画面遷移後のフォームには反映されません。

結果、以下のような流れで最終的に条件分岐、グループ表示切り替え出来ない状態になってしまいます。

フォーム入力画面(Conditional Fieldsによって条件分岐、グループで表示切り替え)
↓
↓ (Multi-Step Formsで内容引き継ぎ)
↓
確認画面(Conditional Fieldsによって条件分岐、グループで表示切り替え出来ない)
↓
↓(送信メールでも条件分岐、グループ表示切り替え出来ない)
↓
完了画面

解決方法

解決法としては確認画面で再度条件やグループをConditional Fieldsによって設定し、JavaScriptによって入力画面の情報を引き継ぐという方法です。

例として実際に対応したJSコード例を掲載しておきます。

//今回の入力要素を取得
var current_category= document.querySelector("[name=category]");
//前回入力値を表示部から取得
var last_category= document.querySelector("#category p").innerText;
//今回の入力要素値に前回の値を代入。
current_category.value = last_category;

注意点として、条件分岐判定の入力元のname属性がcategoryだった場合に、確認画面では[multiform category]として表示した場合、自動でpタグでマークアップされるため、div等で囲いidとしてcategoryを付与しています。
それによって「document.querySelector("#category p").innerText;」でテキストから値を取得しています。

上記のJSによって確認画面にて、前回から引き継いだ値が再度入力が出来ているので、確認画面内のフォームでもグループが使用できます。

勿論、メールでも同様にグループ分けが反映出来ます。

おそらくConditional FieldsのフックやJSON等から前回入力値を取得して処理することも可能かと思われますが、今回は手っ取り早くinnerTextで文字列を取得する方法をとっています。

JavaScript コードレシピ集

一歩先にいくWordPressのカスタマイズがわかる本