【WordPressプラグイン】Contact Form 7 add confirmで、お問い合わせフォームに確認画面を追加してみよう！

こんにちは。

ヲタ活資金の作り方ガイドのromiromiです

 

 

今回は、

問い合わせフォームに、確認画面を追加できるプラグイン

【Contact Form 7 add confirm】のインストールと設定方法を解説していきます。

 

 

【Contact Form 7 add confirm】には、ディフォルトでは、確認画面がついていません。

送信ボタンを押したら、すぐに送信されてしまいます。

お問い合わせフォームに、確認画面を設けることで、送信前に確認することができ、入力ミスを少なくするのに役立ちます。

それに、スパムメールの防止にも役立ちます。

 

問い合わせフォームのプラグイン【Contact Form 7】を導入している前提での解説になりますので、

導入がまだの方は、下記を参考に導入してください。

 

 

 

それでは、早速作業に移ります。

 

【Contact Form 7 add confirm】をインストールする

ダッシュボードのメニューから、

【プラグイン】⇒【新規追加】をクリックします。

 

 

キーワード検索欄に、【Contact Form 7 add confirm】と入力します。

コピペでもOKです。

 

 

【今すぐインストール】をクリックします。

 

 

続けて、【有効化】をクリックします。

 

 

インストールと有効化が完了しました。

 

お問い合わせフォームの編集

それでは、すでに設定済のお問い合わせフォームの編集に移ります。

ダッシュボードのメニューから、

【お問い合わせ】⇒【コンタクトフォーム】をクリックします。

 

 

使用している、お問い合わせフォームをクリックします。

 

 

コンタクトフォームの編集画面が表示されます。

【確認ボタン】【戻って編集ボタン】が追加されました。

 

確認ボタンを追加する

まずは、【確認ボタン】を追加していきます。

 

①[submit  “送信”］の前にカーソルを持って行き、クリックします。

②の【確認ボタン】をクリックします。

 

 

確認ボタンの生成画面が表示されます。

①ラベル部分に「確認画面へ」と入力後、②の【タグを挿入】をクリックします。

 

元に戻って、【確認画面へ】が追加されたことを確認してください。

 

【戻って編集ボタン】の追加

 

次に、【戻って編集ボタン】を追加します。

①［confirm　”確認画面へ”］［submit　”送信”］の前にカーソルを持って行きます。

②【戻って編集ボタン】をクリックします。

 

戻って編集ボタンのラベルを設定します。

ラベルに「戻る」と入力して、【タグ挿入】をクリックします。

 

元の画面に戻ります。

①［back　”戻る”］［confirm　”確認画面へ”］［submit　”送信”］の順番で、表示されていることを確認します。

②【保存】をクリックします。

 

ボタンの追加は完了しました。

 

追加したボタンを確認

ボタンを追加した、お問い合わせフォームを見てみましょう。

 

 

【確認画面へ】をクリックすると、下記の表示になります。

 

背景色は、お使いのテーマによって違うようです。

確認画面があることで、読者さん目線のお問い合わせフォームが完成しました＾＾

 

 

 

まとめ

【Contact Form 7 add confirm】というプラグインを使って、

お問い合わせフォームに、確認画面を追加しました。

 

お問い合わせフォームやメールフォームを設置する側（ブログ運営者）は、

「問い合わせフォームにを設置する」ことをメインに考えるので、あまり気にしない方も多いと思います。

 

読者さん目線に立つと、確認画面があった方が、安心感が違いますね。

この機会に、お問い合わせフォームに、確認画面を追加してみてください。