Styling contact form 7

Contact form 7 is a wonderful plugin for wordpress and it doesn’t even need an introduction in the wordpress community. This plugin will allow you to create all kind of forms from simple contact form to a fully organized survey.

Many contact form 7 users always have the same question on how to customize the look of their form. So here is a guide on styling it.

Here is the form i am going to style.
All the form elements are wrapped with p tag. (the syntax highlighter somehow doesn’t show that 🙁 )

<h2>Here are some text to go with the form</h2>
<p>Your Name (required)[text* your-name] </p>
<p>Your Email (required)[email* your-email] </p>
<p>Subject [text your-subject] </p>
<p>Your Message[textarea your-message]</p>
<p>[submit class:buttons_form "Send"]</p>

Here is the CSS to add in your style-sheet.

.wpcf7-form{
    background: #000;
    width : 375;
    height: 460px;
    overflow: hidden;
    margin: 20px;
    border: 2px solid #fff;
}
.wpcf7-form h2{
    font-size : 20px;
    text-align: center;
}
.wpcf7-form input, .wpcf7-form textarea {
    border-color: #808080 #C0C0C0 #C0C0C0 #D4D4D4;
    border-style: solid;
    border-width: 1px;
    padding: 4px;
    line-height: 16px;
    font-size: 14px;
    width: 350px;
    float: none;
    margin: 0;
}
.wpcf7-form textarea {
    line-height: 16px;
    font-size: 14px;
    height: 100px;
}
.wpcf7-form p{
    font-size : 14px;
    margin-left: 20px;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 290px;
    padding: 0 0 10px;
    color: #fff;
}

The button uses the following css class.

.buttons_form {
     padding: 0px;
     height: 30px;
     width: 150px !important;
     border: none !important;
     cursor: pointer;
     color: #fff;
     -webkit-border-radius: .5em;
     -moz-border-radius: .5em;
     border-radius: .5em;
     color: #faddde;
     border: solid 1px #980c10;
     background: #d81b21;
     background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
     background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}

How it will look after the styling

If you have any questions regarding this let me know through the comments.

URL : http://wordpress.org/extend/plugins/contact-form-7/

67 Comments

  1. mouad says: - reply

    nice job men

  2. Sarah says: - reply

    Thank-you, thank-you, thank-you!

  3. Its like you read my mind! Great Post 😉

  4. Hi
    You dont touch on file uploads here and it is one thing I would like to style
    What is the code to style the file upload area and button?

  5. Susan Lee says: - reply

    Hi, I’m not new to tech work, but I am very new to WordPress and CSS. I find myself asking, “WHICH stylesheet?” There is, of course, the main css file for my theme–Politico–but there seem also to be at least 4 that come with Contact Form 7, though they all seem to be inactive. Do they actually do anything?

    I’m sooooo confused! And I definitely want to put color in the background of my forms.

    Also, can you tell me how to put more than one input field on a single line so the forms aren’t so long? There are forms like that all over the Internet, so it has to be possible in general. I just don’t know if it’s possible with CF7.

    Thanks for your help,
    Susan

    • bage says: - reply

      You have to add the styles in your main style.css which came with your theme. The four stylesheets came with the plugin are just for the default styles. You don’t need to touch them.

      Yes you can add form fields in columns, but you need to know bit of css for that. You can define two columns in css and then assign the fields in each column.

  6. troppochook says: - reply

    Thanks for that. Is it possible to style checkboxes (and radio buttons)? At the moment my checkboxes are tiny in Chrome and IE. I’d like to be able to alter their style anyway. Any ideas would be great!

  7. Andy says: - reply

    THanks for the tutorial, but I was wondering what if I wanted to style individual form fields, like I don’t want the form to make the page so long that user has to do so much scrolling, so I want to place form fields beside each other, also how do I get CF7 to send emails when user submits form and lastly does CF7 support something like CSV files to be exported as Excel CSV or plain text CSV so that we can collect the applicant’s information?

    Let me know 🙂

  8. philip says: - reply

    Hi, tnx man.
    but styling this classes are disregarded for no reason by firefox

  9. Linda Lou says: - reply

    Everything seems to work ok with the css & changing those values but I couldn’t figure out where to put the part below – the obvious was on the contact page right? but when I did it didn’t put any verbiage at the form as it states below here’s a sample page I made you’ll see:

    http://lindaloustarr.com/sample-contact

    Here are some text to go with the form
    Your Name (required)[text* your-name]
    Your Email (required)[email* your-email]
    Subject [text your-subject]
    Your Message[textarea your-message]
    [submit class:buttons_form “Send”]

    Thank you for your help 🙂

  10. Danny says: - reply

    Hi all im pulling my hair out trying to put the contact form over an image inserted on a page .. anyone got any ideas how to.

    Thanks

    • bage says: - reply

      I don’t think you will be able to do it unless, you wrap your form with a css class and assign that image as a background to that css class.

  11. Rick Sadler says: - reply

    Bage: Could job! QUESTION: I would like “confirmation” for the person filling out the contact form that “that their email…the contact form…was sent successfully.” Thanks for your help…Rick

  12. Rick Sadler says: - reply

    Bage: ALSO…I tried to add the “button” to the end of the Contact Form7, but NO changes. Rick

  13. tomas says: - reply

    I have simple question. How can I style file upload field and button?
    I can put these styles to all other fields, submit button… but somehow this doesn’t affect file field.

  14. bage,
    ty for the good tutorial. I think it has cleared up my confusion. but,
    How do you/is it possible different style for different forms.
    Example is one style for the “contact us page” and another style for a “download ebook” page?

    Cannot figure it out….
    thanks in advance

  15. Loncey says: - reply

    Hey,
    I’ve researched everything seems easy to style except that annoying browse button for the upload. Is there a way to style it at all, cause it’s really making the site look ugly.

    Thanks

  16. Mike says: - reply

    Hi Bage, GREAT tutorial!
    I copied the button code to my style.css but it didn’t change anything.

    Thoughts?

    Mike

    • bage says: - reply

      The whole form is wrapped with a css class. Have you noticed that?

      • Chelo says: - reply

        Hello bage.
        What that mean?? I’m a newbie so I don’t understand what are you meaning with “The whole form is wrapped with a css class”.

        I have the same problem, put the button code but nothing change.

        What do I have to look at? What do I have to add or remove?

        THYANKS in advance for any help buddy 🙂

      • Chelo says: - reply

        Hello bage.
        What that mean?? I’m a newbie so I don’t understand what are you meaning with “The whole form is wrapped with a css class”.

        I have the same problem, put the button code but nothing change.

        What do I have to look at? What do I have to add or remove?

        THANKS in advance for any help buddy 🙂

  17. bdhosting says: - reply

    nice tutorial dude, thankyou so much i am looking this tutorial, and now got it, 🙂

  18. Nancy says: - reply

    Hi,

    File upload field doesn’t show up. The input field is there but I don’t see any box and button? Same problem as Tomas…

    Need support…Thanks.

  19. Hello,

    this looks good. Is this also possible for the style of the field upload? I use contact form 7 in a widget. And the width is too big.

    thank you
    Wolfgang

  20. It is a great job! It helped me a lot. Thanks for giving such a nice and fruitful tutorial.

  21. Mel Gardner says: - reply

    Brilliant – thanks for you help

  22. Hi,

    Thank you for your post, it’s very helpful. I’m completely new to website design and CSS and I need some help. I copied your code to the style.css file but there are a few problems:
    1. The button isn’t red
    2. The black background is too wide
    3. When I’m trying to paste your code into a custom CSS box it doesn’t work, it works only when pasted to the style.css file, which I prefer not to change.
    How can I fix these issues?

    Thank you very much for your help

  23. Yes, this is my page:
    http://arigal-tours.co.il/

    The contact form is at the bottom.

  24. Igor Laszlo says: - reply

    Hello,

    thanks for the tuto… as others asked you already about file upload, i would like to style the file upload button, is there a possibility ?

    Thanks for your help in advance,
    Igor

  25. Thomas says: - reply

    Hi,
    Do you know how you could get number input field and submit button in same line?

    I’ve tried [tel* tel-48] [submit”Send”] – but it doesn’t work.

  26. fred says: - reply

    Seems I got some issues to get it work for the submit button so I had to use this instead :

    input.wpcf7-form-control.wpcf7-submit {
    padding:6px 6px 6px 6px;
    font-size: 90%;
    border: 1px solid #aaaaff;
    background-color:#eeeeff;
    width: 340px;
    border-radius:2px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    }

    Anyway,
    good post
    Cheers

  27. Guirone says: - reply

    Hi all,

    I’m very new with the CF7 and CSS and I’d like to customize the layout for CF7.I saw that you are very good with this and hope you can help me.My web is under construction so I can’t show the CF7 to you now.

    What I’m trying to do is to put the contact form in 3 lines where in the first line I put the name/surname/subject fields,in the second the body of message,in the third the send button.
    I tried with this css that works fine to put fields in column but I don’t know how to modify it in order to have rows.
    thank you very much.

    .wpcf7 input[type=”text”],
    .wpcf7 input[type=”email”],
    .wpcf7 textarea
    {
    background-color: #FFFFFF;
    color: #000;
    width: 95%;
    }

    #left {
    width: 35%;
    float: left;
    }

    #right {
    width: 35%;
    float: right;
    }

    .clearfix:after {
    content:”020″;
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    overflow:hidden;
    }

    .clearfix {
    display:block;
    }

    .wpcf7 input[type=”text”],
    .wpcf7 input[type=”email”],

    {
    background-color: #fff;
    color: #000;
    width: 30%;
    }

    • bage says: - reply

      With the little help of css you can do that.

      First wrap the whole form with an id, then create three columns and float them accordingly. For example :

      #form{
      width: 100%;
      }
      #form .left-col{
      width:40%; margin-right:2%;float:left;
      }
      #form .middle-col{
      width:40%; margin-right:2%;float:left;
      }
      #form .right-col{
      width:8%; float:left;
      }

      Now you can use these column classes in your form-editor to format the form. for example :

      <div id=”form” class=”clearfix”>
      <div class=”left-col”> Name, Surname, Subject fields </div>
      <div class=”middle-col”> Message field </div>
      <div class=”right-col”> Your submit button </div>
      </div>

      Hope that helps

  28. techknot says: - reply

    nice article really helps me

  29. Betty says: - reply

    Worked perfectly! Even though I am a total CSS noob (I just change some values without really knowing what I do, refresh my page and see what happens) I was able to customize the background and color of the font etc.

    I’d like to change the color of the send button, but wasn’t able to find how. Which value would I have to change?

    Thanks and great tutorial! Even I could do it 🙂

  30. At last! Thanks for this wonderful post.

  31. […] One is thanks to bagerathan Set up CF7 Form elelments, as […]

  32. Manuel says: - reply

    Hi Bagerathan. Thank you for taking the time to help other people. It’s my first time with form 7 and I’d like to shape our contact form the way you did, but I have a problem. I found the file contact-form-7/admin/css/styles.css files (the one that starts with #icon-wpcf7…) and I want to add your code, but I don’t know exactly what do I have to delete, or to substitute or if I can simply add your code to what I have right now. I’d really appreciate your help in clarifying that for me. Thank you so much. Manuel

    • bage says: - reply

      You are suppose to add the css in your theme stylesheet. If you edit the css file, which came with the plugin, you will loose the customization on each upgrade.

  33. Trish says: - reply

    Thank YOU! this works really well.

    My problem is that I need to have different widths for different contact forms in the same WordPress theme.

    Each NEW form has a different. How can I use the ID to change the width in the theme style sheet?

    Thank YOU in advance.

    • Trish says: - reply

      I got it!
      I used the following on my child-theme css
      }
      #form84 {
      width:50%;
      }

      and then put the contact form inside the following DIVD tags

      THANK YOU!!!!

  34. checkout this plugin that help to change layout without changing in css file

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

  35. Jayan says: - reply

    Fantastic stuff. Used your directions with no knowledge of CSS and it worked!! Thanks a ton. 🙂

  36. Peter says: - reply

    Good job! Here’s another way to style CF7 without coding 🙂 http://looks-awesome.com/portfolio/wordpress-plugins/nks-wordpress-contact-form/

  37. Nevine says: - reply

    Hello,
    I have a problem with the button – never change to the style I want.
    i even did the following but still doesn’t work:wpcf7-form input[type=”submit”]{
    color: #000;
    background: #a5a8aa;
    height: 48px;
    width: 40px;
    line-height: 48px;
    padding: 0px 22px;
    text-shadow: none;
    border-radius: 8px;
    border: 0px;
    border-bottom: 2px solid #838587;
    margin-bottom: 2px;

    }

    why??

  38. Will give the styling a try!

  39. Angela says: - reply

    On my contact page I installed contact form 7. It worked and suddenly it didn’t. Now in order to have it displayed, I need to put in front of the contact form 7 code. The problem is that html displays above the form. And if I don't put in , the display is just the code for contact form 7. Any thoughts on what I can do?

  40. jay says: - reply

    heyy! Seems to be a very good tutorial and i can see peoples responses are good, although i do not understand how to actually get it to work. i copied the code in my themes style sheet but absolutely nothing happened. i kno i’m doin something wrong, but i can’t figure out what. can someone please help?

  41. Leah says: - reply

    Hi!
    Can you check out my form (Let’s Chat) and let me know how to widen the boxes, why do much color space at the bottom and my button code isnt working.

    Thanks!

  42. Ian says: - reply

    Trying to figure out how to add your same CSS for a telephone number. I tried copying your CSS like this but will not work.

    .wpcf7-form tel{
    font-size : 14px;
    margin-left: 20px;
    margin-top: 30px;
    margin-bottom: 20px;
    width: 600px;
    max-width: 90%;
    padding: 0 0 10px;
    }

    Also my submit button on background is #000 vs. red. My preference is to have as #009999. Any chance you can help me with this also?

    Thanks for your help Ian..

    • bage says: - reply

      to style a telephone input you have to use like this.

      .wpcf7-form input[type=”tel”]{
      //your styles goes here.
      }

      for button color just use you desired color like this
      background: #009999

  43. Michael says: - reply

    How do you have a different background color for each form on your site if they all use .wpcf7?

    • bage says: - reply

      Wrap them with different CSS IDs and style them. Or you will be able to find each form have unique ID assigned to them. You can use those IDs to style each for differently, not just the background.

  44. […] Внешний вид выходной формы. Существуют готовые бесплатные настройки формы брать их тут (печально, но потерял ссылку, да и вид у них был не сильно цепляющий). Также это решается при помощи плагинов, например Contact Form 7 Style — правда не сильно успешно. Единственный, пока, достойный вариант — вручную. Чтобы процесс был немного полегче можно взять настройки тут — шаблон css. […]

  45. ed says: - reply

    This is great!

    One question:
    The confirmation message on the page (after clicking send) is not showing. Any idea why?

    Thanks

  46. Jerry says: - reply

    Hi there, wonderful post… thank you!
    One question:
    What CSS code would I need to add to my style.css so that the input fields (name, email, etc.) change background colors when I click on them?

    Thank you!

  47. Paolo says: - reply

    Hi great post. All is clear but I have a question,

    This is classic CF 7, I added a checkbox to the law on privacy and until you accept I can not send the message. I wish that the send button remain gray until I press authorize and then the button becomes blue. How can I do? thanks in advance. bye

    Name (request)
    [text* your-name]

    email (request)
    [email* your-email]

    Object
    [text your-subject]

    Il tuo messaggio
    [textarea your-message 5/5]

    [acceptance accept-this] Authorization EU Privacy policy art. 13 del D.lgs. n. 196/2003*

    [submit “Send”]

  48. Erin says: - reply

    Hello! What would the code be if you wanted the text inside the box to show red when they enter their info?

    Thanks!

Inline
Inline