WordPressを用いてWebサイトを構築している方は、問い合わせフォームにプラグイン「Contact Form 7」を使って実装している方も多いのではないでしょうか。
Contact Form 7を使った問い合わせフォームの実装方法はこちら
Webサイトを運営していると訪問したユーザーからの問い合わせフォームを作成したいという方も多いと思います。仕事の案件獲得につながったり、Webサイトの改善につなげる貴重な意見が寄せられるかもしれません。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を編集することで、自分の好みにアレンジすることも可能です。ぜひ試してみてください。
