Contact Form 7のフォームをデザインする方法とコツ紹介【初心者向け】

WordPressのフォームプラグイン「Contact Form 7」は、簡単に自由度の高いお問い合わせフォームを作ることができます。

しかし、いくら使い勝手が良いフォームでもデザインをキチンとしておかないと宝の持ち腐れになってしまいます。

本記事ではContact Form 7のデザイン調整・クラス指定・CSS実装のポイントを初心者向けに分かりやすく解説します。

Contact Form 7共通クラス一覧

まずはContact Form 7をデザインするためのクラスを把握しておきましょう。

フォームが表示されているページをブラウザの開発者モードでHTMLを表示することでも確認可能です。

クラス	概要
wpcf7　wpcf7-form	フォーム全体
wpcf7-form-control	フォーム入力欄
wpcf7-submit	送信ボタン

※上記の表は2025年12月時点の情報を元に作成しています。

固有クラスの指定方法

フォーム内の特定の項目だけにCSSを適用したい場合は「固有クラス」が便利です。

Contact Form 7のフォーム設定画面はHTML形式なので、各フィールドのタグに「クラス属性」を追加すれば簡単に指定可能です。

「label」タグの他にも「span」タグなども使用可能なので、その辺りは好きに指定してください。

ただ、フォーム部分にCSSを直接記述するのは変更などをする際にややこしくなってしまうため、クラス指定のみにしておくことをオススメします。

お問い合わせフォームのサンプルデザインとコード

最後にお問い合わせフォームのサンプルデザインとコードを載せておきます。

コピーするなり、こちらを元に編集していくなり、自由に使ってください。

環境はCocoonテーマで、フォームの初期設定だと入力欄も「label」タグで囲んでありますが、使いづらいので項目名のみ囲むように変更しています。

・フォーム全体

.wpcf7 .wpcf7-form{
	display: grid;
	gap: 30px;/*項目間の共通マージン*/
}

.wpcf7 .wpcf7-form p{
	margin: 0;/*初期マージンの削除*/
}

.wpcf7 .wpcf7-form label{
	margin-left: 15px;/*項目名を左へずらす*/
}

.wpcf7 .wpcf7-form-control{
	margin-top: 5px;/*項目名とのマージン*/
	border: 2px solid #222;
	border-radius: 5px;
}

.wpcf7 .wpcf7-form-control::placeholder{
	color: #ddd;/*プレースホルダーの文字色*/
}

・送信ボタン

.wpcf7 .wpcf7-submit{
	background-color: red;
	color: #fff;
	border: none;
	font-size: 1.25em;/*20pxになるよう調整*/
	font-weight: bold;
}

.wpcf7 .wpcf7-submit:hover{
	background-color: #222;
	transition: 0.3s;
}

・必須や任意のあしらい

必須項目のみ目印をつけたい場合のCSS。

下記の場合はlabelタグを指定しているので全ての項目に付くので、一部に付けたい場合は固有クラスを指定してください。

.wpcf7 .wpcf7-form label:after{
	content: "*";/*必須項目*/
	margin-left: 5px;
	color: red;
}

まとめ

Contact Form 7のデザインは、CSSのみで十分可能なので、CSSの基本的な知識や固有クラスの指定方法を理解していれば難しくありません。

自分のサイトのデザインに合わせて少しずつカスタマイズし、見た目もこだわった理想のお問い合わせフォームを作ってみてください。