Contact Form 7 add confirmの確認画面を見やすくする方法

Contact Form 7に確認画面をつけるプラグインContact Form 7 add confirmはすごく使いやすく便利ですが、chromeで確認画面へ遷移したときにinput要素にデフォルトの色が付いてしまいます。

そもそも、確認画面なのにinput要素ということが珍しいので、jsとcssでinput要素感を消してしまいましょう。

jsのアクションフックを使い確認画面時にクラスをつける

Contact Form 7の送信完了画面へ移動したときのアクション(on_sent_ok)と同様に、Contact Form 7 add confirmには(on_confirm)があります。

まず、これから書こうとしている内容は 99.99% のユーザーにとって必要のないものであり、実際、使用を推奨し…

確認画面時にis_confirmクラスを付け、戻るボタンを押したときにis_confirmクラスを削除しています。clickイベントにonを使うとイベントを重複して登録してしまうので、addEventListnerを使用しています。

on_confirm: "var $wpcf7 = $('.wpcf7'); $wpcf7.addClass('is_confirm');$('#back')[0].addEventListener('click', function() { $wpcf7.removeClass('is_confirm'); });"
on_sent_ok: "location.replace('/contact/thanks/');"

is_confirmクラスが付いているときは、input感を消すスタイル

box-shadowでデフォルのオートフィルにより背景色が黄色になってしまうのですが、見た目上box-shadowで打ち消すことができます。input要素のボーダーと背景色も消すことでinput感はなくなりすっきりとした見た目に。

.wpcf7.is_confirm input:-webkit-autofill {
	box-shadow: 0 0 0px 1000px #fff inset;
}
.wpcf7.is_confirm input[type="text"],
.wpcf7.is_confirm input[type="tel"],
.wpcf7.is_confirm input[type="email"],
.wpcf7.is_confirm select,
.wpcf7.is_confirm textarea {
	border: none;
	background: none!important;
	box-shadow: 0 0 0px 1000px #fff inset;
	resize: none; 
}

以上の修正で馴染みある確認画面へ変身しました。
Contact Form 7 add confirmの確認画面に違和感を感じた場合はこの方法をお試しください。

まとめ

WordPressのプラグインのカスタマイズはだいたいjsとcssでなんとかなる。

スポンサーリンク
RESAD
RESAD

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
RESAD