Contact Form 7 のフォームを CSS でカスタマイズする

この記事では、WordPress の Contact Form 7 で作成したお問い合わせフォームを CSS のみでカスタマイズする方法を紹介します。

なお、WordPress で使用しているテーマは Cocoon であることを想定しています。

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

お問い合わせフォームの [メッセージを送る] ボタンに適用した CSS です。Cocoon のボタン ブロック風にカスタマイズしています。

/* 送信ボタン */

.wpcf7 input[type='submit'] {
	display: block;
	margin: 25px auto 0px auto;
	padding: 15px 45px;
	width: 300px;
	background-color: #fff;
	color: #333;
	font-size: 16px;
	font-weight: bold;
	font-weight: normal;
	border-width:: 1px;
	border-style: solid;
	border-color: #333333;
	border-radius: 99px;
	transition: 1s;
}

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

テキスト フィールドをカスタマイズする

お問い合わせフォームの [名前] フィールドと [件名] フィールドに適用した CSS です。フィールドの上にマウス ポインターを重ねたり、フィールドをクリックすると色が変わるようにカスタマイズしています。

/* テキスト フィールド */

.wpcf7 input[type='text'] {
	margin: 25px auto 0px auto;
	border-width: 1px;
	border-style: solid;
	border-color: #333333;
	border-radius: 10px;
	transition: 1s;
	resize: none;
}

.wpcf7 input[type='text']:hover {
	background-color: #ffd900;
}

.wpcf7 input[type='text']:focus {
	outline: none;
	background-color: #ffd900;
}

メール フィールドをカスタマイズする

お問い合わせフォームの [メール アドレス] フィールドに適用した CSS です。テキスト フィールドと同じ効果を加えています。

/* メール フィールド */

.wpcf7 input[type='email'] {
	margin: 25px auto 0;
	border-width: 1px;
	border-style: solid;
	border-color: #333333;
	border-radius: 10px;
	transition: 1s;
}

.wpcf7 input[type='email']:hover {
	background: #ffd900;
}

.wpcf7 input[type='email']:focus {
	outline: none;
	background: #ffd900;
}

テキスト エリアをカスタマイズする

お問い合わせフォームの [本文] フィールドに適用した CSS です。テキスト フィールドと同じ効果を加えています。また、フィールド右下の伸縮ボタンを消去しています。

/* テキスト エリア */

.wpcf7 textarea {
	margin: 25px auto 0;
	border-width: 1px;
	border-style: solid;
	border-color: #333333;
	border-radius: 10px;
	transition: 1s;
	resize: none;
}

.wpcf7 textarea:hover {
	background-color: #ffd900;
}

.wpcf7 textarea:focus {
	outline: none;
	background-color: #ffd900;
}

チェック ボタンをカスタマイズする

お問い合わせフォームの [プライバシー ポリシーに同意する] チェック ボタンに適用した CSS です。デフォルトよりもサイズを大きくしています。

/* チェックボックス */

.wpcf7 input[type='checkbox'] {
	position: relative;
	appearance: none;
	position: relative;
	vertical-align: -5px;
	width: 30px;
	height: 30px;
	border-width: 1px;
	border-style: solid;
	border-color: #333333;
	border-radius: 4px;
	transition: 1s;
}

.wpcf7 input[type='checkbox']:hover {
	background-color: #ffc107;
}

.wpcf7 input[type='checkbox']:checked {
	background-color: #ffc107;
}

.wpcf7 input[type='checkbox']:checked:before {
	position: absolute;
	display: grid;
	place-content: center;
	width: 100%;
	height: 100%;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	font-size: 15px;
	content: '\f00c';
}