Change style of your WordPress Contact page

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"]

.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;
}

Add your comment

1. 
   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.

2. 
   Ten
   September 30, 2009
   10:06 pm

   

   How come the stylesheet for contact form says inactive? I can’t do any changes.

   Thanks.

3. 
   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

4. 
   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?

5. 
   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?

6. 
   Vladimir
   June 21, 2010
   5:45 pm

   

   Thank you very much, you helped me a lot

7. 
   james hua
   August 25, 2010
   12:28 pm

   

   oh my goodness, i just figured it out with your help! thanks so much.

8. 
   Aksam Sri Lanka
   December 2, 2010
   12:37 pm

   

   thanks for this. it help me a lot.

9. 
   Ivan Perez
   December 6, 2010
   10:18 pm

   

   Hello, can you make an example code using this
   [file your-file]?

   I wanted to change this “browse” button” to an image, then i tried but it didn’t work =/

   Thanks!
   – Short answer is NO. There is not easy way to do this. but long answer is YES! Here is the long answer: http://www.quirksmode.org/dom/inputfile.html

10. 
    Bonita
    January 13, 2011
    3:11 pm

    

    hi! ..do you have any advice when it comes to styling drop-down fields with Contact Form 7? My other fields look great, but the drop-down boxes are the old boring box look.. Please help!

    ———————————————-
    Hello Bonita,

    Regards to styling drop down menu or any other item of contact form 7

    1) each item have its own id but you can add your own id or class to that item.
    2) add needed style to id or style of that item

    to save time keep that style and item id for your future usage reference.

    For example you can add a drop down menu by using following code to a contact form:

    Drop down
    [select menu-761 id:my-Drop-down class:my-Drop-down-class "one" "two" "three"]

    http://screencast.com/t/18WFjN2KPwM

    Please note the id ( which is my-Drop-down) and class name ( which is my-Drop-down-class )
    Now try to add following style to your theme style.css

    #my-Drop-down {
    background-color: #aaa;
    border: 1px solid #A5A5A5;
    font-size: 18px;
    color: #fff;
    width: 150px;
    }
    #my-Drop-down option {
    background-color: #bbb;
    border-bottom: 1px solid #dadada;
    }

    http://screencast.com/t/uKY4W3qqRtH

    And result will be like
    http://screencast.com/t/bljBcnZa
    http://screencast.com/t/u2DDFSD9qMDb

    So secret is #my-Drop-down and #my-Drop-down option, you can add them as many other css style you like. such as changing background.

    I hope above helped.

    Have a great time rest of your day.
    Andy

11. 
    vikas gautam
    March 7, 2011
    9:26 am

    

    thanks for the info can you tell me how to display the radio button on vertically one after other in drop list

12. 
    Annamarie
    March 22, 2011
    11:34 pm

    

    IT may not have helped her, but it sure helped me. Thank you.

13. 
    MundoCaco
    July 25, 2011
    1:56 pm

    

    Thanks! last night a good code sabe my life!

14. 
    ravi
    July 27, 2011
    6:33 am

    

    This really helped me out…thank you for this one…i was looking for such help…

15. 
    Juliana
    August 2, 2011
    3:00 am

    

    THANKS SOOOO MUCH! YOU ARE AWESOME.. You saved me one extra day of work!!!!

16. 
    ottie
    August 11, 2011
    12:17 pm

    

    Okay, changing the css is one thing, but keeping it changed is another. If once you update the plugin, it overwrites the files and you’re back to square one. That’s why it’s advisable to make the changes in your theme/child Theme.
    The nextgen gallery css (for instance) can be changed by copying its css in your theme, alterations here will override the plugin css. I just tried the same solution, but it doesn’t seem to work for contact 7.
    Any ideas?

17. 
    Ralph
    February 4, 2012
    2:12 am

    

    Hi,
    I would like to know how to change the grey background color to a color of my choice.

    Could it be done on the form or through the style.css file.

    Thanks

18. 
    Claudio
    May 9, 2012
    3:10 pm

    

    It works, but i can’t figure out how to remove the rounded border in my textfields, I set border:0 none; but it don’t work, any idea?

19. 
    Mike
    June 11, 2012
    1:17 am

    

    How do you change the background color of the entire form?

20. 
    Chess Edwards
    June 16, 2012
    3:36 pm

    

    There isn’t a stylesheet.css file in my contact-form-7 folder.

RSS feed for comments on this post. TrackBack URL

Add your comment.