WordPressの定番お問い合わせフォームプラグイン「Contact Form 7」は、シンプルで使いやすい反面、初期デザインのままだとサイト全体の雰囲気に合わないことがあります。

そんなときは、CSSを追加することでフォームの見た目を自由に調整できます。入力欄の幅や余白、枠線、送信ボタン、エラーメッセージなどを整えるだけでも、フォーム全体の印象は大きく変わります。

Contact Form 7のCSSを追加する場所

Contact Form 7のデザインを変更するCSSは、主に以下の場所へ追加します。

• WordPress管理画面の「外観」→「カスタマイズ」→「追加CSS」
• 使用中テーマの style.css
• 子テーマのCSSファイル
• CSS追加用プラグイン

テーマを直接編集すると、テーマ更新時に変更内容が消える場合があります。そのため、基本的には「追加CSS」または子テーマに記述するのがおすすめです。

Contact Form 7の基本CSS

Contact Form 7では、フォーム全体に .wpcf7、フォーム本体に .wpcf7-form というクラスが付与されます。これらのクラスを使うことで、Contact Form 7のフォームだけにCSSを適用できます。

.wpcf7 {
  max-width: 640px;
  margin: 0 auto;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
  box-sizing: border-box;
}

.wpcf7 textarea {
  min-height: 160px;
}

.wpcf7 input[type="submit"] {
  display: inline-block;
  padding: 12px 32px;
  border: none;
  border-radius: 6px;
  background: #0073aa;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

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

入力欄を見やすく整える

お問い合わせフォームでは、入力欄の見やすさがとても重要です。余白が狭すぎたり、枠線が薄すぎたりすると、ユーザーが入力しづらく感じることがあります。

.wpcf7-not-valid-tip {
  color: #d63638;
  font-size: 14px;
  margin-top: -12px;
  margin-bottom: 16px;
}

.wpcf7 form .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 14px 16px;
  border-radius: 6px;
  font-size: 15px;
}

.wpcf7 form.invalid .wpcf7-response-output {
  border-color: #d63638;
  background: #fff5f5;
  color: #b32d2e;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: #00a32a;
  background: #f0fff4;
  color: #007017;
}

フォーカス時のデザインを設定しておくと、現在どの項目を入力しているのかが分かりやすくなります。

送信ボタンをカスタマイズする

送信ボタンはフォームの中でも目立つ要素です。サイトのメインカラーに合わせて調整すると、デザインに統一感が出ます。

.wpcf7 {
  max-width: 640px;
  margin: 0 auto;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
  box-sizing: border-box;
}

.wpcf7 textarea {
  min-height: 160px;
}

.wpcf7 input[type="submit"] {
  display: inline-block;
  padding: 12px 32px;
  border: none;
  border-radius: 6px;
  background: #0073aa;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

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

ボタンを横幅いっぱいにしたい場合は、max-width を削除して width: 100%; のみにするとよいです。

エラーメッセージ・送信完了メッセージのデザイン

Contact Form 7では、入力エラーや送信完了時にメッセージが表示されます。ここもCSSで整えておくと、ユーザーに状態が伝わりやすくなります。

.wpcf7-not-valid-tip {
  color: #d63638;
  font-size: 14px;
  margin-top: -12px;
  margin-bottom: 16px;
}

.wpcf7 form .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 14px 16px;
  border-radius: 6px;
  font-size: 15px;
}

.wpcf7 form.invalid .wpcf7-response-output {
  border-color: #d63638;
  background: #fff5f5;
  color: #b32d2e;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: #00a32a;
  background: #f0fff4;
  color: #007017;
}

HTML側のカスタマイズ例

Contact Form 7のフォーム編集画面では、フォームの項目やラベルを調整できます。以下は基本的な構成例です。

<label>お名前（必須）
  [text* your-name]
</label>

<label>メールアドレス（必須）
  [email* your-email]
</label>

<label>電話番号
  [tel your-tel]
</label>

<label>お問い合わせ内容
  [textarea your-message]
</label>

[submit "送信する"]

Contact Form 7では、通常のHTMLフォームを直接書くというより、[text] や [email] などのフォームタグを使って項目を作成します。

まとめ

Contact Form 7は、CSSを追加するだけでフォーム全体の印象を大きく変えられます。

入力欄の余白、枠線、フォーカス時の表示、送信ボタン、エラーメッセージなどを整えることで、見た目が良くなるだけでなく、ユーザーにとって入力しやすいフォームになります。

サイトのデザインに合わせてCSSを調整し、使いやすく信頼感のあるお問い合わせフォームに仕上げましょう。