Style Contact Form 7 Form Like ElegantThemes Contact Form

If you are customer of ElegantThemes, you probably already know that it comes with a powerful contact form page template with built-in validation check. You can use this page template to create a contact form instantly.

Although the default ElegantThemes contact form page template comes with a lot of custom options, it lacks some features. For example, you have to manually edit the code to remove captcha from it. Its also difficult to add additional fields to it.

A good alternative to default ElegantThemes Contact Form is the contact form 7 WordPress plugin. This plugin is very flexible and it let you create almost any type of contact form easily, with as many fields you want.

The only problem with contact form 7 plugin is that it doesn’t look like the ElegantThemes Contact Form and thus, doesn’t blend in nicely with WordPress themes from ElegantThemes.

If you want to use contact form 7 plugin, and still don’t want to miss the nice look of default contact form ElegantThemes, then just paste the following code at the end of style.css file of your theme from ElegantThemes,

/* ET Form Like Styles For CF7 Form
by Mayur Somani from www.agentwp.com
*/

.wpcf7-form-control-wrap input[type="text"], .wpcf7-form-control-wrap textarea, .wpcf7-form-control-wrap select {
background: #F7F7F7 url(epanel/page_templates/images/contact_input.png) repeat-x !important;
border: 1px solid #CCC !important;
color: #111 !important;
padding: 8px !important;
border-radius: 8px !important;
-webkit-border-radius: 8px !important;
-moz-border-radius: 8px !important;
margin: 0px !important;
font-family: arial !important;
}

.wpcf7-form-control-wrap select {
background:#F7F7F7 !important;
}

.wpcf7-form-control-wrap input[type="text"] {
width:300px;
}

.wpcf7-form-control-wrap textarea {
width:400px;
}

.wpcf7-captchar, .wpcf7-quiz {
width:65px !important;
}

span.wpcf7-list-item {
display: block;
margin-left: 0 !important;
}

.wpcf7-submit, .wpcf7-reset {
border: 0px !important;
color: #4C4B4B !important;
float: right;
font-size: 12px;
text-shadow: 1px 1px 1px white;
text-transform: uppercase;
margin-right: 9px;
height: 35px;
}

.wpcf7-submit {
background: url(epanel/page_templates/images/contact_submit.png) no-repeat;
width: 73px;
margin-right: 6px;
}

.wpcf7-reset {
background: url(epanel/page_templates/images/contact_reset.png) no-repeat;
width: 61px;
}

Now clear your browser’s cache once. The contact form 7 form on your site should look just like ElegantThemes’ contact form now.

Note that there is no reset button option in contact form 7 plugin. To add it while creating the form, add this reset button code,

just before the submit button code,

[submit "Send"]

Thus, the final code at bottom should look like this,

<input type="reset" class="wpcf7-reset" />[submit "Send"]

If you see some bugs while using this code, with any WordPress theme from ElegantThemes, then post the details below and I’ll fix it.