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を取り入れて、自分のサイトに合ったデザインを作ってみてください！
