【プラグインなし】自作でcontactform7に確認画面と完了画面を作るjQuery・css【コピペでOK】
こんにちは。NNCの中里です。
WordPressでサイトを作る際にcontactform7でフォームを作るという方が多いと思います。
またcontactform7はデフォルトでは確認画面と完了画面を出すことができないため、確認画面や完了画面を作る場合「Contact Form 7 Multi-Step Forms」プラグインを利用するケースが一般的になりますね。
ただcontactform7にこのプラグインを入れていると、空のメールが届くという記事を見つけたため、今回はプラグインを使用せず、jQueryとcssを使って自作でcontactform7に確認画面と完了画面を作りたいと思います！
目次
【コピペでOK】contactform7確認画面・完了画面作成用コード
まずは下のコードをcotntactform7のフォーム編集画面にコピペするだけで、簡単に確認画面と完了画面を作ることができます！
<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");
// 取得した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"]';
//必須項目の内容が変わった際の処理
$(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>
cssやjsの記述は外部ファイル化しても動作します。
今回のプログラムはinput要素・select要素・textarea 要素に対応しているため、テキスト入力欄・ラジオボタン・ドロップダウンメニュー・テキストエリアなど必要に応じて追加（または削除）してください。
HTMLの編集（項目の追加やclass名の編集）
今回は入力画面側のid名と確認画面側のclass名を連携させるため、項目を追加する際にはcontactform7の各入力項目には、必ずid名を指定してください。
また追加した項目が確認画面に表示されるようHTMLの編集を行います。
その際にspan要素のclass名を「confirm_id名」となるように設定してください。
各画面やボタンのclass名など編集する場合は、下を参考に該当箇所を編集してください
・入力画面：<div class=”input_area”>〜</div>
・確認画面：<div class=”confirm_area”>〜</div>
・完了画面：<div class=”thanks_area”>〜</div>
・確認ボタン：<input type=”button” class=”confirm_button” value=”確認する” disabled>
・戻るボタン：<input type=”button” class=”back_button” value=”戻る”>
※確認ボタンはdisabled必須項目が入力されるまで無効化
CSSの編集（class名の編集・デフォルトのメッセージ表示）
HTML側で確認画面・完了画面のclass名を編集した場合、以下のcssのclass名も必ず編集を行なってください。
/*確認画面と完了画面を非表示*/
.confirm_area,
.thanks_area {
display: none;
}またデフォルトで表示されるメッセージを以下の記述で非表示にしています。
表示させたい場合セレクタごと削除してください。
/*デフォルトのサンクスメッセージを非表示*/
.wpcf7-response-output{
display: none;
}JavaScriptの編集（class名の編集）
class名の編集
HTML側で確認画面・完了画面のclass名を編集した場合、以下のJavaScriptのclass名も必ず編集を行なってください。
//入力欄の内容が変わった際の処理 入力した内容が確認画面へ登録される
$(".input_area input,.input_area select,.input_area textarea").change(function () {
.
.
.
})
//確認ボタンを押した際の処理 入力画面を非表示・確認画面を表示
$(".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").show();
$(".confirm_area").hide();
$(window).scrollTop($('#navi').position().top);
})ボタンクリック後のスクロール位置指定
各種ボタンをクリックした際、スクロール位置を指定している記述箇所は以下となります。
$(window).scrollTop($('#navi').position().top);初期設定では#naviの位置にスクロールが移動するようになっているため、必要に応じて変更してください。
追記：承諾確認チェックを使う場合
「個人情報保護方針に承諾する」の承諾確認チェックボックスを使用する場合、一部ソースコードの編集が必要となります。
まずは入力画面側に上図赤枠のような承諾確認チェックを用意してください。
続いてJavaScript側の //必須項目定数の作成 から下を削除して、以下の記述に置き換えます。
入力画面側に生成された acceptance-数字 を、JavaScript側の定数部分で指定するところがポイントになります。（サンプルで acceptance-86 となっている箇所です。）
//必須項目チェック用 定数の作成
const target = '[aria-required="true"]';
const target2 = '[name="acceptance-86"]';
const target3 = '[aria-describedby]'
//キー操作、状態変化をトリガーに実行
$(target + "," + target2 + "," + target3).on('keydown keyup keypress change', function () {
// alert("test");
//判定用のフラグ
let flag = true;
let flag2 = $(target2).is(":checked");
let flag3 = $(target3).attr("aria-describedby");
//指定要素をループで１つずつ確認
$(target).each(function (e) {
if ($(target).eq(e).val() === "") {
flag = false;
}
});
//フラグをみてtrueなら確認ボタンを有効。falseなら無効にする
if (flag && flag2 && !flag3) {
//必須項目すべて入力済みであれば有効にする
$('.confirm_button').removeAttr("disabled");
}
else {
//未入力など漏れがある場合は無効にする
$('.confirm_button').attr("disabled", "");
}
});承諾確認チェックはその他の必須項目と同様の扱いにならないため、改めてJavaScriptによる記述を追記してチェックが入るまで確認ボタンを無効化しています。
まとめ
今回はcontactform7にプラグインを使わず確認画面と完了画面を作るコードを紹介しました。
コピペで簡単に動作しますが、HTMLやCSSの編集を行えばサイトのデザインに合わせてカスタマイズすることも可能ですので是非使ってみてください！
