この記事でわかること
WordPressで「Contact Form 7」に確認画面を自作した際に、チェックボックスの変更が確認画面に反映されない問題を解決する方法
経緯と問題点
WordPressで構築したWEBサイトのお問い合わせフォームとして使用されることが多い「Contact Form 7」。デフォルト機能では確認画面が実装されておらず、プラグインを使って確認画面を追加することも多いかと思う。
ホームページを構築している際に「ContactForm7 Multi-Step Forms」を使っていたが、デフォルトで実装されている「｜（パイプライン）」を活用した自動メールの送付先を切り分ける際プラグインとの相性が悪く、送信先のメールアドレスは動作するが、テキストが反映されないというエラーが起きた。そのため、プラグインをやめて確認画面は自作することにした。
参考になるサイトがいくつかあり実装したところ、以下の問題が起きた。
確認画面から戻ってチェックボックスのチェックを外したり、つけたりすると選択していた値が削除されずに追加され続けてしまう
そのため、参考サイト様のソースを少し変更して問題を解決したので備忘録として残しておく。
参考サイト様
ソースを追加する場所やソースの解説がとてもわかりやすいサイト様ですので、実装時は以下のリンクより詳細をご確認下さい。
【コピペで簡単】自作でcontactform7に確認画面とサンクス画面を作る方法【プラグインなし】 - STUDIO NNC 合同会社｜Web制作・ホームページ制作 | 東京都稲城市 | IT導入支援事業者
contactform7にプラグインを使わず確認画面と完了画面を作るコードを紹介します。コピペで簡単に動作するコードです。
nnc-studio.jp
参考サイト様の元ソース
<style>
/*確認画面と完了画面を非表示*/
.confirm_area,
.thanks_area {
display: none;
}
/*デフォルトのサンクスメッセージを非表示*/
.wpcf7-response-output{
display: none;
}
</style>
<!-- 入力画面 -->
<div class="input_area">
<label> お問合せ種別
[radio category id:category use_label_element default:1 "お仕事のご相談" "求人について" "その他"]</label>
<label> 氏名（必須）
[text* uname id:uname]</label>
<label> メールアドレス（必須）
[email* email id:email]</label>
<label> お住まい（必須）
[select* address id:address "北海道" "青森県" "秋田県" "岩手県" "宮城県" "新潟県"]</label>
<label> 生年月日
[date date min:1980-01-01 id:date]</label>
<label> 性別
[radio gender id:gender use_label_element default:1 "女性" "男性"]</label>
<label> メッセージ本文
[textarea content id:content]</label>
<input type="button" class="confirm_button" value="確認する" disabled>
</div>
<!-- 確認画面 -->
<div class="confirm_area">
<h2>入力内容確認</h2>
<p>以下の内容でよろしいですか？</p>
お問合せ種別：<span class="confirm_category"></span>
氏名：<span class="confirm_uname"></span>
メールアドレス：<span class="confirm_email"></span>
お住まい：<span class="confirm_address"></span>
生年月日：<span class="confirm_date"></span>
性別：<span class="confirm_gender"></span>
メッセージ本文：<span class="confirm_content"></span>
[submit "送信"]
<input type="button" class="back_button" value="戻る">
</div>
<!-- 完了画面 -->
<div class="thanks_area">
<h2>送信完了</h2>
<p>お問合せいただきありがとうございました。<br>
2営業日以内に担当者よりご返信差し上げます。</p>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
$(function () {
// 入力内容取得用 変数
var val;
// id取得用 変数
var id;
// ラジオボタン値取得用 変数
var radio;
// チェックボックス値取得用 変数
var check;
// input要素のtype属性値取得用（ラジオボタンであるかどうか判別のため）
var type;
// ラジオボタン初期値の取得 以下の記述で全てのラジオボタンの初期値を取得
$("[type='radio']:checked").each(function (index) {
// ラジオボタン値取得
radio = $(this).val();
// ラジオボタンの祖先要素からid名を取得
id = $(this).parents("[id]").attr("id");
// 取得したid名を確認用のclass名末尾に付与して、確認画面の値を指定
$(".confirm_" + id).text(radio);
});
//入力欄の内容が変わった際の処理 入力した内容が確認画面へ登録される
$(".input_area input,.input_area select,.input_area textarea").change(function () {
//入力内容取得
val = $(this).val();
//type属性の取得
type = $(this).attr("type");
//type属性がラジオボタンだった場合の処理
if (type == "radio") {
// ラジオボタン値取得
radio = $(this).val();
// ラジオボタンの祖先要素からid名を取得
id = $(this).parents("[id]").attr("id");
// 取得したid名を確認用のclass名末尾に付与して、確認画面の値を指定
$(".confirm_" + id).text(radio);
}//type属性がチェックボックスだった場合の処理
else if (type == "checkbox") {
// チェックボックス値取得
check = $(this).val();
// ラジオボタンの祖先要素からid名を取得
id = $(this).parents("[id]").attr("id");
}//type属性がラジオボタンではなかった場合の処理
else {
// 入力欄のid名を取得
id = $(this).attr("id");
// 取得したid名を確認用のclass名末尾に付与して、確認画面の値を指定
$(".confirm_" + id).text(val);
}
})
//確認ボタンを押した際の処理 入力画面を非表示・確認画面を表示
$(".confirm_button").click(function () {
$(".input_area").hide();
$(".confirm_area").show();
$(window).scrollTop($('#navi').position().top);
})
//戻るボタンを押した際の処理 入力画面を表示・確認画面を非表示
$(".back_button").click(function () {
$(".input_area").show();
$(".confirm_area").hide();
$(window).scrollTop($('#navi').position().top);
})
//送信ボタンを押した際の処理 サンクス（完了）画面を表示・確認画面を非表示
$("[type='submit']").click(function () {
$(".thanks_area").fadeIn(2000);
$(".confirm_area").hide();
$(window).scrollTop($('#navi').position().top);
})
//必須項目チェック用 定数の作成
const target = '[aria-required="true"]';
//必須項目の内容が変わった際の処理
$(target).on('keydown keyup keypress change', function () {
//判定用フラグ
let flag = true;
//必須項目をループで１つずつ確認
$(target).each(function (e) {
if ($(target).eq(e).val() === "") {
flag = false;
}
});
//フラグがtrueなら確認ボタンを有効。falseなら無効にする
if (flag) {
//必須項目すべて入力済みであれば有効にする
$('.confirm_button').removeAttr("disabled");
}
else {
//未入力など漏れがある場合は無効にする
$('.confirm_button').attr("disabled","");
}
});
})
</script>修正したソース
<style>
/*確認画面と完了画面を非表示*/
.confirm_area,
.thanks_area {
display: none;
}
/*デフォルトのサンクスメッセージを非表示*/
.wpcf7-response-output{
display: none;
}
</style>
<!-- 入力画面 -->
<div class="input_area">
<label> お問合せ種別
[radio category id:category use_label_element default:1 "お仕事のご相談" "求人について" "その他"]</label>
<label> 氏名（必須）
[text* uname id:uname]</label>
<label> メールアドレス（必須）
[email* email id:email]</label>
<label> お住まい（必須）
[select* address id:address "北海道" "青森県" "秋田県" "岩手県" "宮城県" "新潟県"]</label>
<label> 生年月日
[date date min:1980-01-01 id:date]</label>
<label> 性別
[radio gender id:gender use_label_element default:1 "女性" "男性"]</label>
<label> メッセージ本文
[textarea content id:content]</label>
<input type="button" class="confirm_button" value="確認する" disabled>
</div>
<!-- 確認画面 -->
<div class="confirm_area">
<h2>入力内容確認</h2>
<p>以下の内容でよろしいですか？</p>
お問合せ種別：<span class="confirm_category"></span>
氏名：<span class="confirm_uname"></span>
メールアドレス：<span class="confirm_email"></span>
お住まい：<span class="confirm_address"></span>
生年月日：<span class="confirm_date"></span>
性別：<span class="confirm_gender"></span>
メッセージ本文：<span class="confirm_content"></span>
[submit "送信"]
<input type="button" class="back_button" value="戻る">
</div>
<!-- 完了画面 -->
<div class="thanks_area">
<h2>送信完了</h2>
<p>お問合せいただきありがとうございました。<br>
2営業日以内に担当者よりご返信差し上げます。</p>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
$(function () {
// 入力内容取得用 変数
var val;
// id取得用 変数
var id;
// ラジオボタン値取得用 変数
var radio;
// チェックボックス値取得用 変数
var check;
// input要素のtype属性値取得用（ラジオボタンであるかどうか判別のため）
var type;
// ラジオボタン初期値の取得 以下の記述で全てのラジオボタンの初期値を取得
$("[type='radio']:checked").each(function (index) {
// ラジオボタン値取得
radio = $(this).val();
// ラジオボタンの祖先要素からid名を取得
id = $(this).parents("[id]").attr("id");
// 取得したid名を確認用のclass名末尾に付与して、確認画面の値を指定
$(".confirm_" + id).text(radio);
});
//入力欄の内容が変わった際の処理 入力した内容が確認画面へ登録される
$(".input_area input,.input_area select,.input_area textarea").change(function () {
//入力内容取得
val = $(this).val();
//type属性の取得
type = $(this).attr("type");
//type属性がラジオボタンだった場合の処理
if (type == "radio") {
// ラジオボタン値取得
radio = $(this).val();
// ラジオボタンの祖先要素からid名を取得
id = $(this).parents("[id]").attr("id");
// 取得したid名を確認用のclass名末尾に付与して、確認画面の値を指定
$(".confirm_" + id).text(radio);
}//type属性がチェックボックスだった場合の処理
else if (type == "checkbox") {
// チェックボックス値取得
check = $(this).val();
// ラジオボタンの祖先要素からid名を取得
id = $(this).parents("[id]").attr("id");
if($(this).is(':checked')) {
// 取得したid名を確認用のclass名末尾に付与して、確認画面の値を指定
$(".confirm_" + id).append(check + " / ");
} else {
//checkが外れたら確認画面用の値を削除
var replaceText = check + " / ";
var newText = $(".confirm_" + id).text().replace(replaceText, '');
$(".confirm_" + id).text(newText);
}
}//type属性がラジオボタンではなかった場合の処理
else {
// 入力欄のid名を取得
id = $(this).attr("id");
// 取得したid名を確認用のclass名末尾に付与して、確認画面の値を指定
$(".confirm_" + id).text(val);
}
})
//確認ボタンを押した際の処理 入力画面を非表示・確認画面を表示
$(".confirm_button").click(function () {
$(".input_area").hide();
$(".confirm_area").show();
$(window).scrollTop($('#navi').position().top);
})
//戻るボタンを押した際の処理 入力画面を表示・確認画面を非表示
$(".back_button").click(function () {
$(".input_area").show();
$(".confirm_area").hide();
$(window).scrollTop($('#navi').position().top);
})
//送信ボタンを押した際の処理 サンクス（完了）画面を表示・確認画面を非表示
$("[type='submit']").click(function () {
$(".thanks_area").fadeIn(2000);
$(".confirm_area").hide();
$(window).scrollTop($('#navi').position().top);
})
//必須項目チェック用 定数の作成
const target = '[aria-required="true"]';
//必須項目の内容が変わった際の処理
$(target).on('keydown keyup keypress change', function () {
//判定用フラグ
let flag = true;
//必須項目をループで１つずつ確認
$(target).each(function (e) {
if ($(target).eq(e).val() === "") {
flag = false;
}
});
//フラグがtrueなら確認ボタンを有効。falseなら無効にする
if (flag) {
//必須項目すべて入力済みであれば有効にする
$('.confirm_button').removeAttr("disabled");
}
else {
//未入力など漏れがある場合は無効にする
$('.confirm_button').attr("disabled","");
}
});
})
</script>ソースの緑色の太字が加筆した部分。チェックボックスを操作した時点で、確認画面用のHTMLにテキストが追加されてしまうためチェックを外してもテキストが削除されないのが原因のようだったから、チェックボックスを操作したらHTML内に同じ値があるか判断して、削除されるようにした。これで問題なくチェックボックスの変更にも対応した自作の確認画面が導入できた。
類似した自作JavaScriptも同じようにチェックボックスの操作に対応していないものがいくつかあったようなので、困った方のお役に立てば幸いです。プラグインは便利だけど、複数のプラグインを組み合わせると予想していない問題が起きることもあって日々勉強だ。
コメント