WordPress

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

 

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のサイト全体のカラーは青にしています。

  • 確認画面ボタンの背景色が灰色になっています

Contact Form 7

 

  • 戻るボタンの背景色が灰色になっています
  • ボタンのサイズがおかしくなっています

Contact Form 7

 

デザインの修正

追加CSSの修正

追加CSSにソースコードを追記することによりボタンの背景色を青色にします。

 

追加CSSは一番下の項目です。

追加CSS

 

Affingerのデザインが青色の場合は以下のようなソースコードです。追加したら【公開】ボタンを選択して反映させます。

追加CSS

 

/* 問い合わせボタン */
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にて囲みます。

Contact Form 7設定

 

<div style="display:inline-flex">
[confirm "確認画面"]
[back "戻る"] [submit "送信"]
</div>

 

修正後

修正後の画面を確認してみます。

【確認画面】のボタンが青色になりました。

Contact Form 7

 

確認画面の【戻る】ボタン、【送信】ボタンの位置、色がいい感じになりました。

Contact Form 7

 

 

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

 

-WordPress
-

© 2020 40代サラリーマンがセミリタイアを目指す