「Contact form 7で確認画面を設定するメリットは?」
「Contact form 7で確認画面を設定する方法は?」
上記のような疑問を抱えているメディア運用者もいるのではないでしょうか。
「Contact Form 7」は、WordPressのプラグインです。活用すれば、お問い合わせフォームを簡単に設置できます。
シンプルで使いやすい反面、確認画面がないため送信完了したのかがわかりづらいなどの欠点もあるのが現状です。
そこで本記事では、Contact Form 7で確認画面を設置するメリットや作成方法などを詳しく解説します。ぜひ、本記事を参考にして適切に確認画面を設定しましょう。
また、formrunとContact Form7の違いについても紹介しながら解説します。
詳細について知りたい方は下記の記事も合わせてご覧ください。
なお、formrunでフォームを作成することで、以下のメリットがあります。
- プログラミング不要
- ワンクリックでrecaptcha設定可能
- マウス操作でデザイン設定可能
- お問い合わせ管理、メール対応も可能
- 自動メールやchatworkなどツール通知までついている
また、ノーコードのテンプレートも120種類以上あり、WordPressへの埋め込みも簡単です。フロントエンド開発だけでフォームを作れるヘッドレスフォームも提供しております。
上記は全て基本料金無料で対応できるため、気になる方はぜひ以下からお問い合わせください。
▼フロントエンド開発だけで自由にフォームが作れるformrunの詳細はこちらから
目次
Contact Form 7で確認画面を設置する方法
![contact form 7で確認画面を設置する方法](https://form.run/media/wp-content/uploads/2024/06/shutterstock_1987870499-scaled.jpg)
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の違いについて下記の記事で解説しているので、気になる方はぜひ合わせてご覧ください。
Contact Form 7で確認画面を作成する手順
![contact form 7で確認画面を作成する手順](https://form.run/media/wp-content/uploads/2024/06/shutterstock_2235090803-scaled.jpg)
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;
//必須項目をループで1つずつ確認
$(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>
Contact Form 7で確認画面に遷移しない場合はどうすればいい?
Contact Form 7で確認画面に遷移しない場合は、まずはパーマリンクの設定がきちんとできているかどうかを確認しましょう。
場合によっては、WordPressの設定でパーマリンクの設定を変更もしくはhtaccessファイルの書き換えを検討する必要があります。
また、テーマのファイルやカスタムCSSにて、お問い合わせフォームの確認画面に付随している設定が行われているかどうかの確認もしてください。
WordPressのサイトにフォームを設置するなら「formrun」もおすすめ
![](https://form.run/media/wp-content/uploads/2024/04/image1-1-1024x598.png)
お問い合わせフォームを簡単に設置できるContact Form 7ですが、下記のような要望がある場合は弊社提供のフォーム作成ツール「formrun」を検討してみるのもおすすめです。
- スパム対策などセキュリティを強化したい
- もっと簡単にフォームを作成・設置したい
- お問い合わせの管理・対応にも注力したい
1つずつ解説していきます。
ビジネス用フォーム作成ツール「formrun」とContact Form 7の違いを知りたい方は以下の記事を参考にしてみてください。
スパム対策などセキュリティを強化したい
formrunはセキュリティの高さが特徴です。「ISO 27001 (ISMS)」の認証取得やプライバシーマークの付与認定、SSL/ TLSによる暗号化通信、24時間365日のサーバー監視体制など、万全なセキュリティ対策が整えられています。
スパム対策としてreCAPTCHAも簡単に設置することができます。 フォームでは、名前や住所、メールアドレスなど、重要な個人情報を取り扱います。ユーザーに安心してフォームに入力してもらうためにも、フォームのセキュリティは必須です。
formrunのセキュリティ・安全性の詳細については以下の記事をご覧ください。
>> formrunは安心安全のセキュリティ!
もっと簡単にフォームを作成・設置したい
formrunでは、120種類以上のテンプレートを揃えられており、ノーコードでフォーム作成をすることが可能です。
登録なしでテンプレートを利用することができ、もちろん確認画面のテンプレートもありますので、ぜひフォームを作成してみてください。
>> 登録なしでデザイン性が高い「formrun」のフォームテンプレートを利用する
また、HTMLやCSSで自由にカスタマイズできるコード型フォーム作成も提供しており、幅広い種類のフォームに対応可能です。
formrunのヘッドレスフォーム(コード型フォーム)の詳細は以下の記事をご覧ください。
>> フロントエンド開発だけで自由にフォームが作れるformrun!
formrunで作成したフォームは、WordPressにiframeで簡単に設置できます。下記記事で、具体的に設置方法を解説していますので合わせてご覧ください。
>> WordPressで作成したホームページにフォームを埋め込む方法を見る
お問い合わせの管理・対応にも注力したい
また、formrunはフォーム作成だけではなく、回答をカンバン方式で視覚的に管理できるため、問い合わせ対応の漏れをなくしたい方にもぴったりです。
formrunは対応状況をステータス別に管理します。未対応・対応中・対応済み・商品発送済みなど、ステータスは自社が管理しやすいように設定できます。
回答をカンバン形式で管理できるため、チームで管理しやすいのが特徴です。 formrunの顧客管理機能の詳細については以下の記事をご覧ください。
>> formrunでお問い合わせから顧客管理まで一元管理!
Contact Form 7で確認画面を設置してユーザビリティを向上させよう
![contact form 7で確認画面を設置してユーザビリティを向上させよう](https://form.run/media/wp-content/uploads/2024/06/shutterstock_1081970570-scaled.jpg)
「Contact Form 7」を使うことで、簡易的にお問い合わせフォームを設置できますが、ただ設置するだけでは意味がありません。
確認画面を設置すれば、ユーザビリティが向上し、ユーザーに安心感を与えられるほか、コンバージョンも計測しやすいため、適切な営業を行いやすいです。
まずはプラグインを有効にし、確認画面を設置できるようにコードを使って作成しましょう。ぜひ、本記事を参考にして適切に確認画面を設定してみてください。
フォーム作成ツール「formrun」を検討してみるのもおすすめです。無料での利用もできるため、ぜひ一度試してみてはいかがでしょうか。
>> 無料でフォームを作成する