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

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

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

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

Contact Form 7 のフォームの [送信] ボタンを Cocoon のボタン ブロック風にカスタマイズします。

/* お問い合わせフォーム */

/* 送信ボタン */

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

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

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

/* お問い合わせフォーム */

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

.wpcf7 input[type='text']{
	outline: 2px solid #333333;
	border: transparent;
	border-radius: 10px;
	margin: 25px auto 0;
	transition: 0.5s;
}

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

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

/* お問い合わせフォーム */

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

.wpcf7 input[type='email']{
	outline: 2px solid #333333;
	border: transparent;
	border-radius: 10px;
	margin: 25px auto 0;
	transition: 0.5s;
}

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

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

/* お問い合わせフォーム */

/* テキスト エリア */

.wpcf7 textarea{
	outline: 2px solid #333333;
	border: transparent;
	border-radius: 10px;
	margin: 25px auto 0;
	transition: 0.5s;
}

.wpcf7 textarea:focus{
	background: #ffd900;
}

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

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

.wpcf7 input[type='checkbox']{
	appearance: none;
	width: 40px;
	height: 40px;
	border: 1px solid #333;
	border-radius: 10px;
	transition: 0.5s;
}

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

.wpcf7 input[type='checkbox']:checked:before {
	display: grid;
	place-content: center;
	height: 100%;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	font-size: 20px;
	content: '\f00c';
}
タイトルとURLをコピーしました