Affinger + Contact Form 7 + 確認画面をカスタマイズ

Affinger + Contact Form 7で確認画面を追加したらデザインが崩れたので直してみます。
確認画面はContact Form 7の追加プラグインになります。

今回対処するバージョンは以下です。

デザインが崩れている状況

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はちょっと変更したい場合に便利です。覚えておいて損はないと思います 🙂