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

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

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

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

関連記事

Webサイトを運営していると訪問したユーザーからの問い合わせフォームを作成したいという方も多いと思います。仕事の案件獲得につながったり、Webサイトの改善につなげる貴重な意見が寄せられるかもしれません。WordPressでは問い合わ[…]

wordpress 問い合わせ

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

今回はその確認画面をプラグイン「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を編集することで、自分の好みにアレンジすることも可能です。ぜひ試してみてください。

Ads