デザインCSSとContact Form 7のhtmlに対して若干のコードを加えることでContact Form 7の飾り付けを行うことができます。
参考までに下記デザインのスタイルシートのソースを公開します。ご自由にお使いください。
CSSに加えるコード
「外観」 → 「テーマの編集」から右下にあるスタイルシートをクリックしスタイルシートの最後の行に以下のコードを追加して下さい。
全てコピーしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/*------------------------------------ Contact Form 7 ------------------------------------*/ .post-content .wpcf7 { border: solid 5px #c3c3c3; padding: 4px 20px; font-size: 15px; font-size: 1.5rem; } .post-content .wpcf7 .wpcf7-require { background: #cc0000; color: #fff; padding: 1px 4px; margin-left: .5em; font-size: 11px; font-size: 1.1rem; } /*------------------------------------ Contact Form 7 ここまで ------------------------------------*/ |
初心者の方は下記のプラグインを使用すると便利です
初心者の方は、CSSのコード記述ミスなどがあると正常に表示されなかったり、最悪デザイン崩れが起こる可能性があるので、My custom cssを使用することをお勧めいたします。
Contact Form 7の「必須」を赤枠で囲む
コンタクトフォームの設定画面からソース内の赤枠にしたい箇所のテキストに以下のコードを加える。
「お問い合わせ」 → 「コンタクトフォーム」を選択
※今回は「必須」という文字を赤枠にするための参考例です。
|
1 |
<span class="wpcf7-require">必須</span> |
その他のContact Form 7カスタマイズは下記を参考にしてみてください。
【WordPress】「Contact Form7プラグイン」のカスタマイズまとめ
