Affinger + Contact Form 7で確認画面を追加したらデザインが崩れたので直してみます。
確認画面はContact Form 7の追加プラグインになります。
今回対処するバージョンは以下です。
- Contact Form 7 v5.1.4
- Contact Form 7 add confirm v5.1
- WordPress v5.2.2–ja
ポイント
- 追加CSSを修正します
- コンタクトフォームを修正します
目次
デザインが崩れている状況
Affinger + Contact Form 7 + Contact Form 7 add confirmをあまり深く考えずに設定すると以下のようになりました。
Affingerのサイト全体のカラーは青にしています。
- 確認画面ボタンの背景色が灰色になっています
- 戻るボタンの背景色が灰色になっています
- ボタンのサイズがおかしくなっています
デザインの修正
追加CSSの修正
追加CSSにソースコードを追記することによりボタンの背景色を青色にします。
追加CSSは一番下の項目です。
Affingerのデザインが青色の場合は以下のようなソースコードです。追加したら【公開】ボタンを選択して反映させます。
/* 問い合わせボタン */ input.wpcf7-confirm, input.wpcf7-back { color: #ffffff; background-color: #039BE5; } input.wpcf7-confirm:hover, input.wpcf7-back:hover { background-color: #1da5e8; }
【送信】ボタンを選択(マウスオーバー)したとき、背景色が変わったので合わせてあります。
コンタクトフォームの修正
次に確認ページでボタンの配置がおかしかったのをコンタクトフォームにて修正します。
【確認画面】、【戻る】、【送信】をdisplay:inline-flexにて囲みます。
<div style="display:inline-flex"> [confirm "確認画面"] [back "戻る"] [submit "送信"] </div>
修正後
修正後の画面を確認してみます。
【確認画面】のボタンが青色になりました。
確認画面の【戻る】ボタン、【送信】ボタンの位置、色がいい感じになりました。

追加CSSはちょっと変更したい場合に便利です。覚えておいて損はないと思います 🙂