Contact Form 7 の デフォルトデザインはかなり寂しい。
先に結果から
▼入力画面から送信内容の確認画面（ Contact Form 7 add confirm ）へ移るときはこんな感じ
ボタンにアイコン（fontawesomeを使う）が表示されていい感じ（と思う）。
Contact Form 7 には確認画面が用意されていないため Contact Form 7 add confirm 様のお世話になるのだけれど、同じくさみしい思いをすることになる。
▼それがこのようになります。
送信内容を確認し、戻る（back）、決定（submit）するボタンたちがええ感じでしょ？
さて、ご存じ思いますが、デフォルトだとこんな感じです。
▼送信画面
これがいかんとはいいません。ただ「送信内容を確認する」とか書いても、いきなり送信されちゃう。
なんだかなあ…ですよ
だから Contact Form 7 add confirm 使うんだけど。
▼肝心の Contact Form 7 add confirm 様の確認画面はこうよ。
ぎゃあ
何かとぶつかってしまったのだろうか、悲惨なことになっている。ええいっ css で片付けます。
▼元々のボタン
[confirm "送信内容を確認する"][back "戻って修正する"][submit "この内容で送信する"]
▼アイコンをつける（fontawesomeを使ったため文字までボールドになるが許す）
[confirm class:fas " 送信内容を確認する"][back class:mr-1 class:fas " 戻って修正する"][submit class:fas " この内容で送信する"]
mr-1 は bootstrap のクラス
margin-right: 4px; みたいなものです
デザインはお好きにどうぞ
.wpcf7-form input[type="submit"], .wpcf7-form input[type="button"]{
width: 200px;
padding: 20px;
color: white;
background-color: blue;
}
.wpcf7-form input[type="button"]{
background-color: #555;
}
コメント