この記事では、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';
}