Contact Form 7で確認画面を設置するメリットとは？作成方法や手順も解説

「Contact form 7で確認画面を設定するメリットは？」

「Contact form 7で確認画面を設定する方法は？」

上記のような疑問を抱えているメディア運用者もいるのではないでしょうか。

「Contact Form 7」は、WordPressのプラグインです。活用すれば、お問い合わせフォームを簡単に設置できます。

シンプルで使いやすい反面、確認画面がないため送信完了したのかがわかりづらいなどの欠点もあるのが現状です。

そこで本記事では、Contact Form 7で確認画面を設置するメリットや作成方法などを詳しく解説します。ぜひ、本記事を参考にして適切に確認画面を設定しましょう。

また、formrunとContact Form7の違いについても紹介しながら解説します。
詳細について知りたい方は下記の記事も合わせてご覧ください。

formrunとcontact form7の違い

なお、formrunでフォームを作成することで、以下のメリットがあります。

プログラミング不要
ワンクリックでrecaptcha設定可能
マウス操作でデザイン設定可能
お問い合わせ管理、メール対応も可能
自動メールやchatworkなどツール通知までついている

また、ノーコードのテンプレートも120種類以上あり、WordPressへの埋め込みも簡単です。フロントエンド開発だけでフォームを作れるヘッドレスフォームも提供しております。

上記は全て基本料金無料で対応できるため、気になる方はぜひ以下からお問い合わせください。

▼フロントエンド開発だけで自由にフォームが作れるformrunの詳細はこちらから

ヘッドレスフォーム｜エンジニア・デザイナー向け活用方法

Contact Form 7で確認画面を設置する方法
Contact Form 7で確認画面を作成する手順
Contact Form 7で確認画面を設置するメリット：入力ミスを防げる
Contact Form 7で確認画面を設置するデメリット：コードで設置する際は開発者の作業工数が増える
Contact Form 7で確認画面を設置する際のよくある質問
WordPressのサイトにフォームを設置するなら「formrun」もおすすめ
Contact Form 7で確認画面を設置してユーザビリティを向上させよう

Contact Form 7で確認画面を設置する方法

Contact Form 7で確認画面を設置する方法は、主に以下の通りです。

プラグイン「Contact Form 7 Multi-Step Forms」を活用する
Contact Form 7で確認画面を自作する

詳しく解説します。

プラグインを活用する

Contact Form 7で確認画面を設置するためには、プラグイン「Contact Form 7 Multi-Step Forms」を活用する方法が有効です。

「Contact Form 7 Multi-Step Forms」は、30,000件以上の有効インストールがあり、「WordPress 6.1.1」と互換性があります。

このプラグインを使用すれば、フォームを複数のステップに分割して、確認画面の設置が容易です。

Contact Form 7で確認画面を自作する

Contact Form 7で確認画面を設置する方法には、プラグインを使用せずに自作する方法もあります。

このアプローチでは、HTMLやJavaScript、PHPを駆使して確認画面を実装します。

ただし、プログラミングの知識が求められるため、初心者には難易度が高いかもしれません。そのため、基本的にはプラグインの利用を推奨します。

formrunであれば、専門知識不要で1クリックで確認画面を設定可能です。ぜひ参考にしてみてください。

▼formrunとcontact form7の違いについて下記の記事で解説しているので、気になる方はぜひ合わせてご覧ください。

formrunとcontact form7の違い

Contact Form 7で確認画面を作成する手順

Contact Form 7で確認画面を作成する手順は、主に以下の通りです。

プラグイン「Contact Form 7 Multi-Step Forms」をインストールし有効化する
確認画面用のフォームを作る
確認画面用の固定ページを作る
サンクスページ用の固定ページを作る
入力画面から確認画面に移動できるようにタグを挿入する

詳しく解説します。

Contact Form7の作り方から知りたい方はこちらの記事をご覧ください。
>> 【完全版】Contact Form 7の基本と使い方まとめ｜WordPressに問い合わせフォームを設置しよう

プラグイン「Contact Form 7 Multi-Step Forms」をインストールし有効化する

最初に行うこととしては、Contact Form 7 Multi-Step Formsのインストールです。インストール方法は以下の手順となります。

WordPressの管理画面にログイン
「プラグイン」メニューを選択
「新規追加」の選択
「Contact Form 7 Multi-Step Forms」を検索し、選択
「Contact Form 7 Multi-Step Forms」が表示されたらインストール

確認画面用のフォームを作る

確認画面を作成するためには、WordPressの管理画面から新しい固定ページを作成し、それぞれに適切なショートコードを配置します。

「お問い合わせ確認」が確認画面、「お問い合わせ完了」がサンクスページとして表示されるような感じでフォームを作るようにします。

確認画面用の固定ページを作る

WordPressメインナビゲーションの固定ページを選択し、新規追加をクリックします。

タイトルを入力し、Contact Form 7のブロックを追加しましょう。先ほど作成した確認画面を選択し、URLを「contact-confirm」に書き換えてください。

書き換えが完了後、公開します。なお、固定ページを作成した際には、各ページのパーマリンクをメモしておくことが重要です。これらのパーマリンクは、コンタクトフォームの設定時に必要になります。

サンクス用の固定ページを作る

確認画面用の固定ページが作成できたら、同様にサンクス用の固定ページを作ります。

サンクスページとは、ユーザーがフォームに回答した後、送信した旨がわかるようなメッセージです。

URLは、「contact-thanks」にしておくとわかりやすいでしょう。

入力画面から確認画面に移動できるようにタグを挿入する

入力画面のフォームにタグを挿入します。

入力画面のフォーム編集画面に移動し、[submit “送信”]の下にカーソルを置いたら、フォームタグ生成ボタンのmultistepをクリックしてください。フォームタグ生成画面で【First step「Check this if this form is the first step.」】を選択し、Next Page URLで確認画面のURLを入力します。

タグが追加されたら、[submit “送信”]を[submit “入力内容の確認”]などに変更しましょう。

最後に、確認画面からサンクスページに移動できるようにする作業を行います。確認画面のフォーム編集画面に移動し、[submit “送信”]の下にカーソルを当てた状態で、フォームタグ生成ボタンのmultistepをクリックします。フォームタグ生成画面で【Last Step：「Check this if this form is the last step.」】を選択し、【Send Email：Last Stepの選択により自動で選択される】、【Next Page URL：確認画面のURLと入力】を入力します。

Contact Form 7で確認画面を設置するメリット：入力ミスを防げる

ユーザーが送信ボタンをクリックする前に、入力した情報を再確認できるため、誤入力や不完全な情報を送信してしまうリスクを減少できるメリットがあります。

例えば、メールアドレスや電話番号などの重要な連絡先情報の誤入力に気付きやすくなります。

このような再確認のステップは、特にビジネスや個人情報を扱う場合に重要であり、正確な情報が提供されると、トラブルやコミュニケーションミスを防ぐことが可能です。

次に、確認画面は、ユーザーが一時的に立ち止まるポイントを提供します。

ユーザーは一旦確認画面に進んでから最終的に送信ボタンを押すため、誤って情報を送信するリスクが減少します。

Contact Form 7で確認画面を設置するデメリット：コードで設置する際は開発者の作業工数が増える

開発者の作業工数が増えることも、Contact Form 7で確認画面を設置するデメリットです。

確認画面を設置するためには、通常のフォーム作成に比べて追加のコーディングが必要です。

確認画面の表示と、それにともなうデータの一時保存、再送信処理などを実装するためには、JavaScriptやPHPのカスタマイズが求められます。

これには、開発者が既存のContact Form 7の機能を拡張し、複数のステップを踏んでフォーム送信を実現するための追加作業が欠かせません。

単純なフォーム送信よりも複雑であり、デバッグやテストの工程も増えるため、開発工数が大幅に増加してしまいます。

Contact Form 7で確認画面を設置する際のよくある質問

最後に、contact form 7で確認画面を設置する際によくある疑問点とその回答をご紹介します。

Contact Form 7で確認画面の設置はプラグインなしでもできる？

結論から伝えると、プラグインなしでも確認画面の設置はできます。具体的には、jQueryとcssを使って自作でContact Form7の作成が可能です。

下のコードをCotntact Form7のフォーム編集画面にコピペすれば簡単に作成できるので、ぜひ試してみてください。

<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”,””);
}
});