Contact page is one of the most part of your website. Thanks to Contact Form 7 Plugin for WordPress that give us exactly what we need.
While it work great, but it might be hard for WordPress newbie to figure out how to change style of Contact Form 7 plugin.
If you like my Contact page, then you are on luck! just copy past my setting and you will have same as my Contact page.
- First download Contact Form 7 plugin
- Copy it in your WordPress Plugins folder and and activate it
- look for Contact Form 7 setting in admin area. and copy past below code;
Name: (Required) [text* your-name 50/] Email: (Required) [email* your-email 50/] Website: [text your-website 40/ "http://"] Subject: [text your-subject 50/] What is the answer: [quiz quiz-whatis 12/ "2+2=?|4"] Message (Required) [textarea your-message 36x10 "Write message here."] [submit class:form7submit "Send"]
- next look for stylesheet.css in contact form plugin folder and add below CSS code to it:
.wpcf7-form p{
font-family:cursive;
font-size:small;
text-align:left;
}
.wpcf7-form p input, .wpcf7-form p textarea{
font-size:larger;
background-color:#ddddff;
color:#000055;
border-left-color:#4283B9;
border-top-color :#4283B9;
border-bottom-color:#bbbbff;
border-right-color:#bbbbff;
padding:2px;
}
.form7submit {
display: block;
width: 307px;
}
- Well done:) Enjoy new contact page style same as mine!
If you still have any difficulty, Please let me know, I am here to help you.
Update: read my newer post on Easy Contact form 7 Guide and Customization and most wanted tips
ken
September 29, 2009
6:57 am
You’re my hero. I’ve been working for a couple hours trying to figure out how to make changes to WP Contact 7.
Thanks,
Ken Y.
Ten
September 30, 2009
10:06 pm
How come the stylesheet for contact form says inactive? I can’t do any changes.
Thanks.
Andy
September 30, 2009
10:46 pm
Hello Ten,
I wonder how stylesheet.css for contact form can even say inactive! stylesheet.css is a simple text file. just edit it and upload it. If you still have difficulty with this send me a screen shots or more info to help you farther.
Thanks
Andy
cory
October 17, 2009
3:03 am
Ok, nice code. BUT what I want to do is to change the font color of the field headings. That is “Your Name (required)” and so on. It looks like the font color is pulled from the WP theme stylesheet. Any idea how to change this?
Ralf Langmaack
November 26, 2009
1:11 pm
How can I change the background-color only the fields markes as required? I tried
.wpcf7-validates-as-required {
background-color: #ccc;
}
but this has no effect. Any ideas?
Vladimir
June 21, 2010
5:45 pm
Thank you very much, you helped me a lot
james hua
August 25, 2010
12:28 pm
oh my goodness, i just figured it out with your help! thanks so much.