Editing Styles.css of Contact form7 plugin in wordpress

You should be able to override the form styles by adding to your theme's style.css within the editor.

You could change the background color of your contact form textarea by adding this to the bottom of your style.css:

.wpcf7-textarea { background: hotpink; }

I wouldn't recommend changing the plugin's files unless you plan on doing manual updates.

Hey Michael,

My basic intention is to add margin-right to the form and what to remove bottom scroll .which you can find in http://gopinathpara.info .you will find this form by clicking green "Contact us" button on that webiste. this form is basically a Bootstrap CSS styled form. but when i try to add .wpcf7 { margin-right:20px; }

it is not applying .!!! :( Any suggestion ?? Michael Gillihan

This is the only specific style I see being applied to the form element:

div.wpcf7 { margin-right: 60px; margin-top: 30px; padding: 0; }

You can try

div.wpcf7 { margin-right: 20px; }

in your theme's style.css.

Apart from that it's just a part of the learning process to narrow down and find your bugs. I am no CF7 guru, but I have styled it before using the above method. You have a lot of things going on there that affect that form.

I know CF7 has a fair amount of documentation as well. You might find more there about customizing your form.

Good Luck!

Thanks for your time Michael Gillihan . i already tried this methods. i already went through the docs but not detailed. hope i'll get solution there

You still working on this? If so, what are you trying to do that's giving you trouble?

I'm trying to add the following code to my theme

div.wpcf7 { margin-right: 60px; margin-top: 30px; padding: 0; } But it is not applying !! the code is basically to add margins to contact 7 form which you will find on http://gopinathpara.infoby clicking "Contact us" Green button

Sam Lucklore

I've never used that plugin, so I'm confused on what's going on with the page. The div I see with the class of "wpcf7" is currently set to display:none? Is that intentional in this case?

Not..it's not ...Can you please send me the css code that you can see for div.wpcf7 class ? Sam Lucklore

When I look at this it looks like the right margin is set from your style.css file. Is there another specific class you want?

Since the plugin css file loads after your style.css file you will have to make your rules more specific than theres.

So if their rule is like this

.wpcf7 input { ... } 

Then yours should be something like

.wrapper-class .wpcf7 input { ... } 

Sometimes folks add !important to the end of a rule to override it, but this isn't really the best approach.

Hai Zac,

First of all thanks for the response.But the plugin Styles.css is inactive !!!

and also i've one more question. in IE8 image of wordpress are not showing properly . there are red X marks on the pages.here is the screenshot

http://touchstore.specbee.com/wp-content/uploads/2013/05/Doc1.docx

Can you please let me know the commen reason for this and how to fix this?

And also did Metro style themes will work fine in IE8 or older version ?? because my website is not presenting properly in IE8 at 1024*768 display .i'm using Metro style theme .the site is

http://touchstore.specbee.com/

Zac Gordon

Both the plugin and your CSS are loading and active.

As for the styling issues, IE CSS troubleshooting is not really my forte. That should definitely go up as a separate forum post tagged with CSS :)

gopinath para I was just generally confused on why there were two "form" elements on the page, but I'm only familiar with the JetPack contact form plugin.

Here is what I see