Contact Form 7 Normalize Form CSS

The CSS code bellow will give you a nice and simple appearance to your Contact 7 Forms

1
2
3
4
5
6
7
8

.wpcf7-form p {line-height: 30px;}
.wpcf7-form p input[type="text"], .wpcf7-form p input[type="email"], .wpcf7-form p textarea, .wpcf7-form p select{padding: 5px; border: 1px solid #DDDDDD;
/*Applying CSS3 gradient: */ background: -moz-linear-gradient(center top , #FFFFFF, #EEEEEE 1px, #FFFFFF 20px); background: -webkit-gradient(linear, left top, left 20, from(#FFFFFF), color-stop(5%, #EEEEEE) to(#FFFFFF)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FBFBFB', endColorstr='#FFFFFF');
/*Applying CSS 3radius: */ -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
/*Applying CSS3 box shadow: */ -moz-box-shadow: 0 0 2px #DDDDDD; -webkit-box-shadow: 0 0 2px #DDDDDD; box-shadow: 0 0 2px #DDDDDD; width: 70%;}
.wpcf7-form p select{width: 72%;}
.wpcf7-form p input[type="text"]:hover, .wpcf7-form p input[type="email"]:hover, .wpcf7-form p textarea:hover, .wpcf7-form p select:hover{border:1px solid #cccccc;}
.wpcf7-form p input[type="text"]:focus, .wpcf7-form p input[type="email"]:focus, .wpcf7-form p textarea:focus, .wpcf7-form p select:focus{box-shadow:0 0 2px #FFFE00;}

Do you need help with a project? or have a new project in mind that you need help with?

Contact Me