竹田奈央 
Multi-Step FormsとConditional Fields両方使いたいんだけど、
前画面に戻ると値が消えてて困る…
今回の記事は上記のような方におすすめ。
今回の記事では、プラグインMulti-Step FormsとConditional Fieldsを同時に使用する方法について…WordPress初心者でも理解できるよう、わかりやすく解説いたします！
「Multi-Step Forms」は、人気のお問い合わせ用のWorePressプラグインです。お問い合わせのフォームを入力後、確認画面を表示したい時に手軽に導入するために用います。一方で、「Conditional Fields」はフォーム内の条件分岐を導入するためのプラグインです。ですが、このプラグインを同時に使おうとすると競合が発生し、「戻る」を押した時に、値が正しく保存されない不具合が発生してしまいました。今回は解決方法をまとめました！
気になる箇所あったらコメントで教えてね。
本記事の内容
なおこの記事は3分で読める内容です。
Multi-Step Formsのメリット【確認画面を手軽に作成！】
Contact Form 7には、確認画面と完了画面を作成する機能がありません。
しかし、「Contact Form 7 Multi-Step Forms」を使えば、Contact Form 7に確認画面と完了画面を追加することができます。具体的には「固定ページ」の作成と、「お問い合わせフォーム」で作成可能です。
また、「Contact Form add confirm」という確認画面作成用のプラグインもありますが、こちらは開発が数年前でストップしており、最新のWordPressでは正しく動くというチェックが行われていないので、こちらの「Contact Form 7 Multi-Step Forms」を使うことをお勧めします。
詳細な使い方は、こちらの記事「Contact Form 7に確認画面と完了画面を設定【Contact Form 7 Multi-Step Forms】」が参考になります。
Contact Form 7 Conditional Fieldsのメリット【条件分岐を作成！】
「Contact Form 7 Conditional Fields」は、Contact Form 7をカスタマイズして条件分岐を追記できるプラグインです。
例えば、お問い合わせフォームの中で「都道府県」の質問があった際に「北海道」と答えた場合のみ自由記入欄を追加する、といった使い方が可能です。ちなみに私の場合は、セレクト分の特定条件に当てはまった時のみ、次のセレクト分の値を書き換える、といった用途で元々使っていました。
ただ、今回のケースでは、「Multi-Step Forms」と競合して使えなかったため、直接jQueryを書く形で対応を行いました。（結論として、「Multi-Step Forms」を使わずに実現しました…）
不具合を解消したコード
<dd>
<label>
<!-- こちらのprefectureが常に表示するセレクト -->
[select* prefecture name:prefecture first_as_label "都道府県を選択してください" "東京都" "神奈川県" "埼玉県" "..."]
</label>
<label>
<!-- こちらのcityが選択された上記のprefectureによって表示を切り替えるセレクト -->
[select* city name:city first_as_label "詳細を選択してください" "世田谷区" "杉並区" "横浜市" "川崎市" "川越市" "さいたま市"]
</label>
</dd>上記のように、２つ目のセレクトに、全ての選択肢を含めます。つまりは、東京都だろうが、神奈川県だろうが、該当する市区町村をすべて２つ目のセレクトに含めます。
$(function(){
let select = document.querySelector('[name="prefecture"]');
if(select != null){
select.addEventListener('change', inputChange);
}
function inputChange(e){
let val = e.currentTarget.value;
let menu = [];
switch (val){
case '':
menu = ["詳細を選択してください"];
setSelect(menu);
break;
case '東京都':
menu = ["世田谷区", "杉並区"];
setSelect(menu);
break;
case '神奈川県':
menu = ["横浜市", "川崎市"];
setSelect(menu);
break;
case '埼玉県':
menu = ["川越市", "さいたま市"];
setSelect(menu);
break;
}
}
function setSelect( menu ){
let city = document.querySelector('[name="city"]'); // 入力ボックスの値を取得
// 初期化
while(city.lastChild){
city.removeChild(city.lastChild);
}
// メニュー項目のセット
for ( var i in menu )
{
var element = document.createElement('option');
element.setAttribute('value', menu[i]);
element.innerHTML = menu[i];
city.appendChild( element );
}
}
});上記のコードで、該当の都道府県が選択された場合のみ、当てはまる市区町村を、分岐で表示しています。
最初から全ての選択肢を含めておいて、後から書き換える、というのがミソってことですね！！わかった気がする…！！
（大丈夫かな…）
# 全ての選択肢をあらかじめ表示
[select* city name:city first_as_label "詳細を選択してください" "世田谷区" "杉並区" "横浜市" "川崎市" "川越市" "さいたま市"]
# 後から条件分岐で書き換える
switch (val){
case '':
menu = ["詳細を選択してください"];
setSelect(menu);
break;
case '東京都':
menu = ["世田谷区", "杉並区"];
setSelect(menu);
break;
case '神奈川県':
menu = ["横浜市", "川崎市"];
setSelect(menu);
break;
case '埼玉県':
menu = ["川越市", "さいたま市"];
setSelect(menu);
break;
}まとめ
以上、Contact Form 7のプラグインが競合した場合の解決策についてご紹介いたしました！
また、これ以外の方法でがあったらぜひコメントにてご教示ください！お願いいたします。
ふー！！ プルダウン作るのに半日使っちゃった！！
（深呼吸…）
また、Github Pagesを使ったブログ運営に興味のある方は、こちらの記事「【Github】Github Pagesでのブログ運営【長所と短所を解説】」や「【Git】Git FlowとGitHub Flowの比較【開発効率化】」もあわせてご覧ください！