Contact Form 7を設置したはいいけど、デフォルトのデザインが地味すぎる……そう感じたことはありませんか？
実はContact Form 7はCSSを書く前提で作られており、デフォルトは意図的にシンプルになっています。つまりCSSを少し書くだけで、プロが作ったようなフォームに仕上げられます。
この記事では以下の内容を解説します。
- CSSを書く場所（3つの方法）
- 入力欄・ラベル・送信ボタンの基本カスタマイズ
- コピペOKのデザインテンプレート3選（シンプル・ビジネス・おしゃれ）
- CSSが反映されない時のよくある原因と対処法
コードはすべてコピペで使えるので、CSSに詳しくない方でも安心して読み進めてください。
1. Contact Form 7のCSSを書く場所
CSSを書く方法は主に3つあります。テーマや環境に合わせて選んでください。
① 追加CSS（最も手軽）
WordPress管理画面から 外観 → カスタマイズ → 追加CSS を開き、そこにCSSを貼り付けます。
テーマファイルを直接編集しないため安全で、初心者にもっともおすすめの方法です。テーマを切り替えると消えてしまう点だけ注意してください。
② テーマのstyle.css
子テーマを使っている場合は style.css に直接追記できます。テーマを更新しても消えないため、長期運用に向いています。
/* 子テーマのstyle.cssに追記 */
.wpcf7-form input[type="text"] {
border: 1px solid #ccc;
}③ カスタムCSSファイル（上級者向け）
専用のCSSファイルを作成し、functions.php で読み込む方法です。コードが整理しやすく、大規模サイトに向いています。
// functions.phpに追記
function my_custom_styles() {
wp_enqueue_style( 'my-cf7-style', get_stylesheet_directory_uri() . '/css/cf7-style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_custom_styles' );2. 入力欄・ラベルの基本カスタマイズ
まずContact Form 7の主要なCSSセレクタを押さえておきましょう。
| 対象 | セレクタ |
|---|---|
| テキスト入力欄 | .wpcf7-form input[type="text"] |
| メールアドレス欄 | .wpcf7-form input[type="email"] |
| テキストエリア | .wpcf7-form textarea |
| 送信ボタン | .wpcf7-form input[type="submit"] |
| フォーム全体 | .wpcf7-form |
| エラーメッセージ | .wpcf7-not-valid-tip |
| 送信完了メッセージ | .wpcf7-mail-sent-ok |
入力欄のスタイル
/* 入力欄の基本スタイル */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
width: 100%;
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 15px;
background-color: #fff;
box-sizing: border-box;
transition: border-color 0.2s;
}
/* フォーカス時（クリックした時）のスタイル */
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus {
border-color: #0073aa;
outline: none;
box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.15);
}送信ボタンのスタイル
/* 送信ボタン */
.wpcf7-form input[type="submit"] {
display: inline-block;
padding: 12px 40px;
background-color: #0073aa;
color: #fff;
font-size: 15px;
font-weight: bold;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s, transform 0.1s;
}
/* ホバー時 */
.wpcf7-form input[type="submit"]:hover {
background-color: #005a87;
transform: translateY(-1px);
}
/* クリック時 */
.wpcf7-form input[type="submit"]:active {
transform: translateY(0);
}3. コピペOKデザインテンプレート3選
以下の3パターンはそのままコピペして「追加CSS」に貼り付けるだけで使えます。
テンプレート①：シンプル・ミニマル
余計な装飾を省いた、どんなサイトにも馴染むシンプルなデザインです。
/* ===== テンプレート① シンプル・ミニマル ===== */
.wpcf7-form p {
margin-bottom: 20px;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid #ddd;
border-radius: 0;
font-size: 14px;
background-color: #fafafa;
box-sizing: border-box;
transition: border-color 0.2s, background-color 0.2s;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus {
border-color: #333;
background-color: #fff;
outline: none;
}
.wpcf7-form textarea {
height: 160px;
resize: vertical;
}
.wpcf7-form input[type="submit"] {
padding: 12px 48px;
background-color: #333;
color: #fff;
font-size: 14px;
letter-spacing: 0.05em;
border: none;
border-radius: 0;
cursor: pointer;
transition: background-color 0.2s;
}
.wpcf7-form input[type="submit"]:hover {
background-color: #000;
}
.wpcf7-not-valid-tip {
color: #c0392b;
font-size: 12px;
margin-top: 4px;
}
.wpcf7-mail-sent-ok {
border: 1px solid #27ae60;
background-color: #eafaf1;
color: #27ae60;
padding: 12px;
border-radius: 2px;
}テンプレート②：ビジネス・企業サイト向け
信頼感・清潔感を重視した、企業サイトやサービスサイト向けのデザインです。
/* ===== テンプレート② ビジネス・企業サイト向け ===== */
.wpcf7-form p {
margin-bottom: 24px;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
width: 100%;
padding: 12px 16px;
border: 2px solid #e0e0e0;
border-radius: 6px;
font-size: 15px;
background-color: #fff;
box-sizing: border-box;
transition: border-color 0.25s, box-shadow 0.25s;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus {
border-color: #1a73e8;
box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.12);
outline: none;
}
.wpcf7-form textarea {
height: 180px;
resize: vertical;
}
.wpcf7-form input[type="submit"] {
display: block;
width: 100%;
padding: 14px;
background-color: #1a73e8;
color: #fff;
font-size: 16px;
font-weight: bold;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.2s, box-shadow 0.2s;
}
.wpcf7-form input[type="submit"]:hover {
background-color: #1557b0;
box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
}
.wpcf7-not-valid-tip {
color: #d93025;
font-size: 13px;
margin-top: 6px;
display: block;
}
.wpcf7-mail-sent-ok {
border: none;
background-color: #e8f5e9;
color: #2e7d32;
padding: 16px;
border-radius: 6px;
font-weight: bold;
}
.wpcf7-mail-sent-ng {
background-color: #fce8e6;
color: #d93025;
padding: 16px;
border-radius: 6px;
}テンプレート③：おしゃれ・ブログ向け
ボトムラインスタイルでスタイリッシュに仕上げた、個人ブログやポートフォリオ向けのデザインです。
/* ===== テンプレート③ おしゃれ・ブログ向け（ボトムラインスタイル） ===== */
.wpcf7-form p {
margin-bottom: 28px;
position: relative;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
width: 100%;
padding: 8px 0;
border: none;
border-bottom: 2px solid #ddd;
border-radius: 0;
font-size: 15px;
background-color: transparent;
box-sizing: border-box;
transition: border-color 0.3s;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus {
border-bottom-color: #e74c7c;
outline: none;
}
.wpcf7-form textarea {
height: 140px;
resize: none;
}
.wpcf7-form input[type="submit"] {
padding: 12px 48px;
background-color: transparent;
color: #e74c7c;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.1em;
text-transform: uppercase;
border: 2px solid #e74c7c;
border-radius: 30px;
cursor: pointer;
transition: background-color 0.25s, color 0.25s;
}
.wpcf7-form input[type="submit"]:hover {
background-color: #e74c7c;
color: #fff;
}
.wpcf7-not-valid-tip {
color: #e74c7c;
font-size: 12px;
margin-top: 4px;
}
.wpcf7-mail-sent-ok {
border: 2px solid #e74c7c;
color: #e74c7c;
padding: 12px 20px;
border-radius: 30px;
text-align: center;
}4. CSSが反映されない時の対処法
CSSを書いたのに見た目が変わらない、という場合の主な原因と対処法です。
原因① キャッシュが残っている
ブラウザやキャッシュプラグイン（W3 Total CacheやWP Super Cacheなど）のキャッシュが原因で、古いCSSが表示されている場合があります。
対処法：ブラウザのキャッシュをクリア（Ctrl + Shift + R）し、キャッシュプラグインのキャッシュも削除してください。
原因② CSSの優先度（詳細度）が低い
テーマのCSSがContact Form 7のCSSより優先されていると、自分のCSSが上書きされてしまいます。
対処法：セレクタをより具体的にするか、!important を使います。
/* !importantを使う例 */
.wpcf7-form input[type="submit"] {
background-color: #e74c7c !important;
}ただし !important の多用はCSSの管理が難しくなるため、まずはセレクタを具体的にする方法を試しましょう。
原因③ セレクタが間違っている
ブラウザの開発者ツール（F12）でフォームの要素を確認し、正しいクラス名・セレクタを使っているか確認してください。Contact Form 7のバージョンによってクラス名が変わる場合があります。
原因④ CSSを書く場所の読み込み順
テーマの style.css よりContact Form 7のCSSが後から読み込まれる場合、上書きされることがあります。「追加CSS」はテーマCSSより後に読み込まれるため、この問題が起きにくくおすすめです。
まとめ
Contact Form 7のCSSカスタマイズについてまとめます。
- CSSを書く場所は「追加CSS」が最も手軽でおすすめ
- 主要なセレクタ（
.wpcf7-form input、textarea、input[type="submit"]）を覚えておくと応用しやすい - 3つのテンプレートはそのままコピペで使える
- CSSが反映されない時はキャッシュ・詳細度・セレクタの3つを確認
Contact Form 7の基本的な使い方・設置方法はこちらの記事で解説しています。
