Where do I place css styles to override the default styles of contact form 7 so that my changes do not get overwritten whenever I update this plugin?
Here are some ways to accomplish this.
If you are using a custom theme, you can edit that style.css and make the style changes that you want there.
If you are using a standard theme that you upgrade, you can make a child theme and then your stylesheet won't get overwritten.
You can create your own stylesheet and just link to it in the header.php in the theme you are using.
My site also uses contact form 7 with custom styles and bootstrap: http://splash.inting.org/wp/
Here are your options:
1) In building your form, enclose fields with other html elements (with relevant classes), like below:
You can also define IDs and Classes for your contact-form 7 elements like above.
2) Create a custom.css file and update your current theme's header.php, ensuring that the stylesheet is added last (right before closing the header). If it's added last, it is less likely that it will be overwritten by the theme or plugin styles.
3) Use !important on css class and id definitions so they don't get overwritten by other styles
What I've done is to just prevent the plugin's bundled stylesheet from loading. This is documented on http://contactform7.com/controlling-behavior-by-setting-constants/ and looks like this:
This snippet goes in the wp.config file.
Doing this results in a form without any special styling. This may seem like extra work but actually better suits integration into an existing theme, since the layout and appearance of the form can be fully controlled.
As an example, my styles for the contact form looks like this:
These is a common misconception that the Contact Form 7 (CF7) plugin controls the appearance of CF7 forms though the plugins CSS style sheets. In truth the Contact Form 7 plugin uses only very minimal CSS styling to allow CF7 forms to blend in with most websites.
The actual look of CF7 forms on your website will depend largely on the current WordPress theme used and the CSS styling that theme applies to standard HTML form elements. To change the appearance of your CF7 forms to suit your requirements, you will need to adjust the CSS used by your current theme for these HTML form elements.
Use a Child Theme to make changes to your CF7 forms CSS
The most common and preferred method to makes changes to CF7 form styling is to create a Child Theme. Make any necessary additions in the child themes style.css, rather than directly in the themes styles.css. That way you don’t loose your changes when you update the theme.
The style.css file of the child theme usually imports all styling from the parent theme by including the following CSS code at the top of the child theme’s style.css file.
Any CSS changes you need to alter the appearance of our CF7 forms are added below this. Due to the CSS loading heirachy, any CSS changes made here will generally overwrite styles previously set in the parent theme.