《Wordpress》Contact Form 7 add confirm使用時のスタイルを整える

入力フォームプラグイン「Contact Form 7」のアドオンの、「Contact Form 7 add confirm」を使用時のスタイルをリセットしたりカスタマイズします。

暗くなるのをリセット

確認状態になると入力領域がグレーになります。
これをリセットします。

input.wpcf7c-conf,
textarea.wpcf7c-conf {
  border: 0;
  padding: 0;
  background: #fff;
}

オートコンプリートの背景色を取り除く

Chromeで確認状態になると、背景色がオートコンプリートのまま残ります。
これをリセットします。

.wpcf7-text:-webkit-autofill {
  box-shadow: 0 0 0 1000px #fff inset;
}

このコードは通常入力時のオートコンプリートも打ち消す挙動になります。
確認フローの時だけ、オートコンプリートの背景色を取りのぞきたい場合は、もうすこし改良が必要です。

確認のフローでのみオートコンプリートの背景色を取り除く

これにはスクリプトが必要になります。
確認状態の時に任意のクラスを付与して、それを利用してスタイルを指定します。
そして、戻るボタンを押したときには、クラスを取り除きます。

WordPressの管理画面のコンタクトフォームの編集画面から、「その他の設定」タブに以下を記述します。

on_confirm: "var $wpcf7 = $('.wpcf7'); $wpcf7.addClass('is_confirm');$('.wpcf7c-btn-back')[0].addEventListener('click', function() { $wpcf7.removeClass('is_confirm'); });"

確認状態の時にwpcf7にis_confirmというクラスを与えて、戻るボタンを押下すると削除します。

CSSは以下のように記述します。

.wpcf7.is_confirm input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px #fff inset;
}

アラートウインドウで確認を促す

スタイルを整える、の趣旨からそれますが、確認状態に移るときにアラートウインドウを表示するコードです。

document.addEventListener('wpcf7submit', function (event) {
  switch (event.detail.status) {
    case 'wpcf7c_confirmed':
      // 確認後に実施したい処理
      break;
  }
}, false);

確認のフローは非同期遷移なので、慣れていないユーザーに対してわかりやすくしてあげるのに、手荒ですが対応できるかなあと思います。
wpcf7submit イベントの wpcf7c_confirmed のタイミングでスクリプトを与えるといろいろ確認時に実行できるので、モーダルウィンドウとかを自作するのもアリですね。

おわります。