Remove CF style and use theme-wide style

when you style the cf7 you can use !important declarations to overwrite the original cf7 classes, e.g.:

.wpcf7 input[type=”text”], .wpcf7 input[type=”email”], .wpcf7 input[type=”text”], .wpcf7 input[type=”text”], .wpcf7 input[type=”text”], .wpcf7 textarea {
background-color: #FFF !important;
color: #000 !important;
width: 280px !important;
margin: 0 0 0 0 !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}

Most times this !important is not necessary when you call the classes directly or when your theme supports custom css styles.

Edit: when your theme does not overwrite the cf7 classes automatically you have to do that the way i described.

So give it a try!

Best,
René

Hi,

It would be awesome if we did not have to override Contact Form 7 styling and let the theme do the styling. It would look more uniform throughout on any theme. Is there an update where we can toggle the default styling off so the theme can take control or a version of it unstyled?

Thanks,
Phelipe

Which theme are you using? This should be the normal behavior as cf7 comes per default without any predefined visual styles and uses the theme ones…when they are generally defined in the theme style.css.

But sometimes theme developer just miss to define [input] and [form] fields, so it looks odd.

Hi Rene,

I’m using the Blaszok theme, they have a search form and all of the checkout forms have styling except cf7.

Thanks,
Phelipe

Afaik the Blaszok theme is already using cf7 as default contact form:-)

So you dont need cf7 separately! I assume classes overwriting eachother when you use a second installation of cf7. Thats why you get into trouble with the styles. Go to the Blaszok theme demo contact page. If you look into the source you see probably that they are using cf7.

Best,
René

I see it now… thank you!