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.
.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 ; }
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 ; }
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 ; }
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; }
Hope this help you.
For any other query related to doc visit to our support form.