WordPressにワンタッチでお問い合わせフォームを導入できるContact Form 7に確認画面を導入する方法

こんにちは、WPホームページ研究所の運営サポートチーム（@WP_LABO）です。

WordPressではカンタンにお問い合わせフォームが導入できます。導入はプラグインを有効にしてフォームを表示させたいページに「ショートコード」を貼り付けるだけでOKです。作業は３分もかかりません。

ワードプレスで管理者と申込者へ自動返信メールを送信できるお問い合わせフォームを設置する方法

設置方法は前回記事にしていますのでぜひご確認くださいませ。なお、上記では申込者と管理者へ自動返信メールを送信したりと細かく設定を加えているので手順が少しだけ長くなっています。もし管理者宛ての自動返信メールだけでOKでよければプラグイン有効後に「ショートコード」を貼るだけで完了です。

WordPressのお問い合わせフォームに確認画面を導入する方法

上記の記事で無事「お問い合わせフォーム」を設置したあとでさらにこだわりたい人は「確認画面」をつけると安心です。お問い合わせフォームに入力した内容を送信前に確認できるので使い勝手が向上します。

なお、本研究所にも「確認画面」を導入してみました。以下は上記の手順でフォームを設置した例です。現時点では「この内容で送信する」という送信ボタンになっているんで確認画面の機能はありません。

ちなみに「この内容で送信する」を押すと以下のようなエラーメッセージが表示されます。

確認画面の導入には以下記事で紹介しているプラグイン「Contact Form 7 add confirm」を使いました。

ランディングページ作成専用のWordPressテーマ「ＳＥＯランディングページ」でお問い合わせフォームに確認画面を導入する方法

プラグインのインストール手順は上記にもございますので本記事では少しだけ省略させていただきます。ただ省略しすぎると設定の流れがわからなくなるのでなるべく詳しく掲載するようにいたします。

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

管理画面の「プラグイン > 新規追加」から「Contact Form 7 add confirm」を検索してインストール。

今すぐインストールをクリックするとインストールが始まります。

インストールが完了したら「有効化」をクリック。

無事有効化が完了すると以下メッセージが表示されます。

次に「お問い合わせ > コンタクトフォーム」から該当のフォームを開きます。

現在は「送信ボタン」のコードしか入っていないですね。

確認画面を設定するためにボタンを置き換えましょう。

💻ウェブサイト運営でお困りの方へ

⇒ WordPressの設定ミスを即日で解決 ※ 安心の定額サポート

念のためコピペ用のコードを残しておきます。

[back "戻って編集する"][confirm "確認画面へ進む"][submit "上記内容で送信する"]

置き換えたら「保存」をクリック。

その後「お問い合わせページ」を開くとボタンが置き換わっています。さきほど「この内容で送信する」だったボタンが「確認画面へ進む」に変わっていますね。文言はお好きに設定してくださいませ。

各項目を入力して「確認画面へ進む」をクリックすると確認画面が表示されます。各項目がグレーアウトされて入力できない画面が表示されています。戻るボタン「戻って編集する」のレイアウトが狭いですね。各項目の色や項目内の文字の色、メッセージ本文（textarea）の枠線などがきになるのでCSSで微調整しました。

微調整後の見た目が下記です。確認画面らしくバランスがとれましたね。各項目を薄グレーで統一して、項目内の文字色を濃いめのグレーに変更いたしました。項目の枠線もすべて同色に調整をしています。

まとめ

ワードプレスではContact Form 7を導入するとカンタンにフォームが使えます。ただ、確認画面がないので一般的なフォームと比べると使い勝手が異なります。今回ご紹介した「Contact Form 7 add confirm」を追加インストールすればさくっと確認画面機能を実装できますのでぜひお試しくださいませ。