WordPressでContact Form 7のフォームをCSSでスタイリングする方法

更新日

WordPressのフォームをサイト全体と同じくらい洗練された見た目にしたいですか？Contact Form 7を使えば、CSSでフォームの外観を完全にコントロールできます。このガイドでは、Contact Form 7フォームのスタイリング手順を一つずつ解説し、訪問者にシームレスでブランドらしい体験を提供できるようにします。

なぜContact Form 7フォームをスタイリングするのか？

Contact Form 7は、フォーム作成用の最も人気のあるWordPressプラグインの一つですが、デフォルトの見た目はシンプルです。クラシックなWordPressテーマでカスタムスタイリングを行うことで、以下のことが可能になります：

  • サイトのブランディングに合わせる

  • 使いやすさとアクセシビリティを向上させる

  • フォームをより魅力的でプロフェッショナルにする

ステップ1：フォームのCSSセレクタを特定する

スタイリングを始める前に、どのCSSセレクタがフォーム要素をターゲットにするかを知っておく必要があります。

  • 各Contact Form 7フォームは、.wpcf7という固有のクラスでラップされています

  • inputフィールド、textarea、送信ボタンなどの個々の要素は、標準のHTMLタグを使用します

ステップ2：WordPressサイトにカスタムCSSを追加する

CSSを追加する主な方法は2つあります：

  • カスタマイザー経由：
    外観 > カスタマイズ > 追加CSS に移動し、スタイルを貼り付けます。

注意： より高度なカスタマイズには、子テーマのstyle.cssファイルにCSSを追加してください。

ステップ3：カスタムCSSを書く

「text」と「submit」フォームコンポーネントを例に、よく使われるサンプルをいくつか紹介します：

すべてのContact Form 7フォームをスタイリングする

.wpcf7 input[type="text"],
.wpcf7 textarea {
  border: 2px solid #0073e6;
  padding: 10px;
  width: 100%;
  font-size: 1em;
}

.wpcf7 input[type="submit"] {
  background: #0073e6;
  color: #fff;
  border: none;
  padding: 12px 30px;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.2s;
}

.wpcf7 input[type="submit"]:hover {
  background: #005bb5;
}

:hoverのようなCSSの疑似クラスを使うと、要素の状態やユーザーの操作に応じてスタイルを変更できます。たとえば、:hover疑似クラスは、ユーザーがボタンやフィールドの上にマウスポインタを移動したときにスタイルを適用します。これは、ボタンを強調表示したり、ホバー時に色を変えたりして、フォームをよりインタラクティブで視覚的に魅力的にするためによく使われます。他にも:focus（入力が選択されたとき）や:active（要素がクリックされているとき）などの便利な疑似クラスがあります。疑似クラスを使うことで、訪問者がフォームを操作した際に即座にフィードバックを与え、ユーザー体験を向上させます。

特定のフォームをターゲットにする

各フォームには#wpcf7-f123-o1のような固有のIDがあります。これを使ってそのフォームだけをスタイリングできます：

#wpcf7-f123-o1 input[type="text"] {
  background: #f9f9f9;
}
f123-o1は実際のフォームIDに置き換えてください。Contact Form 7フォームが埋め込まれているページを表示し、フォームを右クリックして「検証」（または「要素を検証」）を選択すると、固有のIDを確認できます。.wpcf7クラスの<div>を探し、HTMLコード内でid="wpcf7-f123-o1"のように表示されます。このIDをCSSセレクタで使うことで、その特定のフォームだけをターゲットにできます。

ステップ4：Contact Form 7の組み込みクラスを使う

Contact Form 7は自動的に要素にクラスを追加するため、ターゲット指定がさらに簡単です。例えば：

  • .wpcf7-form-control – すべてのフォームコントロール

  • .wpcf7-submit – 送信ボタン

さらにコントロールしたい場合は、フォームエディタで独自のクラスを追加することもできます。

例

.wpcf7-form-control.wpcf7-text {
  border-radius: 5px;
}

.wpcf7-submit {
  font-weight: bold;
  letter-spacing: 1px;
}

ステップ5：プレビューと調整

CSSを保存したら、サイトをリフレッシュして変更を確認しましょう。ブラウザの検証ツールを使えば、リアルタイムでスタイルを調整し、確定したらサイトにコピーできます。変更後はウェブサイトのキャッシュをクリアして、訪問者にも更新が反映されるようにしてください。

デモサイトのフォームで、ステップ3のCSSコードを使って各フォームフィールドの枠を青色にしたビフォーアフターの例を紹介します。

より良いフォームスタイリングのためのクイックヒント

  • アクセシビリティを保つ： 十分な色のコントラストと読みやすいフォントサイズを確保しましょう

  • スペースを活用： パディングやマージンを追加して、すっきりとした見た目にしましょう

  • エラーを強調： エラーメッセージは赤などのはっきりした色でスタイリングし、ユーザーがミスを修正しやすくしましょう

  • モバイルでテスト： すべてのデバイスでフォームがきれいに表示されるか確認しましょう

トラブルシューティング

スタイルが反映されない場合は、次の手順を試してください：

  • ブラウザとサイトのキャッシュをクリアする – キャッシュされたファイルが新しいCSSの表示を妨げることがあります。キャッシュプラグインやマネージドホスティングを利用している場合は、それらのキャッシュもクリアしてください。

  • CSSの詳細度の問題を確認する – スタイルが適用されない場合は、セレクタをより詳細にして既存のスタイルを上書きできるようにしましょう。

  • 正しいCSSファイルやセクションを編集しているか確認する – 追加CSSパネル、子テーマのstyle.css、またはカスタムCSSプラグインなど、正しい場所にコードを追加しているか再確認しましょう。

  • CSSクラスのスペルミスやエラーを確認する – クラス名のスペルミスや不要なスペース、誤ったクラスの使用がないか確認しましょう。また、ターゲットにしているクラスが実際にフォームのHTMLに存在するかも確認してください。

  • 重複や競合するクラスを確認する – 使用しているクラスが他の場所ですでに異なるスタイルで適用されていないか確認しましょう。これが原因で変更が上書きされることがあります。

  • 一般的なベストプラクティスに従う – クラス名は分かりやすく一貫性を持たせ、各CSSルールの末尾にはセミコロンを付け、コードブロックは必ず中括弧（}）で正しく閉じましょう。

これらの一般的な問題を丁寧に確認することで、カスタムスタイルが正しくサイトに反映されるようになります。

例：Contact Form 7フォーム用の完全なカスタムCSS

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
}

.wpcf7 input[type="submit"] {
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 24px;
  font-size: 1.1em;
  cursor: pointer;
}

.wpcf7 input[type="submit"]:hover {
  background-color: #218838;
}

上記のCSSコードでスタイリングされたフォームの例です。このCSSコードは、Contact Form 7フォーム内の主要な要素の外観をカスタマイズします。すべてのテキストフィールド、メールフィールド、テキストエリアをターゲットにし、薄いグレーの枠線、丸みのある角、快適なパディング、一貫した幅を与えて、クリーンでモダンな見た目にします。

また、送信ボタンには緑色の背景、白い文字、丸みのあるエッジ、太字で読みやすいフォントを適用しています。ユーザーが送信ボタンにカーソルを合わせると、背景色が濃い緑色になり、インタラクティブなフィードバックを提供します。

CSSの追加：クラシックテーマとブロックテーマの違い

このガイドで紹介しているContact Form 7フォームのCSSスタイリング手順は、WordPressのクラシックテーマ向けです。Astraなどの人気クラシックテーマではカスタマイザーが利用でき、「追加CSS」セクションで簡単にカスタムCSSを追加できます。これにより、フォームのスタイルを簡単に調整し、変更をリアルタイムで確認できます。

一方、サイトがブロックテーマ（フルサイト編集やFSEテーマとも呼ばれる）を使用している場合、手順が異なります。ブロックテーマには、カスタマイザーや「追加CSS」フィールドがデフォルトで含まれていないことがあります。その代わり、サイトエディターを使ってデザインを変更します。色やタイポグラフィ、レイアウトのグローバルスタイルは調整できますが、任意のカスタムCSSをUIから追加できるとは限りません。

ブロックテーマを使っている場合の対処法

  • WordPressダッシュボードを開き、「外観 > エディター（サイトエディター）」に進みます。

  • サイトエディターで、スタイルパネル（半分塗りつぶされた円のアイコン）を探します。

  • 最近のブロックテーマでは、スタイルパネルに「追加CSS」オプションが用意されている場合もありますが、これはテーマやWordPressのバージョンによります。

  • カスタムCSSを追加するオプションが見当たらない場合は、WPCodeのようなプラグインを使ってサイト全体にカスタムCSSを追加できます。WPCode は初心者にも使いやすく、どのテーマでも動作するため、テーマのUIで直接CSS編集ができなくてもフォームのスタイルを調整できます。ただし、このプラグインをインストールすると、既存の他のフォームのスタイルにも影響する場合があるのでご注意ください。

追加リソース

Contact Form 7フォームのスタイリングは、シンプルながらも強力にサイトのユーザー体験を向上させる方法です。数行のCSSで、フォームをブランドの一部のように自然な見た目にできます。

有効なメールアドレスが必要です