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?
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:
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.