Plugins,WordPress  

Change style of your WordPress Contact page

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

Do you need farther help on this topic? Contact me
Do you need Professional coder? Hire me
Looking for different WordPress plugin? Try Wishlist member


Andy is one of core WordPress WishList Member Developer. He is in love with WordPress and fun of turning new ideas to WordPress plugin or theme.

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. BGR
    February 14, 2014
    11:22 pm

    Can I change background for multiple forms used on one site? Like Orange for one and Green for another used in the footer for example?


  17. Mahendra Patidar
    March 7, 2014
    6:36 am

    why we edit and change css file when custom skins for contact form 7 plugin is available free here

    http://wordpress.org/plugins/custom-skins-for-contact-form-7

RSS feed for comments on this post. TrackBack URL

Add your comment.





( DoFollow )

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Home | Themes | Plugins | Download | Forum | Freelance | Resume | Projects | Service | Contact | About
© Copyright 2009 - 2014 Hecode.com