デザインCSSとContact Form 7のhtmlに対して若干のコードを加えることでContact Form 7の飾り付けを行うことができます。

参考までに下記デザインのスタイルシートのソースを公開します。ご自由にお使いください。

cf

CSSに加えるコード

「外観」 → 「テーマの編集」から右下にあるスタイルシートをクリックしスタイルシートの最後の行に以下のコードを追加して下さい。

全てコピーしてください。

初心者の方は下記のプラグインを使用すると便利です

初心者の方は、CSSのコード記述ミスなどがあると正常に表示されなかったり、最悪デザイン崩れが起こる可能性があるので、My custom cssを使用することをお勧めいたします。

Contact Form 7の「必須」を赤枠で囲む

コンタクトフォームの設定画面からソース内の赤枠にしたい箇所のテキストに以下のコードを加える。

「お問い合わせ」 → 「コンタクトフォーム」を選択

※今回は「必須」という文字を赤枠にするための参考例です。

so-susyuusei

その他のContact Form 7カスタマイズは下記を参考にしてみてください。

【WordPress】「Contact Form7プラグイン」のカスタマイズまとめ