WordPressの問い合わせフォームに確認画面を実装する方法!Contact Form 7 add confirmの使い方とデザインカスタマイズをご紹介

wordpress 問い合わせフォーム 確認画面

WordPressを用いてWebサイトを構築している方は、問い合わせフォームにプラグイン「Contact Form 7」を使って実装している方も多いのではないでしょうか。

Contact Form 7を使った問い合わせフォームの実装方法はこちら

簡単な設定で優秀なプラグインではあるのですが、ユーザーが問い合わせ内容を送信する際の確認画面がありません。

今回はその確認画面をプラグイン「Form 7 add confirm」を使って簡単に実装する方法をご紹介します。

Contact Form add Confirmのインストール

管理画面「プラグイン」→「新規追加」より” Contact Form 7 add Confirm”をインストールしてください。

インストールしたらそのままプラグインを有効化します。

確認画面の実装

「Contact Form 7 add Confirm」の優秀なところは、特に設定を編集する必要なく、インストールしたらすぐに使えるところです。

管理画面「お問い合わせ」から問い合わせフォームの編集画面を開いてください。

エディター上部に”確認ボタン”、”戻って編集ボタン”が追加されています。

確認ボタンの追加

確認ボタンの実装は、Contact Form 7の追加方法と同じです。エディター上部のボタンをクリックします。

“ラベル”はボタンに表示されるラベルの文言です。今回は「確認画面」と入力しました。

これで実装は完了です。

戻って編集ボタンの追加

戻って編集ボタンも同じ要領です。”戻って編集ボタン”をクリックします。

今回はラベルに「戻る」と入力しました。

これで実装は完了です。

実装の確認

“確認ボタン”と”戻って編集ボタン”が実装されているか確認します。

こちらが実装されたページです。

無事、送信ボタンの前に確認ボタンを実装できています。

確認ボタンをクリックします。

フォームの送信ボタンの隣に戻るボタンが表示されました。

フォームのスタイルをカスタマイズ

デフォルトの状態では、確認画面のテキストエリアの背景色がグレーの状態になります。ボタンのスタイルも一般的なHTMLのデフォルトのデザインなので、編集していきます。

確認画面のテキストエリアの背景色のグレーを変更する

確認画面のテキストエリアの背景色を変更していきます。ブラウザのデバックツールを確認すると、テキストエリアには”wpcf7c-conf”というクラスが当てられています。

style.cssを編集

管理画面「外観」→「テーマの編集」から”style.css”を開いてください。

スタイルシートに以下のCSSを追加します。

.wpcf7c-conf {
background-color: #FFFFFF; /* 背景色を白に */
color: black;
border: 1px solid #333333;
}

これでグレーだった背景色が白に変わりました。”background-color”の部分の値を変更することで、好みの背景色にすることができます。適宜編集してください。

ボタンのスタイルを変更する

ボタンのスタイルを変更します。ブラウザのデバックツールで確認すると、送信ボタンには”wpcf7-submit”、確認ボタンには”wpcf7-confirm”、戻って編集ボタンには”wpcf7c-btn-back”のクラスが当てられています。

それぞれのスタイルを編集していきます。

・・style.cssを編集

同じようにstyle.cssを編集していきます。

実装内容は以下の通り

  • ボーダーを太くする
  • ボーダの色を変更
  • フォントカラーを変更
  • ホバーした際に背景色とフォントカラーを入れ替える
    ※戻って編集ボタンにホバー時の挙動は指定しない。

style.cssに以下のコードを記述してください。

確認ボタン、送信ボタン
/*確認ボタン、送信ボタンのスタイル*/
input.wpcf7-confirm,
input.wpcf7-submit {
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
color: #dd4084;
border: solid 2px #dd4084;
}
/*確認ボタン、送信ボタンにホバーした時のスタイル*/
input.wpcf7-confirm:hover,
input.wpcf7-submit:hover {
background: #dd4084;
color: white;
}
戻って編集ボタン
input.wpcf7c-btn-back {
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
color: #BDBDBD;
border: solid 2px #BDBDBD;
}

編集が完了したら「保存ボタン」をクリックして確認しましょう。

確認ボタン、送信ボタン

戻って編集ボタン

無事デザインを編集できました。

背景色やフォントカラー、ボーダーの太さは値を変更することで、お好みのデザインに編集することができます。

WordPressの問い合わせフォームに確認画面を実装する方法のまとめ

Contact Form 7は初心者の方でも使いやすい優秀なプラグインですが、確認画面がないことが弱点でした。しかし、この記事で紹介した、Contact Form 7 add confirmを使いことで、簡単に確認画面を実装することができます。

デザインもクラスに当てられたCSSを編集することで、自分の好みにアレンジすることも可能です。ぜひ試してみてください。

制作費用参考表

想定費用 想定納期
コーポレートサイト 10万円〜 1ヶ月〜
メディアサイト 10万円〜 1ヶ月〜
WordPressテンプレートプラン 5万円〜 3週間〜
ランディングページ 5万円〜 1ヶ月〜
保守運用 1万円〜 -
SEOコンサルティング 1万円〜 最低契約期間3ヶ月
その他サイト不具合等のご相談 応相談