contact form7で、プラグインを使わず、確認画面を出す方法。
こちらのサイトを参考に、メールアドレスを2回入力。
https://nnc-studio.jp/plugin/2023/10/17/contactform7_confirm_thanks/
<style>
/*確認画面と完了画面を非表示*/
.confirm_area,
.thanks_area {
display: none;
}
/*デフォルトのサンクスメッセージを非表示*/
.wpcf7-response-output{
display: none;
}
/* エラーメッセージのスタイル */
.error-message {
color: #ff0000;
font-size: 0.8em;
margin-top: 5px;
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>
<p class="error-message" id="email-error"></p>
<label> メールアドレス（確認用）（必須）
[email* email_confirm id:email_confirm]</label>
<p class="error-message" id="email-match-error">メールアドレスが一致していません</p>
<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>
//（※※submitにしないと、バリデーションしないことがあります。逆に画面遷移して戻るボタンを押した後にフォームが空になるのは、submitにしたせいであるかもしれません）
</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;
// メールアドレス一致確認用のフラグ
var emailsMatch = false;
// ラジオボタン初期値の取得 以下の記述で全てのラジオボタンの初期値を取得
$("[type='radio']:checked").each(function (index) {
// ラジオボタン値取得
radio = $(this).val();
// ラジオボタンの祖先要素からid名を取得
id = $(this).parents("[id]").attr("id");
// 取得したid名を確認用のclass名末尾に付与して、確認画面の値を指定
$(".confirm_" + id).text(radio);
});
// メールアドレス一致確認
function validateEmails() {
var email = $("#email").val();
var emailConfirm = $("#email_confirm").val();
// 両方入力されている場合のみチェック
if (email !== "" && emailConfirm !== "") {
if (email !== emailConfirm) {
$("#email-match-error").show();
emailsMatch = false;
} else {
$("#email-match-error").hide();
emailsMatch = true;
}
} else {
// どちらかが空の場合は比較しない
$("#email-match-error").hide();
emailsMatch = false;
}
// 必須項目チェックと合わせて確認ボタンの有効/無効を切り替え
checkRequiredFields();
}
// メールアドレス入力フィールドの監視
$("#email, #email_confirm").on('keydown keyup keypress change', function() {
validateEmails();
});
//入力欄の内容が変わった際の処理 入力した内容が確認画面へ登録される
$(".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");
// 取得したid名を確認用のclass名末尾に付与して、確認画面の値を指定
$(".confirm_" + id).append(check + " / ");
}//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"]';
// 必須項目チェックとメールアドレス一致確認をまとめて行う関数
function checkRequiredFields() {
//判定用フラグ
let flag = true;
//必須項目をループで１つずつ確認
$(target).each(function (e) {
if ($(target).eq(e).val() === "") {
flag = false;
}
});
//フラグがtrueでメールアドレスも一致していれば確認ボタンを有効。それ以外は無効にする
if (flag && emailsMatch) {
//必須項目すべて入力済みかつメールアドレスが一致していれば有効にする
$('.confirm_button').removeAttr("disabled");
}
else {
//未入力など漏れがある場合または、メールアドレスが一致していない場合は無効にする
$('.confirm_button').attr("disabled","");
}
}
//必須項目の内容が変わった際の処理
$(target).on('keydown keyup keypress change', function () {
checkRequiredFields();
});
})
</script>