Contact Form 7 に確認画面と完了画面を追加する方法をご紹介します。
※ この記事で紹介するプラグイン「Contact Form 7 add confirm」は、現在正常に動作しません。確認画面と完了画面を追加するなら、違うプラグインの使用をおすすめします。
Contact Form 7 は問い合わせフォームを簡単に設置できる定番プラグインですが、メールフォームに入力した内容を確認するための機能や、完了画面（サンクスページ）に移行する機能がないので、確認画面や完了画面を別途で追加する必要があります。
確認画面の表示はjqueryを使う方法もありますが、初心者であればプラグイン「Contact Form 7 add confirm」を使うのが一番カンタンです。
完了画面は固定ページで送信完了ページを作成して、メール送信後に送信完了ページ（サンクスページ）へ移動させるためのコードを追記します。
※ ContactForm7の最新バージョン5.4からJavaScriptが大幅に変更されたため、確認画面や完了画面の表示が正常に動作しなくなっています。
以下の記事で、Contact Form 7 add confirmを修正して使い続ける方法が紹介されています。ただし、プラグイン本体は4年ほど更新されていないので、別のプラグインに乗り換えることをおすすめします。
Contact Form 7の使い方は以下で紹介しています。
関連記事 WordPressの問い合わせフォーム作成プラグイン Contact Form 7の使い方
Contact Form 7 確認画面の追加
では、Contact Form 7に確認画面と完了画面を追加しましょう。まずは確認画面を追加するために Contact Form 7 add confirm をインストールします。
ダッシュボードから「プラグイン」→「新規追加」に進みます。
右上の検索窓から「Contact Form 7 add confirm」と入力するとプラグインが表示されるので、「今すぐインストール」→「有効化」してください。
Contact Form 7 add confirm の設定
続いてContact Form 7 add confirm で確認画面を作成してみましょう。
ダッシュボードの「コンタクトフォーム」から確認画面を追加するフォームを選びます。
プラグインをインストールすると、Contact Form 7 のフォーム編集に「確認ボタン」と「戻って編集ボタン」が追加されています。
まずはフォームタグ生成で確認ボタンを作成します。ラベルを入力して、下で生成されたタグをフォームにコピペするか、「タグを挿入」をクリックします。
戻って編集ボタンも同様に作成して、フォームに追加します。
送信ボタン・確認ボタン・戻って編集ボタンが3つ並んでいますね。保存して実際のフォームを確認してみましょう。
フォーム編集ではボタンが3つ並んでいましたが、実際のフォームでは確認ボタンだけ表示されています。
内容を入力して確認ボタンを押すと確認画面に移り、フォームの色が変わって、「送信」と「戻って確認」ボタンが表示されました。
確認画面で送信をクリックすると、メッセージが送信されます。もちろん、戻るボタンで再度入力画面に戻ることもできます。
Contact Form 7 add confirmは、入力画面と確認画面で表示するボタンを自動的に振り分けてくれます。でも、このままではちょっと味気ないですねぇ。
確認画面の表示やデザインを変更する
Contact Form 7 add confirm を開発された方のサイトに、入力画面・確認画面・完了画面で表示する文言やタイトルを変更するための解説がありました。
参考サイト Contact Form 7に確認画面をものすごく簡単に付けられるプラグイン
フォームの編集画面で以下のclass要素を指定すると、各画面ごとに文章や画像を表示することができます。
これらの要素を使って、各画面の先頭に表示されるメッセージを追加してみましょう。フォームの編集で以下のサンプルコードを追加しました。
<p class="wpcf7c-elm-step1" style="font-size:2.0em;">お問い合わせ内容を入力してください</p>
<p class="wpcf7c-elm-step2" style="font-size:2.0em;">入力内容をご確認ください</p>
<p class="wpcf7c-elm-step3" style="font-size:2.0em;">お問い合わせありがとうございます</p>
入力画面では「お問い合わせ内容を入力してください」と表示されますが・・・
確認画面では「入力内容をご確認ください」になり、「送信ボタン」と「戻って編集ボタン」が表示されます。
送信すると「お問い合わせありがとうございます」になりました。
各入力項目に設定できるid属性やclass属性を使えば、ボタンの色や形も変更できます。
「戻って編集ボタン」のデザインを変更するため、タグにIDを追加して以下のCSSを追記しました。
#modoru{
background: #0000ff;
border: none;
display: inline-block;
color: #FFFFFF;
padding: 15px 23px 15px 23px;
border-radius: 5px;
font-size: 13px;
}
ご覧の通り、「戻って編集ボタン」の色と形が変更されましたね。
HTMLやCSSの知識があれば、各画面に応じた表示やデザインが可能になります。
完了画面（サンクスページ）を追加
続いて完了画面（サンクスページ）を追加します。
Contact Form 7 の送信完了メッセージはボタンの下に表示されて見づらいのですが、完了画面に移動させるとメールの送信完了がひと目でわかるようになります。
送信完了画面は固定ページで作成します。内容はシンプルなもので構いません。
送信完了後にリダイレクトするためのコードを追加します。テーマファイルのヘッダー(header.php)に以下のコードを設置してください。設置場所は＜/head＞タグの手前です。フッター（footer.php）に設置でもOKです。
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'https://hogehoge.com/thankspage/';
}, false );
</script>
コード内「location」部分のURL「https://hogehoge.com/thankspage/」が、送信完了ページのURLです。
確認画面と完了画面でメール送信の案内を
Contact Form 7 は基本的に入力画面だけしかないので、確認画面と完了画面があるとメール送信のステップがわかりやすくなります。
Contact Form 7 の確認画面は、プラグインを使って追加するのが一番簡単です。Contact Form 7 add confirm は設定もそれほど難しくないし、HTMLやCSSを追記すれば表示やデザインのカスタマイズも可能です。
完了画面（サンクスページ）も、ページの作成と簡単なコードの追加だけで実現できます。どちらもそれほど難しくないので、ぜひチャレンジしてみてください。
ContactForm7 でスパムメールにお困りの方は、reCAPTCHAの導入をオススメします。最新バージョンの5.1からは、reCAPTCHA v3 APIが使えるようになりました。
その他Contact Form 7 の関連記事です。よかったらこちらもご参考に・・・
