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?

  • We need more information. A link to your site or something showing specifically what you're trying to override would help. – Otto Sep 22 '12 at 7:01
  • 1
    I changed some color styles in CF7 plugin's main stylesheet which works fine, but when CF7 is updated, I lose the changes made to the main stylesheet. Normally I would place these changes in my theme's main stylesheet, but CF7's stylesheet takes priority as it is loaded later in the cascade. @weston - Can I add the styles in my theme's style.css (instead of CF7's stylesheet) and change the order that the stylesheets are loaded so that my theme's stylesheet supersedes all other stylesheets in the cascade? – Jesse Sep 24 '12 at 2:24

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.

| improve this answer | |

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]

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

| improve this answer | |

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.

| improve this answer | |

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.

/* Import Parent Theme */
@import url('../parent-theme/style.css');

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.

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.