味気ない Contact Form 7 の送信ボタンを飾る

Web App

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;
}

コメント