スポンサーリンク

Contact Form7には確認画面へ遷移をする機能がないため、「Contact Form 7 add confirm」というプラグインを使用すると簡単に作成することができます。

※ 「Contact Form 7 add confirm」は2018年2月末から更新がされておらず、開発が止まっている恐れがあるので使用する場合は注意が必要です。

「Contact Form 7 add confirm」のインストール

プラグインのダウンロード

サイトよりプラグインをダウンロードしします。ダウンロードしたら、プラグインをインストール・有効化します。

注意)「Contact Form 7」がインストールされている必要があります。

プラグインの使い方

プラグインをインストールすると、「Contact Form 7」の編集画面に「確認ボタン」「戻って編集ボタン」が追加されます。

Contact Form 7の編集画面

「確認ボタン」→「戻って編集ボタン」→「送信ボタン」の順番に配置をします。

表示の確認

表示してみると、入力画面では「確認ボタン」のみ表示されます。

お問い合わせ画面の表示例(入力画面)

確認画面では「戻って編集ボタン」と「送信ボタン」が表示されます。

お問い合わせ画面の表示例(確認画面)
スポンサーリンク

確認画面へ遷移をしない場合の対応方法

「Contact Form 7」の5.4へ更新すると、確認画面へ遷移しなくなる不具合が発生します。

対応としては、plugins\contact-form-7-add-confirm\includes\js\scripts.js を開いて、
最後の方にある

document.addEventListener( 'wpcf7submit', function( event ) {
	switch ( event.detail.status ) {
		case 'wpcf7c_confirmed':
		wpcf7c_step1(<strong>event.detail.id</strong>);
		break;
		case 'mail_sent':
		wpcf7c_step2(<strong>event.detail.id</strong>);
		break;

	}
}, false );

を、

document.addEventListener( 'wpcf7submit', function( event ) {
	switch ( event.detail.status ) {
		case 'wpcf7c_confirmed':
		wpcf7c_step1(<strong>event.detail.unitTag</strong>);  // ←ココの修正
		break;
		case 'mail_sent':
		wpcf7c_step2(<strong>event.detail.unitTag</strong>);  // ←ココの修正
		break;

	}
}, false );

へ修正をすると動くようにはなります。

公式な修正方法ではないため、自己責任で対応を行ってください。

スポンサーリンク
おすすめの記事