contactform7の確認画面のカスタマイズ - マメな人はバカであれ

contactform7は入力画面と完了画面しかないので心配性の日本人は確認画面をよく欲します。そこで確認画面を追加するために、「contactform7 add confirm」というアドオン？プラグインを追加してあげます。

これで確認画面も追加されてよっしゃおっけー！というわけにもいかなかったり…

このままでもいいのですが、事前にデザインを作成していてcontactform7を入れたらデザイン通りに確認画面が表示されなかった。 cssでクラスを振っていたのに確認画面ではクラスが振られてなくてスタイルが当たらないとか。

ここら辺はどんなプラグインでも出て来るんじゃないかなって思います。

私がよくやっているのがjsから確認用にinputそれぞれのvalを取得して確認画面に流し込むといったことをやったりします。

下記が全文です。

/* ===============================================
 * Contactform7 確認
 * =============================================== */
var $wpcf7 = $(".wpcf7");
var $cfConfirm = $(".wpcf7c-btn-confirm");
if($wpcf7.length > 0) { // contactfrom7がある時
    if($wpcf7.find('.wpcf7-form-control-wrap').length > 0) {

        $cfConfirm.on("click", function() { // 確認ボタンをクリック
            var $cfwrap = $wpcf7.find('.wpcf7-form-control-wrap')
            $cfwrap.each(function(index, el) { // フォームが複数ある時用
                $this = $(el);
                if ($this.find("textarea").length > 0) { // textarea
                    var thisVal = $this.find("textarea").val(); // textareaのvalを取得
                    thisVal = thisVal.replace(/\n/g, "<br />"); // textareaの改行を補完
                }else if ($this.find("select").length > 0) { // select
                    var thisVal = $this.find("option:selected").val(); // selectのvalを取得
                }else if ($this.find('input[type="checkbox"]').length > 0) { // checkbox
                    var thisVal;
                    $this.find('input[type="checkbox"]:checked').each(function(i, ele) { // 選択されたcheckboxを取得
                        if (i === 0) { // 取得したval用にspanタグを生成
                            thisVal = "<span class='confirm'>"
                            thisVal += $(ele).val();
                        }else{
                        thisVal += "</span><span class='confirm'>";
                        thisVal += $(ele).val();
                        }
                        if (i == ele.length - 1) {
                            thisVal += "</span>";
                        }
                    });
                }else if ($this.find('input[type="radio"]').length > 0) { // 選択されたradioを取得
                    var thisVal = $this.find('input[type="radio"]:checked').val(); // 選択されたradioのvalを取得
                }else{
                    var thisVal = $this.find("input").val(); // 入力されたinputのvalを取得
                }
                if (!$this.next(".confirm").length > 0) { // 確認画面用のval表示用のspanを生成
                    $this.after('<span class="confirm"></span>');
                }
                // console.log(thisVal);
                $this.next(".confirm").empty(); // confirmの中身を空っぽに
                $this.next(".confirm").html(thisVal); // confirmの中にvalを入れる
            });
        });
    }
}

var $wpcf_back = $(".wpcf7c-btn-back");
$wpcf_back.on("click", function(){
    $(".wpcf7-form").removeClass('failed'); // 確認画面で付与される.failedを削除
});

一個一個説明もめんどくさいので簡単にコメントアウトで説明しています。

入力したテキストを自分で確認画面に自由に表示したいっていう時には、その入力したinputの隣に.confirmっていうクラスの要素を追加して、 .confirmに取得したvalを流し込むっていう方法を取っています。

セキュリティが云々とかはわかりませんが、これで大枠自由にスタイルも決められます。

確認画面時に表示非表示については .wpcf7c-elm-step1や.wpcf7c-elm-step2とか使ったり。 .wpcf7-form.failedや.wpcf7-form.sentで表示非表示をcssで管理してあげましょう。

この辺りはいつも探り探りでやっていますが、そろそろテンプレートでも作っておかないといけないですね…

春になって暖かくなってきましたし、そろそろ山登りでも始めていきたいですね。高尾山とかは花見で人がいっぱいかな…