How To Style Contact Form 7

https://www.youtube.com/watch?v=9RXge5MTGy8

Here is the CSS that was used to style the Contact form 7 in the video.


/* Contact Form 7
------------------------------------------------------------ */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="select"],
.wpcf7 textarea,
.wpcf7-select{
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 50%;
border-radius: 4px;
color: #555555;
display: inline-block;
font-size: 19px;
height: 45px;
line-height: 31px;
margin-bottom: 15.5px;
padding: 4px 6px;
vertical-align: middle;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="select"]:focus,
.wpcf7 textarea:focus,
.wpcf7-select:focus{
border-color: rgba(82, 168, 236, 0.8);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);
outline: 0px none;
}

.wpcf7-submit {
color: #fff;
padding: 9px 20px;
}

.wpcf7 p {
font-size: 19px;
line-height: 31px;
margin-bottom: 10px;
}

Leave a Reply

Your email address will not be published.