Contact Form 7に確認画面を付ける：フォームを2つ作らずに済ませる

確認画面を付けるには入力用と確認用でフォームを2つ用意する、と書いてある解説がまだ残っています。いまはその必要がありません。プラグインを1つ入れて、いま使っているフォームの設定でチェックを入れるだけ。作業は5分で終わります。

この記事は、自分の会社サイトやお店のサイトを自分で更新している人に向けて書きます。Contact Form 7 でお問い合わせフォームを1つ置いてあって、送信前に内容を見せる画面が欲しい、という状態を想定しています。使うのは Plugear Review Step for Contact Form 7 という無料プラグインで、これは私たちが作って WordPress.org で配っているものです。

確認画面が無いと、打ち間違いはそのまま届く

Contact Form 7 は送信ボタンを押した瞬間にメールを送ります。訪問者が入力内容を見直す機会がどこにも無い。メールアドレスを1文字打ち間違えていても、そのまま送られる。こちらから返信しても届きません。問い合わせが来たのに連絡がつかない、という一番もったいない失敗がここから生まれます。

もう1つは同じ内容が2通届くケース。送信したのに画面の反応が薄いと、訪問者はもう一度押します。確認画面があると、押した直後に画面が切り替わるので「送れたのか分からない」状態になりにくい。

日本語のフォームで「入力 → 確認 → 送信」が定着しているのは作法の問題だけではなくて、こういう実務上の理由があります。

手順は4つ、5分で終わります

先に Contact Form 7 が 5.7 以上であることだけ確認しておいてください。管理画面のプラグイン一覧でバージョンが見られます。ふつうに更新していれば問題ありません。

これだけです。フォームの中身（[text* your-name] のようなタグが並んでいるところ）は1文字も触りません。固定ページに貼ってあるショートコードもそのまま。確認用のフォームも、確認ページも、完了ページも要りません。

設定はフォームごとです。お問い合わせフォームには確認画面を付けて、資料請求フォームには付けない、という使い分けができます。フォームを複製すると、確認画面の設定も一緒に付いてきます。

最初にやるべきなのは、ボタンを日本語にすること

つまずくとしたら、たぶんここ。先に書いておきます。このプラグインの管理画面は、いまのところ英語で表示されます。

日本語訳が届けば管理画面も日本語になりますが、それまではタブ名も Confirm Screen のまま、設定項目名も英語のままです。

そして困るのは、訪問者に見えるボタンまで英語の既定値だという点。何も設定しないと、フォームのボタンが Confirm Edit Send と表示されます。日本語のサイトにこれが出ると、ちょっと事故です。

同じ Confirm Screen タブの中に3つの入力欄があるので、有効にするときに一緒に埋めてしまってください。

設定欄	何のボタンか	入れる文言の例
Confirm button	入力画面の送信ボタン（押すと確認へ進む）	確認する
Edit button	確認画面から入力へ戻るボタン	修正する
Send button	確認画面から送信するボタン	送信する

もう1つ、Empty field text という欄があります。未入力の項目に文言を出したいときだけ使うもので、こちらも既定は英語の Not entered です。使うなら「未入力」や「—」に変えておく。使わないなら、そもそも未入力の項目に何も出さない設定（Empty fields のチェックを外したまま）が既定なので、触らなくて構いません。

訪問者から見るとこう動きます

「確認する」を押すと、入力欄があったその場所が、入力された文字に置き換わります。別のページへ移動しません。同じ画面のまま、フォームが確認表示に変わる形です。

項目の種類ごとに、こう出ます。

「修正する」を押すと入力画面に戻ります。入力した内容はそのまま残っているので、直したいところだけ直して、もう一度確認へ進めます。

表組みで作ったフォームでも、見た目が崩れない

自分でレイアウトを整えたフォームを使っている人には、ここが一番の心配だと思います。

確認画面を別に用意する作り方だと、確認画面だけデザインが素っ気なくなりがちです。テーマが当てているデザインが確認画面には届かないため。表組みで項目を並べていたフォームが、確認画面では上から順に並んだだけの一覧になってしまう、というのもよくある落とし穴でした。

このプラグインは確認画面を新しく作りません。入力欄があったその場所を、入力された文字に差し替えるだけです。ラベルも表組みも、あなたが書いたHTMLもそのまま残るので、表組みで作ったフォームは表組みのまま確認できます。2カラムのレイアウトなら2カラムのまま。

「確認する」「修正する」「送信する」の3つのボタンも、もとの送信ボタンから作っています。テーマが送信ボタンに当てているデザインをそのまま受け継ぐので、確認画面でボタンだけ浮くこともありません。

スマホから届く全角の電話番号が、半角になります

問い合わせフォームでは、これが取りこぼしに直結します。

スマホのかな入力のまま数字を打つと、０９０ のように全角になります。半角にするにはキーボードを英数に切り替える必要があって、そこまでする人はあまりいません。ところが Contact Form 7 の電話番号欄は、全角のままだとエラーで弾きます。訪問者から見ると、番号は合っているのにエラーが出て、理由も説明されない。ここで諦める人が出ます。

このプラグインは、確認ボタンを押した瞬間に全角の数字や英字を半角へ直します。電話番号・数値・メールアドレス・URLの欄は、何も設定しなくても対象です。

変換のタイミングにはこだわりました。打っている最中に直す作りにすると、日本語入力の変換が壊れたり、カーソルが末尾に飛んで打ち直しになったりします。この機能がいちばん効いてほしいスマホで、それが起きる。確認ボタンを押した時点なら入力はもう終わっているので、変換に触らずに済みます。直した結果を確認画面でそのまま見せられる、という利点もついてきます。

ひとつだけ直せない項目があります。フォームタグで [number] を使っている数値欄は、全角の数字を入れた時点でブラウザが値を捨ててしまうため、こちらから直しようがありません。全角で入ってきそうな数値項目は、[number] ではなく次のように書いておくと半角に直ります。

[text* your-zip hankaku]

hankaku と書き足すだけで、その項目も半角化の対象になります。

メールが2通届くことはありません

確認画面を挟むプラグインで昔からよくある心配が「確認のときにも送信が走って、同じメールが2通来るのでは」というもの。

このプラグインは、確認の段階で Contact Form 7 の送信処理をまったく呼びません。メールを送らず、迷惑メール判定も行いません。確認のときにやっているのは、入力内容に不備がないかを調べて結果を返すことだけです。訪問者が「送信する」を押したときに、Contact Form 7 のいつもの送信が1回だけ走ります。届くメールは、このプラグインを入れる前と同じものです。

検証環境でブラウザの通信を覗きながら試したところ、「確認する」を押した時点では Contact Form 7 の送信用の窓口が一度も呼ばれていませんでした。呼ばれるのは「送信する」を押したときの1回だけ。

問い合わせ内容を管理画面に保存するプラグインや、チャットツールへの通知を組み合わせている場合も、二重に記録されたり通知が2回飛んだりしません。ここは確認画面のプラグインによって作りが違うところで、確認の時点で送信処理を走らせてしまうものだと、保存や通知が2回動きます。制作会社に構築を頼んでいて、問い合わせが二重に記録されている心当たりがあるなら、そこを疑ってみてください。

動かないときに最初に見るところ

確認画面が出ずにそのまま送信される。 Contact Form 7 が有効になっているか、バージョンが 5.7 以上かを見てください。条件を満たしていないとき、このプラグインは何もせず、管理画面に案内を出すだけになります。フォーム自体は普通に動き続けるので、サイトが壊れることはありません。

設定を保存したのに変わらない。 確認画面はフォームごとの設定です。複数のフォームがある場合、直したいフォームで Confirm Screen タブを開いているか確かめてください。

タブが見つからない。 お問い合わせ → コンタクトフォームでフォームを開いた画面の、メールやメッセージと並んでいるタブの列にあります。名前は Confirm Screen です。

たまに確認画面から入力画面に戻る。 キャッシュ表示を速くするため、一度作ったページや画像を保存して使い回す仕組み。サーバー・プラグイン・ブラウザ・CDNの各段階にあり、「直したのに反映されない」原因になりやすい。系のプラグインを使っていると、ページの読み込み方によっては Contact Form 7 がフォームを初期化し直すことがあります。そのとき確認表示は入力表示に戻ります。入力内容が消えるわけではありません。

同意チェックを入れないと「確認する」が押せない。 これは Contact Form 7 本体の動きで、「個人情報の取り扱いに同意する」のような承諾のチェックが外れているあいだ、本体が送信ボタンを押せない状態にします。確認画面を入れたせいではありません。手元の検証環境（WordPress 7.1・Contact Form 7 6.1.5）で見ると、チェックを入れた瞬間に押せるようになります。

訪問者のブラウザで JavaScript が切られている。 そのときは確認画面が挟まらず、素の Contact Form 7 として送信されます。確認は通りませんが、メールはちゃんと届きます。

入手とサポート

WordPress.org で無料配布しています。購入手続きもライセンス登録もありません。

動作条件は WordPress 6.0以上・PHP 7.4以上・Contact Form 7 5.7以上です。マルチサイト1つのWordPressで複数のサイトをまとめて運営する機能。有効にするとプラグインの動き方が変わり、対応していないプラグインもある。は検証していません。

始め方としては、まずフォームを1本だけ選んでチェックを入れ、ボタンの文言を日本語にして、自分で1回送ってみるのが早いと思います。届いたメールがいつもと同じなら、それで確認は取れたことになります。合わなければチェックを外すだけで、元のフォームにそのまま戻ります。フォームを作り直していないので、戻すのに手間はかかりません。