先日、Contact Form 7に確認画面を追加することがありましたのでその手順をメモします。
『Contact Form 7』はWordpressにお問い合わせフォームを追加する便利でポピュラーなプラグインです。単体ではたくさんのカスタマイズはできませんが、シンプルで初心者にも扱いやすくなっています。
入力後に確認画面を追加したい
そんなとっても便利なContact Form 7ですが、デフォルトだと必要事項を入力して送信ボタンクリックするとそのまま送信されてしまいます。
これだと、「あっ！間違えちゃった！」と気付いた時には送信されてしまうので、確認画面があると親切ですね。最近はユーザーの手間をなるべく省くために確認画面をつけないという選択をする場合も増えていますが、次に紹介するプラグインはページ遷移しないのでストレスは少ないかと思います。お好みで！
では確認画面の追加方法です。
『Contact Form 7 add confirm』プラグインを追加
Contact Form 7には確認画面を追加する機能が付いていないので、『Contact Form 7 add confirm』というプラグインを追加します。
wordpress管理画面の「プラグイン＞新規追加」でContact Form 7 add confirmを検索してインストール＆有効化しましょう。
確認ボタン＆戻るボタンを設定する
インストールしたら設定をしてみましょう。「プラグイン＞Contact Form 7＞設定」画面に行くと、『確認ボタン』と『戻って編集ボタン』が追加になっています。
ボタンをクリックしてタグを挿入します。ラベルにはボタンに表示したい言葉を。IDやクラスを追加したい場合は任意で入れてください。
同様にして「戻って編集する」ボタンも追加しました。修正する、再編集、などお好きな言葉で設定してください。
画面で確認してみる
フォーム画面を確認すると、「確認」ボタンだけ出ています。入力して「確認」ボタンをクリックすると、右のように「戻って編集」「送信」ボタンの表示された確認画面になります。
「戻って編集」ボタンは上下で配置するなら送信ボタンの上、左右で配置するなら左側に置いた方が間違って送信してしまうのを防ぎやすいと思います。
確認画面にだけメッセージを入れる
少し上級者向けになりますが、入力画面・確認画面・完了画面で特定の文言などを入れたい場合は、以下のクラスをつけることで表示非表示が可能です。
入力画面のみで表示： 「wpcf7c-elm-step1」のクラスを付与
確認画面のみで表示： 「wpcf7c-elm-step2」のクラスを付与
完了画面のみで表示： 「wpcf7c-elm-step3」のクラスを付与
例としてありそうな、「確認画面にメッセージを入れる」をやってみましょう。
プラグインの設定画面でメッセージを入力し、確認画面のみで表示できる「wpcf7c-elm-step2」のクラスを入れてみます。
入力したソースはこちら。
<p class="wpcf7c-elm-step2">入力内容に間違いがなければ「送信」を押してください</p>
「入力内容に間違いがなければ「送信」を押してください」の部分をお好きなように編集してください。
入力画面で表示する場合は「wpcf7c-elm-step2」を→「wpcf7c-elm-step1」に、送信画面で表示する場合は「wpcf7c-elm-step2」を→「wpcf7c-elm-step3」にしてください。
プレビューしてみると、入力時は表示されず、確認画面にだけ表示されました！
もしつまづいてしまった場合は、こちらの記事のコメントでやりとりがされているので探してみると解決策が見つかるかもしれません。
Contact Form 7に確認画面をものすごく簡単に付けられるプラグイン
もし使うことがありましたら参考にしてみてください♪
