WordPress How To Customize Contact Form 7 With CSS. In this video we are going to demonstrate how to customize Contact Form 7 with CSS
CSS code used today:
/* Titles */
label {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold !important;
font-size: 16px !important;
color: blue;
}
/* Text Boxes */
.wpcf7-text{
background-color: lightgray !important;
border: 1px solid blue !important;
box-shadow: rgb(119, 119, 119) 0px 5px 10px !important;
}
/* Dropdown */
.wpcf7-select {
color: blue;
background: lightgray;
padding: 10px;
border: 1px solid blue !important;
box-shadow: rgb(119, 119, 119) 0px 5px 10px !important;
}
/* Radio and Checkboxes */
.wpcf7-list-item {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold !important;
font-size: 16px !important;
color: blue;
}
/* File Upload */
.wpcf7-file {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold !important;
font-size: 16px !important;
color: blue;
}
/* Text Area */
.wpcf7-textarea {
background-color: lightgray !important;
border: 1px solid blue !important;
box-shadow: rgb(119, 119, 119) 0px 5px 10px !important;
}
/* Submit Button */
.wpcf7-submit {
color:white !important;
background:blue;
width:300px;
box-shadow: rgb(119, 119, 119) 0px 5px 10px !important;
transition: 1s !important;
text-decoration:none !important;
}
.wpcf7-submit:hover {
background:green !important;
box-shadow:none !important;
}
Free Tech Courses – Web Design, game development, javascript, wordpress, bootstrap:
Get our Build an awesome pro eCommerce store for free with WordPress course.
Get our complete WordPress local install and migration course here :
Get Our Full Bootstrap Website Building Course – Learn to build sites fast:
Subscribe to our Channel
More tips at :
Facebook:
Get us to build Your website:
source