Contact form 7 レイアウト編集

Wrodpress管理画面からCSSを変更する。

枠の幅と高さを変更する。

幅と高さが広くなった

変更後

メッセージ本文の枠の幅と高さを変更する。

ボタンのサイズと装飾を変更する。

デフォルトのボタン

ボタンのレイアウト変更

C9

Id属性とClass属性を指定する。

C1属性を中央寄せにする。

ｒecaptcha設定を中央寄せにする。

ボタンを中央寄せにする。

Recaptcha設定とボタンの幅はどうやって調べたのか？ と思われている方はいらっしゃないでしょうか？ 実はChrome拡張機能のPage Rulerを使いました。

Chrome拡張機能のPage Ruler

項目名の位置変更

項目名の下の余白を０ｐｘにする

今回の背景は画像が連続してもつながるので支障がない

背景画像の設定 Wordpress管理画面→メディア→貼り付けたい画像

背景画像挿入

文字が見えにくくなったので、文字色を白に変更します。

文字を白に変更

以上でcontact form 7のレイアウトの変更について説明を終わります。 ご覧下さりありがとうございました。