第4回 のんびり研究所構築日記｜Confirm Plus Contact Form 7で送信前の確認画面を追加する方法

前回は、「Contact Form 7」を使って、最低限のお問い合わせフォームを作成しました。

今回は、「Confirm Plus Contact Form 7」というプラグインを追加し、お問い合わせ内容を送信する前に確認画面を表示できるようにします。

入力内容を一度確認してから送信できるため、メールアドレスの入力間違いや、問い合わせ内容の書き間違いを減らす効果が期待できます。

Confirm Plus Contact Form 7とは？

Confirm Plus Contact Form 7は、Contact Form 7で作成したフォームに、送信前の確認画面を追加するプラグインです。

通常のContact Form 7では、入力画面で「送信」を押すと、そのままお問い合わせ内容が送信されます。

Confirm Plus Contact Form 7を導入すると、次のような流れに変更できます。

1. お問い合わせ内容を入力する
2. 確認画面を表示する
3. 入力内容を確認する
4. 問題がなければ送信する

「Confirm」の意味

Confirmは、英語で「確認する」「確かめる」という意味です。プラグイン名のとおり、Contact Form 7へ確認画面を追加するためのプラグインです。

Confirm Plus Contact Form 7を使用するための条件

Confirm Plus Contact Form 7は、Contact Form 7へ機能を追加するためのプラグインです。

そのため、単独では使用できません。

先にContact Form 7をインストールし、有効化しておく必要があります。WordPress管理画面の左側から「プラグイン」を開き、次の2つを確認します。

• Contact Form 7
• Confirm Plus Contact Form 7

Contact Form 7の下に「無効化」と表示されていれば、すでに有効になっています。

「無効化」と表示されている場合は有効です

少し分かりにくいのですが、プラグインの下に「無効化」と表示されている場合、そのプラグインは現在有効です。

「無効化を押すと停止します」という意味で表示されています。

「有効化」と表示されている場合は、現在停止しているため、「有効化」をクリックします。

プラグインの追加画面を開く

WordPress管理画面の左側から、次の順番で進みます。

プラグイン → 新規プラグインを追加

前回の記事で、プラグインの検索から有効化までを詳しく説明しました。
今回は、同じ手順になる部分を少し簡略化して進めます。

初めてプラグインを追加する場合は、前回のContact Form 7の記事も参考にしてください。

Confirm Plus Contact Form 7を検索する

プラグイン追加画面の右上にある検索欄へ、次のプラグイン名を入力します。

Confirm Plus Contact Form 7

検索結果に、Confirm Plus Contact Form 7が表示されます。

似た名前のプラグインを間違えてインストールしないように、プラグイン名と作者名を確認します。

作者名は、トラストリングと表示されています。

プラグインをインストールする

Confirm Plus Contact Form 7の欄にある「今すぐインストール」をクリックします。

インストールが完了すると、ボタンの表示が「有効化」に変わります。

プラグインを有効化する

「有効化」をクリックします。

プラグイン一覧へ移動し、Confirm Plus Contact Form 7の下に「無効化」と表示されていれば、有効化は完了です。

専用の設定画面が見当たらなくても大丈夫

Confirm Plus Contact Form 7を有効化しても、WordPress管理画面の左側に、新しい設定メニューが追加されない場合があります。

また、プラグイン一覧を見ても、細かな設定画面へ移動するリンクが見当たらないことがあります。

Confirm Plus Contact Form 7は、基本的にはインストールして有効化することで、Contact Form 7のフォームへ確認機能を追加するプラグインです。

そのため、専用の設定画面が見つからなくても、すぐに失敗と判断する必要はありません。

今回の基本操作

Confirm Plus Contact Form 7は、次の操作だけで使える状態になります。

1. プラグインをインストールする
2. プラグインを有効化する
3. 実際のお問い合わせフォームで動作を確認する

お問い合わせページを開く

前回作成した、お問い合わせ用の固定ページを開きます。

WordPress管理画面から確認する場合は、次の順番で進みます。

固定ページ → 固定ページ一覧

一覧の中から「お問い合わせ」を探し、「表示」をクリックします。

実際のお問い合わせフォームが表示されます。

テスト用の内容を入力する

お問い合わせフォームへ、送信テスト用の内容を入力します。

例えば、次のように入力します。

• 氏名：確認画面テスト
• メールアドレス：自分で受信できるメールアドレス
• 題名：Confirm Plusの動作確認
• メッセージ本文：これは確認画面の表示テストです。

確認ボタンを押す

すべての項目を入力したら、フォーム下部のボタンを確認します。

Confirm Plus Contact Form 7が正しく動作している場合、以前の「送信」ボタンが、確認画面へ進むためのボタンとして動作します。

確認ボタンをクリックして、確認画面を表示します。

使用しているテーマやプラグインのバージョンによっては、ボタンに表示される文字が異なる場合があります。

確認画面が表示されるか確認する

ボタンをクリックすると、入力欄の代わりに、先ほど入力した内容が確認用として表示されます。

次の内容が正しく表示されているか確認します。

• 氏名
• メールアドレス
• 題名
• メッセージ本文

確認画面では、通常の入力欄ではなく、入力した内容を読むための表示に切り替わります。この時点では、まだお問い合わせは送信されていません。

確認画面を表示しただけです。

確認画面は、入力内容に間違いがないか確認するための画面です。確認画面にある送信ボタンを押した時点で、実際のお問い合わせが送信されます。

入力画面へ戻れるか確認する

確認画面に表示されている「戻る」ボタンをクリックします。

最初のお問い合わせ入力画面へ戻ることを確認します。

入力した内容が残っていれば、間違っている部分だけを修正できます。

確認画面を追加する目的は、利用者が入力内容を確認し、間違いがあれば送信前に修正できるようにすることです。

もう一度確認画面へ進む

入力内容を確認したら、もう一度確認画面へ進みます。

今回はテストのため、入力内容に問題がないことを確認します。

お問い合わせを送信する

確認画面に表示されている「送信」ボタンをクリックします。

送信完了のメッセージが表示されることを確認します。

メールが届いたか確認する

送信が完了したら、お問い合わせフォームの送信先として設定したメールアドレスを確認します。

受信箱にメールが見当たらない場合は、迷惑メールフォルダーも確認します。

メールが届いたら、入力した内容が正しく記載されていることを確認します。

確認画面を追加した後も、メールが正常に届くことまで確認しておきましょう。

確認画面が表示されない場合

プラグインを有効化しても確認画面が表示されない場合は、まず次の項目を確認します。

• Contact Form 7が有効になっているか
• Confirm Plus Contact Form 7が有効になっているか
• お問い合わせページを再読み込みしたか
• ブラウザーに古いページが残っていないか
• Contact Form 7のフォームを独自に大きく変更していないか
• 使用中のテーマや別のプラグインと競合していないか

ページを再読み込みしても変わらない場合は、一度ブラウザーのキャッシュを削除するか、シークレットウィンドウでお問い合わせページを開いて確認します。

アップデートによる仕様変更について

WordPress、Contact Form 7、Confirm Plus Contact Form 7の更新により、画面表示や操作方法が変わる場合があります。

この記事と実際の画面が大きく異なる場合は、プラグインの公式ページやサポート情報も確認してください。

確認画面は必ず必要？

お問い合わせフォームに、確認画面が必ず必要というわけではありません。

入力項目が少ないフォームや、送信後に自動返信メールで内容を確認できるフォームでは、確認画面を設置しない考え方もあります。

一方で、メールアドレス、住所、注文内容など、入力間違いをできるだけ減らしたいフォームでは、送信前の確認画面が役立ちます。

サイトの目的や入力項目に合わせて、必要かどうかを判断しましょう。

のんびり研究所では、お問い合わせを送る人が内容を一度確認できた方が分かりやすいと考え、確認画面を追加しました。

使用しない場合は無効化できる

確認画面が必要ないと判断した場合は、Confirm Plus Contact Form 7を無効化できます。

WordPress管理画面の「プラグイン」を開き、Confirm Plus Contact Form 7の下にある「無効化」をクリックします。Contact Form 7自体はそのまま使用でき、確認画面だけが表示されない状態に戻ります。今後使用する予定がない場合は、無効化した後に削除することもできます。

必要なプラグインだけを使用する

このシリーズで紹介したプラグインを、すべてのサイトへ導入する必要はありません。使用しないプラグインは、管理や更新の対象を増やすことになります。
自分のサイトに必要な機能だけを選びましょう。

今回のまとめ

今回は、Confirm Plus Contact Form 7を導入し、お問い合わせフォームへ送信前の確認画面を追加しました。

• Confirm Plus Contact Form 7はContact Form 7の拡張プラグイン
• 使用するにはContact Form 7が必要
• 基本的にはインストールして有効化するだけで使用できる
• 専用の設定画面が表示されない場合がある
• 入力後に確認画面が表示されることを確認する
• 確認画面から入力画面へ戻れることを確認する
• 最後に送信し、実際にメールが届くところまで確認する
• 確認画面が必要かどうかは、サイトやフォームの目的に合わせて判断する

確認画面を追加することで、問い合わせを送る人が入力内容を一度見直してから送信できるようになりました。

ただし、確認画面を追加しただけで安心せず、実際のフォームで「入力」「確認」「戻る」「送信」「メール受信」まで一通りテストすることが大切です。

これで、最低限のお問い合わせフォームと送信前の確認画面が完成しました。

次回は、のんびり研究所が導入したいなと思っているプラグインを使ってみます。