div.wpcf7 {
margin-left: 50px;
margin-right: 50px;
}
or
div.wpcf7 {
width: 400px;
}
Do you know where I can find and/or edit this code? Thank you so very much.
You could just simply add the following to your css file:
.wpcf7{
width: 300px !important /* or any suitable size */
}
Just post this in your style.css and it will overwrite the default css
div.wpcf7 {
margin-left: 50px !important;
margin-right: 50px !important;
}
or
div.wpcf7 {
width: 400px !important;
}
I appreciate your help but I don’t think I was able to make it work. This is the only code I found regarding contact form in my css. I tried reducing the width but it didn’t alter it. See below.
/*— contact form 7 —*/
.wpcf7 input[type=”text”], .wpcf7 input[type=”email”],
.wpcf7 input[type=”password”], .wpcf7 textarea { padding: 19px 15px; width: 100%;}
.wpcf7 span.wpcf7-form-control-wrap {display: block; padding-right: 30px; margin-top: 7px; }
Thanks again.
Just append any of the suggested code to what you have identified above.
ie. This
/*--- contact form 7 ---*/
.wpcf7 input[type="text"], .wpcf7 input[type="email"],
.wpcf7 input[type="password"], .wpcf7 textarea { padding: 19px 15px; width: 100%;}
.wpcf7 span.wpcf7-form-control-wrap {display: block; padding-right: 30px; margin-top: 7px; }
should become:
/*--- contact form 7 ---*/
.wpcf7 input[type="text"], .wpcf7 input[type="email"],
.wpcf7 input[type="password"], .wpcf7 textarea { padding: 19px 15px; width: 100%;}
.wpcf7 span.wpcf7-form-control-wrap {display: block; padding-right: 30px; margin-top: 7px; }
div.wpcf7 {
width: 400px !important;
}
Again, I appreciate your response but that didn’t seem to change the size at all.
Weird, because i test it with firebug on your site and it works.
Does your theme has an option for custom styles? Than put the mentioned code in there.
Otherwise you can write me admin[at]xsimulator.net and if you give me access to your wp-admin and tell me the desired width i do the changes for you.
Best,
René
I apologize! I got it to work, by just moving the code around a bit, might you know how to center the contact form in the middle of the page? I was able to center the text on the page below it but when I do the same thing with the form it stays left. The code I have is below. How can I center the form in the middle of the page?
<h3 style=”text-align: center;”>Contact Adam</h3>
<p style=”text-align: center;”>[contact-form-7 id=”1627″ title=”Contact form 1″]</p>
div.wpcf7 {
width: 400px !important;
margin: 0 auto;
}
This will center the form
Thank you SO much, I really appreciate your help!
