Contact Form 7 Normalize Form CSS

Date Posted: October 8, 2014, 9:32 am


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;}

About author


Carl Victor Fontanos

A fine gentleman specializing in front-end and back-end development with extensive experience building high performance web applications that keeps users engaged and help businesses grow.

 
Hire Me