website design gold coast
website design gold coast

Contact Form 7 skin

cf7

Here is a bit of css to override the default styling of this flexible form plugin.

Contact Form 7 is a super flexible form generator that we use on nearly every site but the default styling is non existant. Here is some css to override the default styling.

Working Demo

Your Name (required)

Your Email (required)

Subject

Your Message


To style your form you need to add this css code to your main site CSS file and upload the images to your images folder inside your theme.



.wpcf7 input, .wpcf7 textarea {
  width: 90%;
  padding: 10px;
  color: #8e8e8e;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 20px;
  border: solid 1px #9f9f9f;
  box-shadow: inset 2px 2px 8px #bababa;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.wpcf7 .wpcf7-list-item {
  padding-left: 0;
  margin-left: 0;
  margin-right: 25px;
}

.wpcf7 .wpcf7-list-item input {
  border: none;
  padding-left: 0;
  margin-left: 0;
}

.wpcf7 select {
  outline: none;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
}

.wpcf7 input:hover, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea:hover, .wpcf7 textarea:focus, .wpcf7 textarea:active {
  background: #ebf7f5;
  outline: none;
}

.wpcf7 input.wpcf7-submit {
  -webkit-transition: 0;
  -moz-transition: 0;
  -o-transition: 0;
  transition: 0;
  border: none;
  position: relative;
  color: #fff;
  text-shadow: 1px -2px 0px black;
  text-transform: uppercase;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  font-size: 14px;
  padding-top: 11px;
  padding-bottom: 10px;
  padding-left: 35px;
  padding-right: 35px;
  /* Gradient background */
  background-color: #000000;
  background: -webkit-gradient(linear, left top, left bottom, from(#4d1b5c), to(#000000));
  background: -moz-linear-gradient(top, #4d1b5c, #000000);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d1b5c', endColorstr='#000000');
  -ms-filter: "
  progid: DXImageTransform.Microsoft.gradient(startColorstr=#4d1b5c, endColorstr=#000000)"
  ;
  /* Drop Shadow */
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* On hover */

.wpcf7 input.wpcf7-submit:hover {
  cursor: pointer;
  text-decoration: none;
  background-color: #000000;
  background: -webkit-gradient(linear, left top, left bottom, from(#4d1b5c), to(#6d2f80));
  background: -moz-linear-gradient(top, #4d1b5c, #6d2f80);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d1b5c', endColorstr='#6d2f80');
  -ms-filter: "
  progid: DXImageTransform.Microsoft.gradient(startColorstr=#4d1b5c, endColorstr=#6d2f80)"
  ;
}

/* On click */

.wpcf7 input.wpcf7-submit:active {
  top: 1px;
  color: #d8c6e2;
  background-color: #000000;
  background: -webkit-gradient(linear, left top, left bottom, from(#4d1b5c), to(#4d1b5c));
  background: -moz-linear-gradient(top, #4d1b5c, #4d1b5c);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d1b5c', endColorstr='#4d1b5c');
  -ms-filter: "
  progid: DXImageTransform.Microsoft.gradient(startColorstr=#4d1b5c, endColorstr=#4d1b5c)"
  ;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/* CF7 Messages */

.wpcf7 .wpcf7-validation-errors {
  border: none;
  background-color: #f4ae46;
  margin: 0;
  padding: 20px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.wpcf7 .wpcf7-mail-sent-ok {
  border: none;
  background-color: #7ad33f;
  margin: 0;
  padding: 20px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.wpcf7 .wpcf7-mail-sent-ng {
  border: none;
  background-color: #cf2d38;
  margin: 0;
  padding: 20px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: white;
}

.wpcf7 span.wpcf7-not-valid-tip {
  border: none;
  background-color: #cf2d38;
  padding: 10px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 10px;
  width: 180px;
  color: white;
  /* Drop shadow */
  -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}

.wpcf7-form .fleft {
  float: left;
}

.wpcf7-form .mright20 {
  margin-right: 20px;
}

.wpcf7-form .mright40 {
  margin-right: 40px;
}

.wpcf7-form .clear {
  clear: both;
}

 

How about autofocus? There isn’t an option for this as yet. But it can be done with a line of JQuery.


jQuery('.wpcf7-text:first').focus();

You may also want to change the loading gif. Seeing as it’s embedded in the code you can’t change it with CSS.

Add this to your functions.php and create your own colour coded loading gifs here ajaxload.info or preloaders.net


/* Custom ajax loader */
add_filter('wpcf7_ajax_loader', 'my_wpcf7_ajax_loader');
    function my_wpcf7_ajax_loader () {
    return get_bloginfo('stylesheet_directory') . '/images/ajax-loader.gif';
}

I also recommend saving your form submissions in your database with this plugin CFDB

Sharing is caring:

Created Jul 8, 2012 Made on the Gold Coast 120 Responses

120 Comments

  1. I used the above successfully until I went back to my theme builder and added a sidebar on the right. I updated the style.css to contain the override code for WP Contact Form. Activated the theme. Then the nice effect your code made went away. Since, I have gone back to the full sheet with no sidebar that shows your style. Have you noticed that problem?

    Also, do you know of a way to nudge the send button over so it centers properly?

    Thanks,

    Carol

    • Hi Carol!

      Looks like it’s working for you.

      I would suggest not centering it though. It looks better left aligned. If you look at the code there is hidden loading gif next to the button. That is why it’s not right in the center.

  2. This really transforms the contact form 7 default look – great job – have applied this to one of our client websites. Thanks :)

  3. Hi, there! Sooo close….!

    I have the line-height set to 200% for this site and the text on this page “Your Name”, etc) is inheriting that. How can I override it?

    If I try to add any html to the contact page (Your Name (required)) I get a big ol error: Warning: Cannot modify header information)

    I would be so grateful for any assistance!

  4. Carol Magalhães says:

    Thank you! Works like a charm ;)

  5. Hey dude!

    I’ve been looking all over the internet for someone to help me with this form.

    You can see the form on my website next to the navbar, it’s ugly and basic I know, can you help me spice this one up? The form is a “Call me” in Swedish.

    Bests! Please respond to my mail.

  6. Thank you, this is exactly what I needed.

  7. Thanks, this really spiced up my page!

  8. Drew Jensen says:

    I’m having trouble with the first two inputs being side by side. All inputs are stacked and I’m not sure why :/

    • Hi Drew. You would need to float the inputs left and right. Something like this in your form settings

      
      <p style="float:left; width:45%;">City<br />
          [text city 32/] </p>
      
      <p style="float:right; width:45%;">State<br />
          [text state 32/] </p>
      
      <div style="clear:both"></div>
      
      

      • Would you send me the contents of the field ‘Form” in the contact form 7 admin area? I would like to see exactly how you made the fields side by side.
        Your example above did not help me.

        thanks
        AE

  9. It’s a very nice CF7 makeover, thanks for this!
    But why didn’t you use css to style the form, as opposite to use images?

    I mean, there are tons of css button maker out there and you’d have a smoother finish and better loading times (arguable).

    Thanks anyway, there’s a good chance I might use this.

  10. Very clean form skin. Thank you! I’m trying to make a dropdown menu I have on my form match the style of this. Any tips on how to do it?

    • Thanks. I’ll look at adding a styled dropdown soon.

      • I spent some time on it today and got it working to match your theme. Here’s what I came up with:

        .wpcf7 select {
        padding:8px;
        width: 620px;
        color: #8e8e8e;
        font-family:Arial, Helvetica, sans-serif;
        font-size:16px;

        border: solid 1px #9f9f9f;

        box-shadow: inset 2px 2px 8px #bababa;

        }

        The width will change based on your needs, but this at least puts on the border, shadow, font families & colors to match. Hope this helps. Thanks again for such a great skin.

  11. Thanks for putting this in the public domain, saved us some work!

    Eoin
    Istech Web Design

  12. What about putting this in a side bar.. for some reason, I had to put the CSS in the text box in the widget.. but I want to bring the width of the inputs at /30 like the contact form does.. how would I do that?

  13. How can I set a background for complete form. I tried to edit CSS file of contact form-7 but wasnt able to make changes.

  14. Brilliant, however button is aligned to the right. Anyway I can move to the left? Please

  15. Worked great!
    Thanks!!!

  16. Hi nice clean looking CSS styling however I have an issue in that when using. ‘Really Simple CAPTCHA’ version #1.5 it does not display the captcha image, it displays the captcha answer area though.

    Any ideas, regards David

  17. thank you for this! the default styles are terrible

  18. It works very well !!!

    Thanks for sharing !!

  19. Thanks for the nice CF7 makeover.
    I really need to know how can I do to put fields side by side in 2 columns (just as you did with the fields “Your Name” and “Your Email”).
    Thanks anyway.

  20. What’s up, every time i used to check website posts here early in the dawn, because i enjoy to gain knowledge of more and more.

  21. This is a great looking skin and i’d love to use it, but i’m having some issues getting it working at all. Note: i’m very new to CSS and WordPress, so assume I know almost nothing.

    I pasted the CSS code above into my theme’s style.css file, but the contact form just looks like the stock Contact Form 7 style. Is there something else I need to do to get it looking like the one on this page?

    I was able to get this other contact form 7 style going — http://wpsitereview.net/add-custom-css-styles-to-contact-form-7/ so I’m assuming my theme shouldn’t conflict with this particular skin.

    Any help would be greatly appreciated.

  22. hello,
    I use WP 3.6.1 with the theme Avada 3.1.1 ThemeForest.
    Using the plugin “contact form 7” version 3.5.2, and I can not make the skin of your demo.
    Your CSS has been copied into the child theme style.css file.
    The form used is:

    Your Name (required)
    [text * your-name placeholder]

    Your Email (required)
    [email * your-email placeholder]

    Your Subject
    [text your-subject “Subject”]

    Your post
    [textarea your-post]

    [submit “Send Message”]

    The website address is: siaepac2.capversleweb.com/contact/
    Thank you for your help.

    • Hi Bernard. Looks like you are almost there. Can you remove width: 28%; from line 1431 #comment-input input,.wpcf7-form .wpcf7-text,.wpcf7-form .wpcf7-quiz,.wpcf7-form .wpcf7-number{

      And add white-space: nowrap; to line 653 .wpcf7 span.wpcf7-not-valid-tip

  23. Trying to use wp7 but format not working

  24. How to make the width of name+mail equal to subject/message?

  25. Hi,

    I like your styling. But how do you have two areas on the same line?

    And how can I adjust the radio or checkbox so the marker is to the left of the text and to make it a little more boxlike?

    Thanks!

  26. Hi Dean,

    Thanks for that. I will work on the float.

    Any ideas on the radio? I think I have seen checkboxes always before the text before, but on the CF7 form the checkboxes come at the end of the question, which makes sense for readability, but not for aesthetics.

    I would like the checkboxes in a line, at the start of the paragraph.

    Much appreciated.
    Andy

  27. Loaded the css, not sure I understand what images to upload?

    Thanks,

    Tim

  28. Hi, Thanks for the information but I am having problem in giving style to the drop down menu, the tag. the spam tag above it is attached to the top of the input and is not coming down in the center. Can you please help me regarding this matter.

    Thanks,
    Sonics

  29. Hi
    I am a newbie here. really very good job. but i dont understand where to add jQuery line?

    Thanks in advance
    Ali

  30. Hi!
    Thanks for the form, I really like it. Only thing is mine is not spacing like yours, it looks very crunched together. Can you help me?

    Thanks! Leah

  31. The code you gave me is for the subscribe form on my home page, which is not a contact 7 form. Your custom form is on my Let’s Chat page.

  32. I’m not sure what to do but thanks for your reply.

  33. Can someone please help me with my spacing, message box cutting off from left and only the message box width? I’ve tried the best to my coding knowledge. Hours of wasted time.

    Thanks!

  34. I figured out the alignment, thanks for you assistance. How do I give my message box a default width so it doesn’t have to be dragged to fit?

  35. I just figured it out, thanks Dean for teaching me coding. Still not sure how to space the boxes, top to bottom. Can you assist?

  36. Hi Dean, I mean the amount of space under each text box. Mine is so close together.

  37. Thanks Dean..you’re awesome!

  38. Hi. This is a great improvement to the non-styled CF7 layout. Apologies in advance for being new to all this.

    I added the css to my theme’s main css file but none of the styling – except for the submit button – is visible on my site form. Do I also need to make changes to the form itself in CF7? I’m also interested in having several fields display horizontally on desktop displays and having all the fields stacked on mobile displays. Does this css make that possible?

    Thanks!

    Here is my form html:

    First Name (required)
    [text* your-first-name class:text]

    Last Name (required)
    [text* your-last-name class:text]

    Email Address (required)
    [email* your-email class:text]

    Company (required)
    [text* MCTAG-MMERGE4 class:text]

    Business Type
    [select MCTAG-MMERGE10 class:select include_blank “Distributor” “Franchise” “Installer” “Interior Designer ” “Retailer” “Retail Fabricator” “Wholesale Fabricator” “Other”]

    Country
    [select MCTAG-MMERGE9 class:select include_blank data:countries]

    Message
    [textarea message class:text]

    [acceptance mc-subscribe default:on] I want to receive SI’s monthly Product News Email!

    [hidden MCTAG-MMERGE11 id:Lead_Source “Web”]

    [submit “Send” class:button]

  39. Hi there! Thanks so much for this! :) I managed to change the colors within the style sheet, but I’m not sure how to change the font. Can you help me? Thank you in advance.
    http://www.tiffanyloerablog.com/contact

    • Hi Tiffany

      Which fonts? You would need to use CSS to select fonts available in your theme or webfonts. Otherwise you may need to install these in your header.

      See font-family:Arial, Helvetica, sans-serif; in the first selector.

      • Hi! Thanks for your quick response :) I am actually wanting to use the
        font “Antrokas” for the individual fields (your name, your email, etc.).
        This is a font that I purchased and uploaded to my wordpress site using the
        plugin “Use any font.” I was able to assign this font to other sections
        of my site. Since the Contact Form is a plugin itself, I wasn’t sure how
        to apply. I am not very familiar with CSS and had to play around for a
        good while before I figured out the field to change the HTML color codes. Any insight would be much appreciated. :)

  40. Im not sure why this didnt have any affect on my site???

  41. Hi, i was wondering, is it by any chance possible to center the text within a text area, I styled my form in such a way that all the input boxes are centered, the problem which now arises is that despite the fields being centered the text the client types within the field is still right aligned. Any help would be greatly appreciated.

    • Hi Eric. Just add text-align: center; to the first selector.

      
      .wpcf7 input, 
      .wpcf7 textarea{
          text-align: center;
          ...
      

  42. Stephen says:

    Great work, Dean! Much appreciate all your help.
    My question is about the autofocus. It works, but loads the page to the start of form rather than top of page. Any way to correct this???

  43. Nice work and thank you for sharing with the rest of us!

  44. Great work on this contact form, I have followed your instructions and got the styling just like yours. I have one issue though, when I added the code to the Contact Form 7 settings to have the top 2 fields side by side rather than above and below each other I got a spacing issue. I have tried messing around with the css and the settings in CF7 but I cannot seem to fix it. If you view the url I added in the website column you will see the Name and Email fields have a large space in-between them, I can’t figure out if this is padding or margin. It needs fixing and I would really appreciate some help.

    Hope to hear from you soon :-)

  45. Hi Dean, I have been trying for quite a while now to change the size of the line which contains the name and email input fields on my form. The CF7 link that you previously sent me doesn’t show any examples of where to add this size command and I don’t know where to put it.

    Is there any chance you could give me and the other readers an example of where toput the size command, e.g.

    Your Name (required)
    [text* your-name size:50″]

    You can see I have entered the size command where I thought it went, but this has no effect on my form at the front end view. I can’t seem to be able to get all the fields aligned vertically with each other.

    • Actually you need to do it like this.

      
      [text* your-name 25/ ]
      

      25 is the width in characters. I’m not sure why this is not in the docs.

  46. Hi Dean,

    Thanks very much for replying again. That did make a difference however unfortunately when I added a size value the name input field totally disappeared so it was not visible on the screen. Once I removed the size value the input field came back. Lol, this has been so frustrating but it’s the only issue left to fix on the contact form.

    This is what I added which broke my contact form and removed the name input field:

    Your Name (required)
    [text* your-name placeholder “Name here…” 25/ ]

    I changed the size value to 10, and 50, and also 100 but each value made the name input field disappear from the contact form.

  47. Hi Dean,

    Great design, however I can’t get this to work.

    For some reason it wont float the first two next to each other and also the select box wont resize (also I would prefer not to have the drop down menu at all but can’t seem to fix that either)

    http://rsv.blogspace.com.au/facebook-enquiry-form/

    • Hi Brad. They are floating but it’s not going to work with that centred layout. Maybe make the whole form left aligned and float the first two left.

  48. Awesome,

    Thanks for that. And are you able to help me with the drop down menu.

    I just want it to be a normal select menu but css keeps overriding i think

  49. Dean,

    My contact form 7 is unresponsive…

    From what I understand… I can go to appearance and under there (7 items down) there is the css custom option…

    I’ve tried putting in custom css code so that my contact form doesn’t go all the way forever across on my samsung galaxy 5.

    And,

    I can also click on appearance —> customize —–> scroll down and there is another css styling option there…

    I’m assuming they do the same thing in both places – but sometimes I post a code in one area and it doesn’t work…. but I post the exact same code in ther other one – and it does… SMH I..

    Regardless, I can’t find a code that words in either spot that helps the contact form respond to my phone so it isn’t so long wide (to the right)…

    Any idea what I am doing wrong?

    Thanks

  50. Just stumbled onto this! After much frustration with (what I consider to be) a complex form I’m now feeling more confident in the look and feel after employing this CSS. Very cool! Thank you for sharing!

  51. Great job Dean, thanks for sharing!

    Can you please help me with one thing? I need to style an Upload file button, but I’m stuck, don’t know how to do it.

  52. Hi Dean,
    Great work, it has helped me alot. Only problem i have is that i am struggling to get the placeholders working. Is there css that i can use or do i edit this in the form editor?

  53. Amaury le Cour says:

    Hi,
    Great tuto, i would like do exactly like you, but the size of input fields is not like, may be,
    i have not setting the contact form like you in Contact-form-7.
    Please, could you tell me how to do for having the exact result on my wordpress page ?
    Best regards,

  54. all nice, but isn’t there a simple way to just use the css of the theme?

  55. Hi Dean,

    Thanks for posting this customisation, best one I’ve come across!

    I don’t mind admiting I’m drowning in css here, I’ve think I’ve followed along changing a few colours right up to the bit where I float the name & email address and things get very hazy from there.

    On the contact page the email address box is hanging over to the right 10px and the only way I seem to get it to align is to make the text area width 100%, I think that is a massive clue but it’s lost on me. I also removed the last bits of code with the float references as they didn’t seem to be referencing my inline floats?

    any assistance you can offer is appreciated,

    thanks,

    George

    • Hi George. It looks like you just need to float your email field left. Them maybe reduce the size of the input little.

  56. Rafael Magic says:

    Dean,

    Love the CSS for Contact Form 7. You saved me lots of work.

    Do you have code so the button will be Blue and the Button is a certain width.

    Its currently being used in a Responsive theme, so its 100%.

    Thanks

    Rafael

    • Hi Rafael. I’m glad you found it useful!

      In the selector .wpcf7 input.wpcf7-submit{ you can set the width:100px; for example.

      Changing the colour is tricky with the gradients. But you could remove the gradients under /* Gradient background */ and just keep the solid colour. background-color: blue; Do the same for the hover state.

      I hope that helps!

  57. this is great. one question, after submitting, the thank you message at the bottom is cut off by the bottom of one of my screens but not the other. is there a way to make it relative so it shows up on all screens?
    thanks

  58. hello,
    I use the themeTwenty Fifteen Pattern
    Using the plugin “contact form 7” version 3.5.2, and I can not make the skin of your demo too it’s too big.
    Your CSS has been copied into the child theme style.css file.
    The form used is:

    Your Name(*) [text* your-name]

    Your Email(*)[email* your-email]

    Company[text your-company]

    Subject[text your-subject]

    Your Message[textarea your-message]

    [submit “Send”]

    The website address is: http://www.flightlogistics.com/contact-us/ Thank you for your help.

  59. This is great- I am really wanting to make the form full width as yours is above and responsive, it is here: http://zimbabwe-holidays.com/about-us/
    I have tried adding the code above to my css and no luck?

    • Hi Sarah. You need to edit the css for your form. It’s currently floating fight.

      See in your style.css line 531 – Change it to:

      
      article .wpcf7 {
          /* float: right; */
          /* width: 280px; */
          margin-right: 32px !important;
          background-color: #454546;
          box-shadow: 3px 0px 10px rgba(165, 165, 165, 0.64), -3px 0px 10px rgba(165, 165, 165, 0.64);
          padding-top: 1em !important;
      }
      

  60. Is there a way to make the text for Checkbox or Radio fields clickable?

    It seems that the only way to enable/disable a Checkbox/Radio button is to actually click on the box/button. I’d like to make it more user friendly by also making the text associated with each box/button clickable.

    Is there a way to do this?

  61. What I’ve learned is that If “use_label_element” is Not Used with the checkbox or radio field then the text associated with the buttons is not clickable.

    So I’ve now included “use_label_element” and the text is now clickable. But the default for checkbox and radio fields is that this is not included.

    Now that I’ve got the text clickable, I’m looking for some css code to make the text for each button either a different color of font or preferable to have the background change when hovering over the text, or at a minimum when the text is clicked. Might you be able to recommend a way to do this?

    • Hi Dennis. Sorry for the very slow reply. Thanks for posting the fix. You should be able to set a hover colour as I have done the with inputs. Please post a link and I can try this for you.

      
      #checkbox_id input:hover {
        background: #ebf7f5;
      }
      

  62. Hi,

    This was great. I also added a border to my form. Left the alerts as is.

    One problem: the shadow on my send button stays in place when active/onclick. If I’m reading the css right, it’s supposed to disappear, making the button look depressed. Any ideas?

    Thanks.

    • Hi Stephen. Can you post a link? There should be an active style to give the depressed look on click.

      .wpcf7 input.wpcf7-submit:active {

Leave a Reply