How to Style Contact Form 7 Plugin

Style Contact Form 7 Plugin

Contact Form 7 plugin is one of most famous plugin on WordPress. There are million of active user of this plugin. We are giving you some simple and amazing CSS hacks for designing & adding a wonderful Contact form on your site.
You can add following CSS in Custom CSS area of your WordPress theme or in a child theme.

First Style:

.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
background-color: #f2f2f2 !important;
border: none !important;
width: 100% !important;
font-size: 14px;
color: #999 !important;
padding: 15px !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wpcf7-submit {
color: #2EA3F2 !important;
margin: 8px auto 0;
cursor: pointer;
font-size: 18px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 6px 20px;
line-height: 1.6em;
background: transparent!important;
border: 2px solid!important ;
}

Result 1:

Second Style:

div.wpcf7{
background-color:#5692a4;
padding:30px;
max-width:500px;
margin:0 auto!important;
}
div.wpcf7 label{
text-align:left!important;
color:#fff;
}
.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
background-color: #f2f2f2 !important;
border: none !important;
width: 100% !important;
font-size: 14px;
color: #999 !important;
padding: 15px !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wpcf7-textarea{
height:120px
}
.wpcf7-submit {
float:left;
display:inline-block;
color: #eee !important;
margin: 8px auto 0!important;
cursor: pointer;
font-size: 18px;
-moz-border-radius: 50px!important;
-webkit-border-radius: 50px!important;
border-radius: 50px!important;
padding: 16px 40px!important;
line-height: 1.6em;
background: transparent!important;
border: 2px solid!important ;
}

Result 2:

Third Style:

div.wpcf7{
background-color:#fff;
padding:45px;
max-width:550px;
margin:0 auto!important;
-webkit-box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0,0.2);
}
div.wpcf7 label{
text-align:left!important;
color:#333;
}
.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
background-color: #ddd !important;
border: none !important;
width: 100% !important;
font-size: 14px;
color: #333 !important;
padding: 15px !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wpcf7-textarea{
height:120px
}
.wpcf7-submit {
float:left;
width:100%;
display:inline-block;
color: #eee !important;
margin: 8px auto 0!important;
cursor: pointer;
font-size: 16px;
-moz-border-radius: 5px!important;
-webkit-border-radius: 5px!important;
border-radius: 5px!important;
padding: 20px 40px!important;
line-height: 1.6em;
background: #ed9d25!important;
border: 2px solid!important ;
}

Result 3:

Fourth Style:

div.wpcf7{
background: -moz-linear-gradient(180deg,rgba(235, 122, 255, 0.729412) 0%, rgba(22, 48, 135, 0.941176) 100%);
background: -webkit-linear-gradient(180deg,rgba(235, 122, 255, 0.729412) 0%, rgba(22, 48, 135, 0.941176) 100%);
background: -o-linear-gradient(180deg,rgba(235, 122, 255, 0.729412) 0%, rgba(22, 48, 135, 0.941176) 100%);
background: -ms-linear-gradient(180deg,rgba(235, 122, 255, 0.729412) 0%, rgba(22, 48, 135, 0.941176) 100%);
background: linear-gradient(180deg,rgba(235, 122, 255, 0.729412) 0%, rgba(22, 48, 135, 0.941176) 100%);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 0px;
border-top-right-radius: 20px;
border-top-left-radius: 0px;
border-color: #eee;
padding:50px;
padding-bottom:10px!important;
max-width:550px;
margin:0 auto!important;
}
div.wpcf7 label{
text-align:left!important;
color:#f1e5f8;
}
.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
background-color: #f1e5f8 !important;
border: none !important;
width: 100% !important;
font-size: 14px;
color: #333 !important;
padding: 15px !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-bottom-left-radius: 5px!important;
border-bottom-right-radius: 0px!important;
border-top-right-radius: 5px!important;
border-top-left-radius: 0px!important;
}
.wpcf7-textarea{
height:120px
}
.wpcf7-submit {
float:left;
width:100%;
display:inline-block;
color: #eee !important;
margin: 8px auto 0!important;
cursor: pointer;
font-size: 16px;
padding: 20px 40px!important;
line-height: 1.6em;
background: #c489e6!important;
border: 2px solid!important ;
border-bottom-left-radius: 20px!important;
border-bottom-right-radius: 0px!important;
border-top-right-radius: 20px!important;
border-top-left-radius: 0px!important;
}

Result 4:

Hope this help you.
For any other query related to doc visit to our support form.