PR AFFINGERカスタマイズ AFFINGERプラグイン活用

Contact Form 7をおしゃれにカスタマイズするCSS集

WordPressでお問い合わせフォームを作るなら、定番プラグインの Contact Form 7 を使う人が多いと思います。

ただ、そのまま設置すると「なんだか味気ない…」という印象になりがち。。。

私自身も最初はデフォルトのまま使っていましたが、少しCSSを追加するだけで見た目が一気に変わることを実感しました。

この記事では、Contact Form 7をシンプルでおしゃれに見せるカスタマイズ方法 をまとめて紹介します。

AFFINGERを使っている方も、そうでない方もすぐに試せる内容になっていますので、ぜひ活用してください。

Contact Form 7をカスタマイズする前に

  • CSSを編集する方法は、子テーマの「style.css」か「カスタマイザー → 追加CSS」に貼り付ける。
    →「追加CSS」がおすすめ！
  • コードを追加した後は、必ずキャッシュを削除して反映を確認しましょう。
    →Ctrl＋F5

テーマによって多少見え方が違う場合があるので、必要に応じて調整してください。

入力フォーム全体のデザインを整える

まずは、フォーム全体に余白や枠線を付けて「まとまり感」を出していきます。

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 15px;
font-size: 14px;
}

これで、入力欄が四角い枠で揃い、見た目がスッキリします。

特にスマホでの見やすさがアップしますよ。

ボタンのデザインをおしゃれにする

フォームの印象を決めるのが「送信ボタン」です。

まずは基本のカスタマイズから。

.wpcf7 input[type="submit"] {
  background: #0073aa;
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.wpcf7 input[type="submit"]:hover {
  background: #005f8d;
}

青系のシンプルなボタンになります。

背景色（#0073aa）を自分のサイトカラーに変更すれば、世界観に合ったデザインになります。

フォーム全体をカード風にする

フォーム部分をカードのように囲むと、よりデザイン性がアップします。

.wpcf7 form {
  background: #f9f9f9;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

背景に薄いグレーを入れ、影をつけることで「カードっぽい」デザインに。

これだけで全体がまとまって見えます。

ラベルの文字を整える

フォームの「お名前」「メールアドレス」などのラベルも、ひと工夫すると読みやすくなります。

.wpcf7 label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

ラベルを太字＆見やすい色にすることで、ユーザーが迷わず入力できます。

AFFINGERを使っている場合のポイント

AFFINGERでは、テーマの「ボタンカラー設定」で送信ボタンの色を簡単に変えることもできます。

ただし細かいデザイン調整はできないので、今回紹介したCSSを組み合わせるとより自由にカスタマイズ可能です。

よくあるトラブルと解決方法（簡単に紹介）

  • 横幅が狭くなる
    → .wpcf7 input[type="text"] { width: 100%; } を指定
  • 文字が小さすぎる
    → font-size: 14px; で調整
  • デザインが崩れる
    → 他のテーマのCSSが上書きしている可能性あり。!important を追加して対応

これらの詳細な解決策は、別記事で掘り下げていく予定です。

ここでは「最低限これだけ押さえておけば安心」という部分に絞っています。

まとめ

  • Contact Form 7はCSSで簡単におしゃれにできる
  • 入力欄・ボタン・ラベルを整えるだけで見違える
  • AFFINGERの設定と組み合わせればさらに自由度アップ
  • 細かいトラブル対策は別記事で紹介予定

お問い合わせフォームは、サイトの「最後の接点」となる大事な場所です。

だからこそ、ちょっとしたデザインの工夫がユーザーの印象を大きく変えます。

ぜひ今回のCSSを取り入れて、自分のサイトに合ったデザインを作ってみてください！

-AFFINGERカスタマイズ, AFFINGERプラグイン活用
-

PAGE TOP