How can I safely override contact form 7 styles?

Question

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?

Answer 1

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:

<div class="control-group">
    <label class="control-label" for="input01">First Name*</label>
    <div class="controls">
        [text* FirstName id:FirstName class:input-xlarge]
    </div>
</div>

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

Answer 2

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:

/* Settings for Contact Form 7 */
define('WPCF7_LOAD_CSS', false);

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:

.wpcf7-form { margin-top: 1em; }
.wpcf7-form fieldset p { margin: 0; }
.wpcf7-form label { display: block; float: left; clear: left; width: 150px; text-align: right; margin-right: 5px; margin-bottom: 1.5em; }
.wpcf7-form input[type="text"], .wpcf7-form textarea { display: block; float: left; width: 250px; margin-top: 0; }
.wpcf7-form textarea { width: 450px; }
.wpcf7-form fieldset.submit { margin-top: 1em; position: relative; }
.wpcf7-form input[type="submit"] { display: block; margin-left: 154px; width: 150px; }

.wpcf7-display-none { display: none; }
.wpcf7-response-output { margin: 0 155px; border: 1px solid #000; padding: 0.5em; top: -1em; position: relative; }
.wpcf7-mail-sent-ok { border-color: #398f14; }
.wpcf7-mail-sent-ng { border-color: #ff0000; }
.wpcf7-spam-blocked { border-color: #ffa500; }
.wpcf7-validation-errors { border-color: #f7e700; }
.wpcf7 img.ajax-loader { margin: 1em 0 0 155px; }

span.wpcf7-form-control-wrap { position: relative; float: left; }
span.wpcf7-not-valid-tip { position: absolute; top: 20%; left: 20%; z-index: 100; background: #fff; border: 1px solid #ff0000; font-size: 0.9em; padding: 0.2em; }
span.wpcf7-not-valid-tip-no-ajax { color: #f00; font-size: 10pt; display: block; }

The .wpcf7- bit is the important one, as styles can be scoped to just forms produced by this plugin.

Answer 3

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.