Style the Contact Form 7 WordPress Plugin

Contact Form 7 WordPress Plugin Styled

Contact Form 7 WordPress Plugin Styled

I’ve been working on a new freelance site with a fairly simple 4 color design. This site, like all sites that I design needs a contact form. I’ve been using the WordPress Plugin Contact Form 7 for a while now; It works well and accomplishes most of my needs. The site I’m working on has a simple clean design, the focus is on the content and not the design, so I wanted to create a contact form that complimented this simple design.

I love the new default theme (Duster) that the next version of WordPress might ship with. In particular I really like the expandable search and the comments form. The Duster comments form is where my inspiration for this contact form came from.

Installing Contact Form 7

Installing WordPress plugins couldn’t be easier. Always make sure you have a recent backup of your database before you install or update anything on your site. After you backup you site, here’s how to install Contact Form 7.

  1. Log-in to Your WordPress website.
  2. Under “Plugins” click on “Add New”.
  3. Under ”Search” enter “Contact Form 7” .
  4. After the page reloads Click on “Install Now” under Contact Form 7.
  5. Click “OK” when you get the “Are You Sure” alert.
  6. After the plugin downloads click “Activate Plugin”.
  7. You’ll now have a “Contact” tab in the menu on the left side of the screen.
  8. Click the “Contact” tab.
  9. We need to edit what’s in the “form” text area so we can add some nice clean style to it.
  10. Replace the code in the “form” textbox with the following code.
    <ul id="contact">
    <li><span class="text">Your Name</span><span class="required">(*)</span> [text* your-name]</li>
     
    <li><span class="text">Your Email</span><span class="required">(*)</span>[email* your-email] </li>
     
    <li><span class="text">Subject</span>[text your-subject] </li>
     
    <li id="message"><span class="text">Your Message</span>[textarea your-message] </li>
     
    <li id="submit">[submit "Send"]</li>
    </ul>
  11. Click “Save”!!!!

Style the Contact Form 7 Plugin

After you add the appropriate markup to the Contact Form 7 “form” textarea, the rest is a breeze. Here’s the code to get it looking good.

There are a few things you need to keep in mind.

  1. You may need to adjust the width of the input and textarea.
  2. Make sure you change the border color of the input, textarea, and .text to match your site.
  3. Change the focus state to match your site.
  4. Change the gradient of the submit input to match your site.
  5. I’d like to change the z-index of the input and textareas to act more like the Duster theme, but the Contact Form 7 plugin adds an unnecessary span around them that doesn’t allow this to happen without javascript. I didn’t see the use of javascript as a necessary step and like it this way just the same.

The CSS

#contact{
	list-style:none;
	margin:0;
}
#contact li{
	float: left;
    height: 60px;
	margin:0 0 20px;
    position: relative;
    width: 540px;
}
#contact li .text{
	background: #F0EFEF;
	padding:15px 10px 10px 0;
	position:absolute;
	z-index:100;
	min-width:85px;
	border-bottom-right-radius: 5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topleft:5px;
	-webkit-border-top-left-radius:5px;
	text-indent: 5px;
}
#contact li .required{
	position:absolute;
	right:10px;
	top:10px;
	z-index:100;
}
#contact li .wpcf7-form-control-wrap{
	position: absolute;
}
#contact li .wpcf7-form-control-wrap input, #contact li .wpcf7-form-control-wrap textarea{
	background:#fff;
	border:solid 5px #F0EFEF;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	padding:15px 10px 25px;
	width: 509px;
	text-indent:95px;
	z-index:100;
	margin:0;
}
#contact li .wpcf7-form-control-wrap input:focus, #contact li .wpcf7-form-control-wrap textarea:focus{
	background:#F0EFEF
}
#contact li .wpcf7-form-control-wrap textarea{
	line-height: 28px;
    padding: 10px;
	height:200px;
}
#contact li#message{
	min-height:220px;
}
#contact li#submit input{
	color:#fff;
	text-decoration:none;
	margin:10px 30px 0 0;
	background:#09b2f3;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#69d2f9', endColorstr='#09b2f3');
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#69d2f9), to(#09b2f3));
	background: -moz-linear-gradient(top, #69d2f9, #09b2f3);
	border:none;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-0-border-radius:3px;
	border-radius:3px;
	display:block;
	padding:10px 25px;
	text-align:center;
	text-shadow:0 1px 0 #09b2f3;
	text-transform:uppercase;
}
#contact li#submit input:hover{
	background:#69d2f9;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#09b2f3', endColorstr='#69d2f9');
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#09b2f3), to(#69d2f9));
	background: -moz-linear-gradient(top, #09b2f3, #69d2f9);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
	-o-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
	box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
	color:#06506c;
	text-shadow:0 1px 0 rgba(255,255,255,.25);
	text-transform:uppercase;
	cursor:pointer;
}
div.wpcf7-validation-errors {
    clear: left;
}

The Outcome

Contact Form 7 Styled

To get this working in I.E.7 you need to add this in your I.E. 7 specific style sheet.

#contact li .wpcf7-form-control-wrap input, #contact li .wpcf7-form-control-wrap textarea {
	position:absolute;
}

[normal box title=”Want to use CAPTCHA?” width=”100″]Contact Form 7 WordPress Plugin with CAPTCHA[/normal box][normal box title=”Contribute” width=”100″]If you use Contact Form 7 think about contributing a buck or two so it can keep growing. I don’t make any money from this link, but I use the plugin so it’s worth saying.[/normal box]

179 Comments

  1. Marius
    Posted May 11, 2011 at 11:10 am | Permalink

    Where i should put the css?
    i go to plugins/contact form 7 .style.css , I change the css and nothing happend.
    Please help.

    • Posted May 11, 2011 at 1:09 pm | Permalink

      You shouldn’t need to change the .css file in the plugin. You can add it to your themes styles sheet. Did you follow step #10 above?

  2. Posted May 28, 2011 at 12:17 pm | Permalink

    Hi,
    did you happen to come across the captcha? How do you integrate it?
    [captchac captcha-796]

    regards
    Roebrt

  3. Dario
    Posted June 8, 2011 at 4:15 pm | Permalink

    Hi there!

    Good stuff! It looks really good.

    But, in IE the text indent is not working for the text input (it does for textarea) so the text overlaps with the label of the field.

    Any ideas?

    Thanks!

    Dario

    • Posted June 8, 2011 at 5:04 pm | Permalink

      Hi Dario,
      Thanks, I’m glad you like it. Did you see the Update at the very bottom of the post? It should fix this in I.E.7 and maybe I.E.6(I no longer support I.E. 6). If you don’t have an I.E. 7 specific style sheet, you should be able to just add it into the style for #contact li .wpcf7-form-control-wrap input, #contact li .wpcf7-form-control-wrap textarea{}.
      Hope that helps, if not let me know and I’ll look at it again.

      • Posted June 24, 2013 at 4:55 am | Permalink

        Hi Eric,
        I love the form!
        In IE the text indent is not working for the text input (it does for textarea) so the text overlaps with the label of the field. I saw the previous posting, and tried both method.

        Added in the updated line, and the line below in my style sheet but doesnt seem to work.
        #contact li .wpcf7-form-control-wrap input, #contact li .wpcf7-form-control-wrap textarea{}.
        The website is talentdna.com.au/contact-us in case you want to see it.

        Really appreciate your help!

  4. David
    Posted June 11, 2011 at 7:59 pm | Permalink

    Great job,

    But just cant get the style to work the text holders – your email and (*) are pushed up out of the input box, your message box is perfect.

    • Posted June 11, 2011 at 11:27 pm | Permalink

      Hi David,

      I can’t seem to reproduce the problem with the contact form 7 plugin, do you have it live somewhere that I can take a look at it? Also, what version of IE are you having problems with and what operating system?

      I have this live on a site I’ve been working on, could you take a look at and see if you’re having the same problem on this site? http://www.desmoinesareaduplex.com/contact/
      If not, the problem might be coming from your theme. If it’s live, I’m pretty sure I can fix it, and I’d love to update my post with the problem.

      Also are you familiar with Firebug? If so they have a lite version you can install on any browser that helps out tremendously.

      Hope I can help, and thanks for reading,

      Eric

    • Posted June 11, 2011 at 11:34 pm | Permalink

      Also, did you see the “Update” at the bottom of the post? It should fix the I.E. problem.

  5. Posted June 29, 2011 at 3:33 am | Permalink

    Just wondering how I would add in a drop down menu, for something like

    ‘Title’ – MR
    MRS
    MISS

    cheers – great article

    • katie
      Posted July 9, 2011 at 1:44 pm | Permalink

      hi sure, when u make a form on the right hand side there is a generate tag drop menu, click on the arrow and choose drop menu. put each of your options on there on line. hope that helps

  6. Mariz_p
    Posted June 30, 2011 at 12:55 am | Permalink

    I can’t make it work in my site.. It’s still the same.. I just had tried putting it in my theme’s stylesheet.. and yet.. it didn’t work.. thanks

    • Posted July 1, 2011 at 11:00 am | Permalink

      Hi Mariz,
      Did you follow step #10 under the “Installing Contact Form 7” section?

  7. aiphes
    Posted July 4, 2011 at 9:18 am | Permalink

    hi

    good tuto, but how about select ? i’ve added this in the css(line 40) but the required symbol is out of the area …how can i fix that ?

    #contact li .wpcf7-form-control-wrap select{…}

    thanks

  8. Posted July 8, 2011 at 11:56 am | Permalink

    This site is a work in progress but I was wondering if your styling needed anything changed to accommodate chrome. When you place the cursor in the box it goes behind the text and then bounces to the correct position when typing. It could be my theme but it seems to render correctly in IE and Firefox.

    • Posted July 8, 2011 at 12:25 pm | Permalink

      That’s strange, I didn’t notice that when I set it up. This can be fixed by getting rid of the text indent and adding more padding to the left side of the input.
      Hope that helps.

  9. Posted July 12, 2011 at 5:46 pm | Permalink

    Hey Eric, great fix but I’m having the same problem as Dave did. I have some floating elements. My site is currently on the back-end so you can look at the form in it’s current state. I can leave it like that for a while hopefully you can help me out asap though…
    http://goodlookdesigns.com/newsite11/?page_id=13

    • Posted July 12, 2011 at 9:17 pm | Permalink

      Hi Johnnie,
      You can fix it by replacing the text-indent with padding. I haven’t tested this in IE so you’ll need to do that, but here’s the CSS you should replace.

      In you style.css line 956 replace what you have with the following. This should fix it.

      #contact li .wpcf7-form-control-wrap input, #contact li .wpcf7-form-control-wrap textarea {
      background: none repeat scroll 0 0 #FFFFFF;
      border: 5px solid #FBE55F;
      border-radius: 5px 5px 5px 5px;
      margin: 0;
      padding: 15px 10px 25px 95px;
      width: 414px;
      z-index: 100;
      }

      Hope this helps.

      • Posted July 13, 2011 at 12:16 am | Permalink

        Thanks for the prompt response. What I ended up doing was adjusting the top position on the .required tag as well as the .text tag which helps A LITTLE. Everything lined up as it should EXCEPT the #message element which for some reason I can’t get to line up correctly. As much as it hurts I had to leave it alone for now, not too noticeable but I’d like to find a fix for it.

        Also, if you went to the link i provided you probably notice the funky radio buttons and drop menu. Anyway to customize those? Thank again bro.

  10. Posted July 13, 2011 at 7:29 pm | Permalink

    Worked great!
    Thanks!!!

  11. Posted July 20, 2011 at 3:39 am | Permalink

    Is it possible to block a specific e-mail address in contact form 7?
    So it’s not ‘normal’ spam but someone annoying how’s sending mails over and over again.
    That would be useful!

    • Posted March 28, 2012 at 9:46 pm | Permalink

      I know this is an older post, but add this to your email template: [wpcf7.remote_ip]
      That will send over the ip address in the email. Then you can blacklist it with akismet or your .htaccess.

  12. Dhexter
    Posted August 8, 2011 at 4:33 am | Permalink

    Loved it man! Works Great!

    The best tutorial in styling contact form 7 plugin!

    Thanks!
    Good Luck!

  13. Posted August 23, 2011 at 8:12 am | Permalink

    Anyone can provide answer for @Paul’s question above?

    I need that answer also

    • Posted August 23, 2011 at 8:39 am | Permalink

      It looks like you can set up Spam Filtering with Akismet but I don’t see the ability to block certain email addresses. You may want to ask the developer of the plugin. http://contactform7.com/

  14. Posted September 17, 2011 at 6:33 am | Permalink

    Hi,

    i managed to install the plugin and CSS fine, however I have a small problem.

    The text-cursor (not sure if thats the right name, but the line what shows up when you click to start typing) doesnt show. Or maybe it does show, but is the same colour as the rest of the site.

    Does anyone know how to change this?

    Abs

    • Posted September 17, 2011 at 11:24 am | Permalink

      Hi Abs,
      Please see this comment, it should fix your problem.

      • Posted September 17, 2011 at 1:10 pm | Permalink

        Hi Eric, when you click on the link it gives a wordpress error message,

        thanks

        • Posted September 17, 2011 at 1:23 pm | Permalink

          Hi Eric,

          I managed to find the comment, all is working but the message field. Do you have any idea how I can get it working?

  15. Posted September 17, 2011 at 2:18 pm | Permalink

    Hey Eric,

    Lol I have another seperate, but related query..

    Do you have a tutorial on how to make a contact form like yours?

    I think its alot cleaner than this one…

    Cheers

    • Posted September 17, 2011 at 7:51 pm | Permalink

      I don’t have a tutorial, but here’s my CSS. You may want to update the gradients for IE and opera. I used the default code that CF7 uses.


      pan.wpcf7-form-control-wrap input, span.wpcf7-form-control-wrap textarea, .wpcf7-submit{
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e9e9e9');
      background: -webkit-gradient( linear, left top, left bottom, color-stop(.5, white), color-stop(1, rgba(233, 233, 233, .5)) );
      background: -moz-linear-gradient(
      center bottom,
      rgb(233,234,235) 0%,
      rgba(255,255,255,0) 85%
      );
      border: 1px solid #aeaeae;
      border-radius:7px;
      -moz-border-radius:7px;
      -webkit-border-radius:7px;
      box-shadow: 0 0 5px rgba(0,0,0,.2);
      -webkit-box-shadow: 0 0 5px rgba(0,0,0,.2);
      -moz-box-shadow: 0 0 5px rgba(0,0,0,.2);
      line-height:12px;
      margin: 0 0 0 5px;
      padding: 10px;
      width: 505px;
      }
      span.wpcf7-form-control-wrap input:focus, span.wpcf7-form-control-wrap textarea:focus{
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff');
      background-image: none;
      border: 1px solid #666666;
      box-shadow:none;
      -webkit-box-shadow:none;
      -moz-box-shadow:none;
      }
      .wpcf7-submit{
      background:#F1F2F3;
      box-shadow: -1px 1px 3px rgba(0,0,0,.25);
      -webkit-box-shadow: -1px 1px 3px rgba(0,0,0,.25);
      -moz-box-shadow: -1px 1px 3px rgba(0,0,0,.25);
      font-family:sans-serif;
      text-align: center;
      width: 150px;
      cursor:pointer;
      text-transform:uppercase;
      float:right;
      }
      .wpcf7-submit:hover{
      border:1px solid #888;
      }
      .wpcf7-not-valid-tip, div.wpcf7-validation-errors{
      border-radius:7px;
      -moz-border-radius:7px;
      -webkit-border-radius:7px;
      box-shadow: 0 0 3px rgba(0,0,0,.25);
      -webkit-box-shadow: 0 0 3px rgba(0,0,0,.25);
      -moz-box-shadow: 0 0 3px rgba(0,0,0,.25);
      padding:8px 5px 5px !important;
      }
      .wp_syntax {
      width: 530px !important;
      }

      • abs
        Posted September 17, 2011 at 10:46 pm | Permalink

        worked nicely.

        Thanks Alot!

  16. Jessica Patton
    Posted September 22, 2011 at 1:40 pm | Permalink

    Great job on the styling of this form. Thank you!

    I do have one question. Do you have a posting that includes the css for a drop down, check boxs and radio buttons?

    I have a form created and am having a difficult time getting them to layout and function when added.

    • Rob
      Posted October 20, 2011 at 3:48 pm | Permalink

      Nice work Eric. I am also interested on how to style the drop down, checkboxes and radio buttons accordingly.

      And where do I find the I.E.7 style sheet? I added the code in the stylesheet of my child theme, and it seems to work fine for I.E., but than things get messed up in Chrome.

      Any help would be welcome.

      • Posted October 20, 2011 at 9:07 pm | Permalink

        You need to create an I.E 7 specific style sheet. Here’s a post that will help.

        • Rob
          Posted October 21, 2011 at 3:42 pm | Permalink

          Thnx, the contact form is now looking ok in IE.
          I am also working on another form using a checkbox. That one still gets messed up. I am using the following code:

          [acceptance acceptance-299] I accept the terms.

          Any ideas?

          I guess you have no posts on styling drop down menu’s, checkboxes and radio buttons likewise? Any help would be welcome.

        • Rob
          Posted October 21, 2011 at 3:44 pm | Permalink

          The code should be:

          ” [acceptance acceptance-299] I accept the terms.”

  17. Aly22
    Posted September 23, 2011 at 4:58 pm | Permalink

    I’ve included a captcha on my form – but it seems to break styling and I lose the submit button. Would appreciate suggestion as to how to include and style the captcha element with this gorgeous template.

    Please enter the 4 digits below:
    [captchac captcha-769 size:m]
    [captchar captcha-769]

    • Aly22
      Posted September 23, 2011 at 5:36 pm | Permalink

      Sorry! I found it in your linked article (doh!) THANK YOU :)

  18. Milica
    Posted October 12, 2011 at 5:41 am | Permalink

    Great job on the styling of this form. Thank you!

    Can someone help me with this. I have page1 and page2. On page2 I was place contact form7.

    On page1 I have $telephone and I send it (via post, or get or url…) on page2. Now how on page2 in field [text text-telephone] to insert $telephone ??

    Pls help me!

  19. patrick
    Posted October 14, 2011 at 8:35 am | Permalink

    how do I get rid of the ugly green border of the youe message was sent succesfully, thanks. In fact the whole thing is in the wrong spot

  20. Posted October 20, 2011 at 6:32 pm | Permalink

    So exciting! I’m so close! But I’ve got some styling set up for lists and that styling is but used in the contact form.

    Can you give me a hint how to remove that styling in the li elements in this form?

    Thanks so much!

    • Posted October 20, 2011 at 8:40 pm | Permalink

      I think you have an extra < br > before your inputs. I’ve seen it happen if you leave an extra space. Hope that helps.

  21. Posted October 21, 2011 at 6:08 am | Permalink

    hi, thanks for your amazing work :-)

    how can i avoid this strange behavior? thanks :-)

    http://astoria.q-gin.it/contatti/

    • Posted October 21, 2011 at 8:25 am | Permalink

      In your style.css line 42 you have some style you need to get rid of if it doesn’t mess something else up.
      #contact {
      width: 350px;
      float: left;
      height: 25px;
      padding-left: 15px;
      }

  22. Posted October 21, 2011 at 7:52 am | Permalink

    Yeah you rock guy !

  23. Deano
    Posted October 23, 2011 at 1:17 am | Permalink

    Hey EJ,

    Nice tutorial.

    I really like the styling you have on your comment boxes, do you have a tut to show people how to do it?

    Thanks

    Deano

    • Posted October 28, 2011 at 9:38 pm | Permalink

      I don’t have a tutorial on it, but if you look up through the comments you can find the code for them.

  24. Posted October 27, 2011 at 10:03 am | Permalink

    Hey Eric,
    Great job with the style!

    I had to make some changes so it would fit right with my rtl site and the design.
    (The css had to go to the rtl-style.css)

    When i added the IE-7 css code, it was positioned well only in IE-7. IE-8, Chrome and others had not showed it well.

    When i removed the IE-7 code and made some position changes it was almost perfect.The only thing is that in chrome it wouldn’t move the text titles to the right and IE-7 has moved the fields all the way to the site border.

    http://www.oribenzvi.com/contact

    Please help me :)

  25. Posted November 8, 2011 at 4:12 pm | Permalink

    Thanks for this, it looks fantastic. I’m totally using it on my site.

  26. Posted November 10, 2011 at 12:53 pm | Permalink

    Great looking form, but I’m having a heck of a time getting a checkbox to format correctly. I can’t seem to get the text to be next to the checkbox. Any advice on this?

    http://www.bobknowsphones.com/customer-registration-form

  27. Posted November 28, 2011 at 3:23 pm | Permalink

    great post, Just what I was looking for
    thanks

  28. Posted November 30, 2011 at 11:32 am | Permalink

    Hi Eric, thanks for the great info! I wasn’t able to make my form look like yours though. I’ve copied the css and pasted in my style sheet ( I have a child theme for twenty eleven). Do you know what I’ve done wrong? Thanks
    if you want to see it the address is http://hylinelandscape.com/?page_id=10

    • Posted November 30, 2011 at 11:38 am | Permalink

      Oops. I got it. I pasted your code in the parent style sheet. Thanks!

  29. sheclimber
    Posted December 9, 2011 at 1:06 pm | Permalink

    thanks for a great post and ditto to the checkbox styling requests. it’s killing me trying to figure them out. the boxes themselves are taking up a span of about 500px (same as the text boxes) and I don’t know how to fix.

    • sheclimber
      Posted December 9, 2011 at 1:14 pm | Permalink

      just learned that if i add this:

      .wpcf7-form input, .wpcf7-form checkbox {
      width: 20px;
      }

      the check boxes look perfect, but the text boxes are then also 20px wide.

      • Posted December 9, 2011 at 4:28 pm | Permalink

        That’s because your styling both the input and the checkbox. Get ride of the .wpcf7-form input,.
        So it should be:
        .wpcf7-form checkbox {
        width: auto;
        }

  30. Posted December 9, 2011 at 5:38 pm | Permalink

    Thanks, Eric. Worked perfectly!

  31. Posted December 17, 2011 at 5:16 am | Permalink

    Hi Eric

    I am using responsive themes, is it possible to make this form responsive also? ie change size auto for different size screens?

    regards

    Mark

  32. Lathon
    Posted January 19, 2012 at 2:40 pm | Permalink

    I have a few questions.

    Where do I change the background colors for the input boxes? I would like to make them darker and stand out more.

    Is there a way to do side by side fields?

    Do you know my text “class” options? I would like a field for a zip code to only allow numbers.

  33. Posted January 23, 2012 at 10:43 am | Permalink

    Thanks for a great post! Was wondering if anyone has figured out the css for dropdowns and radio buttons?

  34. Marco
    Posted January 30, 2012 at 8:30 pm | Permalink

    Hi Eric, can this be integrated in with the quiz tag option in the form? The code it generates is [quiz quiz-250 “1+1=?|2”] with the 250 being the random number it produces and the 1+1=?|2 being the question and answer.

    I’ve tried .quiz as a class but no matter what I do I cannot get it to work. I need someone with more experience than myself to try and work this out. Any help would be appreciated.

    Thanks
    Marco

    • Posted February 2, 2012 at 8:26 pm | Permalink

      Hi Marco,
      I havn’t tested this in IE so you should do that before you use this, but you can give this a try.
      Wrap the quiz in a li with an id of quiz(id=”quiz”).

      Then add the following to your css.

      #contact li#quiz .wpcf7-form-control-wrap{
      float: left;
      height: 60px;
      margin:0 0 20px;
      position: relative;
      width: 540px;
      }
      .wpcf7-quiz-label{
      background: #F0EFEF;
      padding:15px 10px 10px 0;
      position:absolute;
      min-width:85px;
      border-bottom-right-radius: 5px;
      -moz-border-radius-bottomright:5px;
      -webkit-border-bottom-right-radius:5px;
      border-top-left-radius: 5px;
      -moz-border-radius-topleft:5px;
      -webkit-border-top-left-radius:5px;
      text-indent: 5px;
      }
      .wpcf7-quiz-label, .wpcf7-quiz{
      position:absolute;
      top:0;
      left:0;
      }
      .wpcf7-quiz-label{
      z-index:100;
      }
      #contact li#quiz .wpcf7-form-control-wrap input{
      z-index:1;
      }

  35. Xan Choly
    Posted February 14, 2012 at 4:09 pm | Permalink

    Hi, what a awesome customization, But the above posting does not seem current for wordpress 3.3.1

    eg: Step 8 there is no edit under Contact anymore – so I’m lost.

    Thanks for the update !

    • Posted February 15, 2012 at 9:11 am | Permalink

      Thanks for the heads up. Just click on the Contact tab, it takes you to the same spot.

  36. Jerry
    Posted February 17, 2012 at 3:37 pm | Permalink

    First I’d just like to say thank you, this tutorial is awesome! Secondly, I have two problems that I’m hoping that you may be able to help me remedy. The first problem is that I am not receiving emails when the form is submitted. The second problem is that the confirmation message that comes up for the users is partially hidden behind the Send button and the border is green — I’d like to fix this but do not know how.

    Your assistance on these problems would be GREATLY appreciated. Thank you.

    • Posted February 22, 2012 at 7:47 am | Permalink

      Hi Jerry, I’m not sure why you’re not receiving emails. I’d double check all the setting and if you can’t find the problem you may want to contact the plugin developer. To style the confirmation you need to use this:
      div.wpcf7-mail-sent-ok {
      border: 2px solid #000; }
      You may need to clear:left to fix the hiding problem and use !important(not the best thing to do) to override styles from the plugin style sheet.

      Hope that helps.

      • Posted August 10, 2012 at 8:29 pm | Permalink

        Hi Eric,

        The form looks fenomenal, I also had both of Jerry’s problems.

        The class you suggested solved the problem of the hidden message.

        But for some reason, the form don’t send emails when the styles are applied.

        I have two other forms on the site, and they are working fine. Hmmm.

        Please let me know if you come accross the solution.

        thanks a lot. sorry for bugging you,

        Rodrigo

        • Posted August 10, 2012 at 8:56 pm | Permalink

          Hi Ridrigo,
          The style shouldn’t have anything to do with the form sending. I’d double check the form number in the short code, or start again from scratch.

  37. DJ Barr
    Posted March 26, 2012 at 3:08 pm | Permalink

    I really like the styling of your comment form and would like to have a similar look for my comments and contact page. Any suggestions on how to tweak the above to achieve that?

    • Posted March 26, 2012 at 10:05 pm | Permalink

      Hi DJ,
      Feel free to look through my style sheet and grab the code you need.

  38. Brett
    Posted April 18, 2012 at 4:19 pm | Permalink

    Thanks for the nice work. Just one issue here on IE9 and Firefox. The description box doesn’t format the cursor correctly, and text starts behind the box label. Once you type enough characters it moves into the area, but so far I can only get it to work if I change the span class on the form itself from textarea to text.

    Anything?

  39. rob
    Posted May 2, 2012 at 9:19 pm | Permalink

    I get lost at part 8

    “Expand the “Contact” tab down if it isn’t already and click on “Edit”.
    We need to edit what’s in the “form” text area so we can add some nice clean style to it.
    Replace the code in the “form” textbox with the following code.”

    I don’t understand, I cant expand the contact tab… it’s just a button.

    There’s no “Edit”….

    • Posted May 2, 2012 at 9:25 pm | Permalink

      Thanks Rob, It’s been updated recently and I’ve been meaning to edit the post. You need to click on the “Contact” tab, it takes you to the same place.

  40. Posted May 7, 2012 at 12:35 am | Permalink

    Thanks for this.

    So how come your Contact Form is not styled?..No Reason?

    • Posted May 9, 2012 at 9:10 pm | Permalink

      Good question, when I redesigned my site I just didn’t get around to it. I will one of these days. Thanks for the reminder.

  41. Posted May 8, 2012 at 3:20 pm | Permalink

    Can we get a definitive answer on the cursor fix? The code you gave above was specific to his site and It does not help me. I need to know specifically which value I need to change.

    • Posted May 9, 2012 at 9:13 pm | Permalink

      Hi Patrick, It’s pretty much the same advice in any case. You need to get rid of the text-indent and add padding. Something like this:
      #contact li .wpcf7-form-control-wrap input, #contact li .wpcf7-form-control-wrap textarea {
      padding: 15px 10px 25px 95px;
      }

      • Posted May 10, 2012 at 12:12 pm | Permalink

        Well here is what is confusing is that there already is padding there. So it would be in there twice if I replaced the text indent

        background:#F0EFEF;
        border:solid 5px #F0EFEF;
        border-radius:0px;
        padding:15px 10px 25px;
        width: 509px;
        text-indent:95px;
        z-index:100;
        margin:0;

  42. Posted May 8, 2012 at 3:23 pm | Permalink

    Also my problem is not that the text starts in the wrong area but just that the cursor does not show up until after you start typing and if you backspace or even go to another box and come back it works fine, it just does not show up after clicking into the box.

    Thanks,

    Patrick

  43. Posted May 19, 2012 at 7:54 am | Permalink

    Awesome Tutorial!!! Thanks for keeping the comments updated.

    Also, I agree everyone should donate to the guys who created contact form 7. It is so helpful to so many people.

    I am happy that bloggers like you encourage users to contribute. If everyone contributed a couple of dollars to them, it would show gratitude for all of their hard work.

    Thanks for being a trendsetter in this area.

  44. Posted May 22, 2012 at 1:39 pm | Permalink

    Hello,
    I am not that versed in code and am trying to modify the text box for question 2-3 on my form so that it is just big enough for two numbers and can fit in front of my text. Please advise on how I can go about changing this and where/what exactly I need to do. Thanks in advance for your help.

  45. Posted May 24, 2012 at 9:14 am | Permalink

    For some reason I cannot find the way to make the labels show in the arious fields, like name, email message….etc….

    Any advice?

    Thanks in advance.

    James Savino

    • Posted December 5, 2012 at 11:52 am | Permalink

      When generating tag, fill out the box that says “Default Value” and check the box that says “Use this text as watermark”

      That help?

  46. Lorena
    Posted June 20, 2012 at 5:50 pm | Permalink

    Hi Eric, thank you very much for sharing this. I wonder if you know how to change the color of the submit button when we use the “disable” option in Contact Corm 7. I appreciate your help

  47. Posted June 23, 2012 at 7:43 pm | Permalink

    Hi,
    Thanks for your nice tutorial. I have a problem, in my theme has no ie style sheet. So how can I fix my ie problem? can you suggest me, please!

    Thanks again.

  48. Posted July 10, 2012 at 7:29 pm | Permalink

    Hi,

    I really love the styling that’s shown on the page, but I couldn’t seem to get it to work on my testing site (this is where the form is: http://alpha.ltfan.org/13/)

    I followed step 10, but then that just turned the form into a list…
    Would really appreciate if you could help!

  49. Posted July 11, 2012 at 10:17 am | Permalink

    I followed all the instructions but when I go to my contact page i am getting the following error

    [contact-form-7 404 "Not Found"]

    I am using a child theme – is that why its not working?
    any help would be great. Even if I can just change the style of the horrible SEND button and replace it with my own .png), I would be happy to leave the contact form as the original even.

    • Posted July 11, 2012 at 10:41 am | Permalink

      Adding style and html shouldn’t cause this problem. Where did you put the contact form? And no, it has nothing to do with child themes.

  50. Nick Koster
    Posted July 16, 2012 at 3:02 am | Permalink

    Looks great! However, when applying the code for the first time, the textarea overlapped the label and required fields. Because of this, those two elements weren’t visible. To fix this, simply change the z-index in #contact li .wpcf7-form-control-wrap input, #contact li .wpcf7-form-control-wrap textarea{ } from 100 to 99.

    Cheers!

    • Elaine Griffin
      Posted October 17, 2012 at 7:59 am | Permalink

      That just saved me! Thanks for the great tip!

  51. Maggie
    Posted July 20, 2012 at 5:09 pm | Permalink

    Hello, I’ve read through the comments, and have everything working except for the drop down styling. I only see the label, and the drop down doesn’t even display. Please help!

  52. Posted July 24, 2012 at 7:32 am | Permalink

    Hi Eric,
    This is a fantastic post. Love it when things are so clearly laid out.
    What modification would someone need to do to have this form not as a list, so if each field were to follow on from the last on the same line for example.

    • Posted July 27, 2012 at 11:56 pm | Permalink

      Not sure why you wouldn’t want to use a list, but you could probably replace each li with span tags that all have the same class. Hope that helps.

      • Posted August 26, 2012 at 8:31 pm | Permalink

        I was trying to write the contact form like a letter so that one field continued on from another etc. but it was FAR too difficult so I stayed with your listed version.
        Great form. Thanks Eric.

  53. Andres
    Posted July 31, 2012 at 9:48 am | Permalink

    Hi,

    your changed contact form looks and works great – thx. Is it possible to place the text container right besight the name container, that you only have name/email/subject at the left side and the text box at the right side?
    Thx for help.

    Andres

  54. Posted August 13, 2012 at 5:43 am | Permalink

    Thanks for this tip – has made my form look 100% better than it did before. I have the same question on the picklist / select / dropdown (call it what you like). All the styling works great on the standard text inputs but when I add my picklist, the styling breaks. Seems there’s lots of demands for a fix for this. Can you suggest what style we can add to cater for the SELECT ?

    Thanks again

  55. Larry Bradshaw
    Posted August 26, 2012 at 9:20 am | Permalink

    I see a lot of people asked for, but I never saw responses on styling a drop down menu to go along with this. Did anyone ever figure this out? If so, please post your answer for us. Thanks!

  56. Rebecca
    Posted September 14, 2012 at 12:53 pm | Permalink

    I just want to thank you for putting this up. I was trying to style my form, and while I was getting somewhere, it seemed really convoluted the way I was doing it. Then I came across this, and, I have to say, I feel a little sheepish for not having thought of this approach. Of course, in hindsight, enhancing the form’s markup seems like the obvious and easiest path.

    So thanks again for making my job a little easier!

  57. Jose
    Posted September 22, 2012 at 3:49 pm | Permalink

    Thank you for the CSS. I had one question, I’m trying to modify the width of the contact form to fit within the sidebar. Once I did this, these little bullets began to appear and I am unable to delete them. Your input is much appropriated. The site address is http://www.877ezbancarrota.com

    • Posted June 16, 2013 at 8:28 am | Permalink

      change: to
      #contact li{
      float: left;
      height: 50px;
      margin:0 0 20px;
      position: relative;
      width: 540px;
      list-style-type: none;
      }

  58. Kim
    Posted September 28, 2012 at 11:11 am | Permalink

    Hi

    This has been a great help, thanks! One question, I’ve been trying to remove the large box around the send button and not having any luck (I’m fairly new to CSS styling). Any suggestion on either how to fill in with my background color or make the border disappear?
    http://kimklyberg.com/digskills-603/contact/

  59. Posted October 28, 2012 at 1:16 pm | Permalink

    Great work thank you. I’m sure there is a basic css solution to this but a line of text that I was hoping to place under the Contact Form is floating around at the top. Any idea why this might be?

    • Posted October 28, 2012 at 7:50 pm | Permalink

      Hi Sam,
      It’s probably because the li’s are floated left and the ul is collapsing. Try adding the following to whatever you called the ul. If you followed the tutorial it’s #contact.

      #contact {
      width: 100%;
      overflow: hidden;
      }

  60. Posted November 9, 2012 at 2:15 pm | Permalink

    Having an issue with the “message sent” alert box. It appears in the background of the form once it is sent. This is true even when I redirect to another page.

    I have changed the CSS code for wpcf7 as follows:

    .approved-box, .wpcf7-mail-sent-ok {
    display:none;
    }

    While that deleted the contact and the .png file, it did not remove the green boarder. In fact the location of the box is odd as it is at the top of the form and behind the input fields. I cannot locate the code that creates the box so as to remove the boarder or change its color. Thanks.

  61. Posted November 23, 2012 at 6:03 pm | Permalink

    hi, i need a beautiful, eye-catching style for the comments on my forum,
    just the style, not any programming code, any suggestion??

  62. Posted November 28, 2012 at 8:38 am | Permalink

    Hi! great tutorial!
    I Have used on ad site of my friend (under construction).
    But i have some problem with the z-index of “select”.

    check this: http://lnx.seletron.com/contattaci/

    If you see the label: “Vorrei ricevere informazioni:” and “Informazioni specifiche su:” they have a select form with many choice BUT the select area is NOT visible because are under the label area. (check wit inspector mode of chrome, or firefox).

    Any suggestion to resolve this little problem?
    Thanks fot help!
    Andrea.

  63. Richard
    Posted November 28, 2012 at 12:04 pm | Permalink

    Thanks for this great post!
    I have a strange request: when i receive an email with a lot of text, the string with all the fields breaks line. The authomatic system that process emails replace the breakline with a symbol and that symbol prevents the recognition of certain values.
    How could i get a single line in email without breakline? Could i change the font size in the email generated from cf7?
    Sorry for my bad english, i hope you understand.
    Thank you

  64. Posted December 5, 2012 at 11:54 am | Permalink

    I am having trouble with adjusting the width on each line of the form.

    For example, would like the “Name” field to be 180px.. Is it possible to adjust this and if so, how?

  65. Damien
    Posted December 6, 2012 at 7:34 pm | Permalink

    Thank you for that code. Very much appreciated.

  66. Francis
    Posted December 16, 2012 at 9:21 am | Permalink

    Hi,

    Thanks for this. Looks great.
    I’ve got a couple of colour issues, though. I want to change the text colour for Name, Email etc to white from the current grey but can’t find where in the css to do this.
    I’d like to change the blue that comes up when you click on a box.
    And lastly, remove the bullet points at the side.

    Thanks again.

  67. Ashok Saini
    Posted December 26, 2012 at 3:59 am | Permalink

    Hello,
    This form was very easy to implement in our wordpress theme….thanks a lot for this……..

  68. George
    Posted January 10, 2013 at 1:02 am | Permalink

    Hello,

    it looks great but i am having an issue with the message box that after submission pops at the same size of teh form and not below the sent button as it should be.

    any ideas?

    thanks

    • Posted January 11, 2013 at 4:22 pm | Permalink

      Hi George,
      You need to add a clear:left to the message box.

  69. Jose Montero
    Posted January 10, 2013 at 6:41 am | Permalink

    Hello, Great form!
    I also would like to remove the blue that comes up when clicking on a box.
    Thank you!!

  70. Posted January 15, 2013 at 7:36 am | Permalink

    Hello, dear! I loved this plugin. But, I’m having trouble with it.
    I would like to put dropdown menu. Can you please, help me?
    Thank you so much.

  71. Posted January 22, 2013 at 12:58 pm | Permalink

    Awesome tutorial Eric :) The form really looks a lot better now. I was wondering one thing though.. What is the best practice to make the form responsive? I have tried changing widths to percentage but when I use 100% width it only covers the same width as the before the contact form was stylized.

    You can see what I mean if you check out the page: http://www.spetakkel.org/kontakt

    Is it the css from the plugin itself that might cause that?

    I appreciate any tips or help you can give :)

    • Posted January 23, 2013 at 4:12 pm | Permalink

      Hi Stig,
      I think the problem you’re having is the span wrapped around the input. Try this adding width 100% to the span and the input.

      span.wpcf7-form-control-wrap, #contact li .wpcf7-form-control-wrap input, #contact li .wpcf7-form-control-wrap textarea {
      width: 100%;
      }

      Hope that helps,
      Eric

      • Csilla
        Posted January 25, 2013 at 5:24 am | Permalink

        Hi Eric,

        I´m a beginner, can you please explain where exactly should I add the rule you mentioned above to make the CF7 responsive?
        “span.wpcf7-form-control-wrap, #contact li .wpcf7-form-control-wrap input, #contact li .wpcf7-form-control-wrap textarea {
        width: 100%;
        }”

        Many thanks in advance :)

        • Glenn
          Posted February 28, 2013 at 11:54 am | Permalink

          Hi

          I inserted this into the custom css area and it seems to work fine:

          .wpcf7-form-control {
          width: 95% !important;
          }

          .wpcf7-form-control.wpcf7-submit {
          font-size: 18px;
          font-size: 1.286rem;
          padding: 14px 0;
          padding: 1rem 0;
          }
          }

          Best regards

          Glenn

  72. Posted January 23, 2013 at 11:09 pm | Permalink

    Hi Eric

    First of all, thank you for your detailed tutorial. However, I am finding it impossible to style my form with your style guide. The issue is not with your style per se but happens when I add captcha code, a multiselect menu and a file upload box. When I add them, it totally changes the layout from the message body coloumn. The captcha goes into the message body and the dropdown disappears totally from the scene. Could you please add the code for a multi-select, file upload and captcha. I would really appreciate any help. Thank you

  73. Naveen chary
    Posted February 9, 2013 at 11:12 pm | Permalink

    thanks a lot for the help, its awesome to learn

  74. Posted February 12, 2013 at 5:54 pm | Permalink

    Hi, Eric,

    Thanks for sharing your expertise!

    I was able to make your gorgeous customization somewhat responsive by implementing the CSS Mario Noble gave at http://wordpress.org/support/topic/responsiveness, but I can’t iron out the oddities!

    I’ve used your CSS exactly as given here (deleting only the class “required”) and paired everything with the following:

    @media screen and (max-width: 599px) {
    .wpcf7-form-control {
    width: 99% !important
    }
    .wpcf7-form-control.wpcf7-submit {
    font-size: 18px;
    font-size: 1.286rem;
    padding: 14px 0;
    padding: 1rem 0
    }
    }

    Unfortunately, while that does “squeeze” things a bit, the proportions are messed up: the text fields are shorter than the textarea field, while the submit button suddenly becomes wider than everything else!

    Is there no way to make your form here responsive??

    • Posted February 12, 2013 at 8:59 pm | Permalink

      Hi Aminka,
      It looks like you forgot to close some of your CSS properties(forgot the ; on width and padding). That might be part of the problem. On the submit(the second selector you listed) you need to set a width. You could also set a max-width if you never want it to get bigger that a certain value, like 200px;

      Hope that helps, If not I’d need a link to an example of your form.

      Eric

  75. Posted February 19, 2013 at 1:48 am | Permalink

    Hi Eric,

    Thank you for this great theme. It fit well my client’s site.

    All the best,
    Deian Motov

  76. Viclisan
    Posted February 23, 2013 at 8:12 pm | Permalink

    Hi Eric, as I can change the boxes to be rounded?. Want to change the style.css and tells me that is inactive.
    Which file I have to change the style of the plugin or theme?
    Many Thanks!

    • Posted March 3, 2013 at 4:19 pm | Permalink

      Hi Viclisan,
      You would want to add the style to your themes css. The best way to do it is to create a child theme.

  77. Posted February 24, 2013 at 5:05 pm | Permalink

    Hi Eric, great tutorial.

    I’m trying to change the font colour of the validation error message that appears in the text boxes on input error. Where would that be?

    Thanks

    Rob

  78. Posted March 1, 2013 at 5:35 am | Permalink

    Hi. thanks for this help with styling CF7, very good as a CSS tutorial as well.
    Small problem I have, hope you can help.
    After submitting a contact message with Send the style goes all over the place. Any suggestions appreciated

    • Posted March 3, 2013 at 4:10 pm | Permalink

      You need to clear the alert messages. It’s been posted in a previous comment. If you can’t get it working let me know or send me a link to an example.
      Thanks,
      Eric

  79. Posted March 1, 2013 at 5:50 am | Permalink

    Sorry about this… another issue I have. Using IE8 the text entry boxes on the form are not visible, any ideas
    I’m trying to get IE8 Firefox and Chrome all working

    • Posted March 3, 2013 at 4:10 pm | Permalink

      IE 7 was having similar issues. Did you add the code at the very end of the tutorial?

  80. VitainC
    Posted March 3, 2013 at 2:36 pm | Permalink

    Hi
    I done all this CSS and form is looking great but i cant recive mails. Why. I get notification in green box “Your message was sent successfully. Thanks. ” but there is no any mail.

  81. Posted March 7, 2013 at 9:10 am | Permalink

    I cannot get this to work at all sorry, Added the form code in section 10, then added the styling code to the main theme via the editor. Am I missing something? any help would be much appreciated.

    Thanks

    • Posted March 7, 2013 at 12:52 pm | Permalink

      Is the plugin working at all? Do you have the correct form on the page in a list style format?

  82. Christian
    Posted March 14, 2013 at 11:46 am | Permalink

    Hi,

    one more try, i dont know why my last post was deleted :-(
    I use the styled formular at:
    readport.com/anfrage/

    If you can see, there are these 2 line behind the first field.
    How can i remove it?

    • Posted March 23, 2013 at 1:12 pm | Permalink

      Hi Christian, Those lines are coming from your theme CSS files. This class: .tri-col-span You’ll have to figure out what that class is used for and decide if you need the dotted borders.

  83. Alex Bradbury
    Posted March 23, 2013 at 1:10 pm | Permalink

    Hi Eric, thanks for your info on styling Contact Form 7!

    I have used the CAPTCHA on the contact form and I’m using the CSS from yours to style my form to fit in with my website. There is an annoying space that appears just below the CAPTCHA box that I can’t seem to remove using CSS though. I have used Firebug to find out what seems to control this space and it seems to be changing the margin on this:

    .entry-content p, .entry-summary p, .comment-content p, .mu_register p {
    line-height: 1.71429;
    margin: 0 0 1.71429rem;
    }

    But when I do this on my styles.css it makes no difference. Any ideas?

    Here is a link to my website: http://www.alexbradbury.co.uk/contact/

    • Posted March 23, 2013 at 2:54 pm | Permalink

      Hi Alex, try adding this to your style sheet:

      .entry-content p.captchac{
      margin:0;
      }

      • Alex Bradbury
        Posted March 23, 2013 at 5:32 pm | Permalink

        Thanks for your quick reply Eric!

        I tried that and still it doesn’t work. Strangely, when i look at the code using Firebug after adding this to the style sheet it doesn’t even show it in the website CSS…

        Any other ideas?

        • Posted March 25, 2013 at 8:27 pm | Permalink

          Not really, that should have worked, or at least shown up. What style sheet did you put it in?

          • Alex Bradbury
            Posted March 29, 2013 at 2:50 pm | Permalink

            I solved it!

            I moved the code up higher in the CSS and it worked. I’m fairly new to all this so assume there bust be some kind of hierarchy of code depending how near to the top it appears?

            Thanks for the code.

  84. Posted March 27, 2013 at 1:53 pm | Permalink

    Hi,
    I’m trying to make CF7 responsive all day, but unfortunately with no luck so far;/ It’s probably something with my theme;/ Could anyone would be so kind and take a quick look? Thanks in advance and sorry for my “exotic” english;)

    • Posted March 27, 2013 at 10:58 pm | Permalink

      Hi Jajecko,
      You need to get rid of the px widths and go with percents. Try this.
      contact.css line 6

      #contact li{
      float: left;
      height: 60px;
      margin:0 0 20px;
      position: relative;
      width: 90%;
      }

      Contact.css line 33

      #contact li .wpcf7-form-control-wrap {
      position: absolute;
      width: 100%;
      }

      Contact Line 36

      #contact li .wpcf7-form-control-wrap input, #contact li .wpcf7-form-control-wrap textarea {
      background: #fff;
      border: solid 5px #F0EFEF;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      padding: 15px 10px 25px;
      width: 100%;
      text-indent: 95px;
      z-index: 100;
      margin: 0;
      }

      Hope that helps,
      Eric

      • Posted March 28, 2013 at 2:50 am | Permalink

        It works perfect. You’ve made my day.
        btw. awesome work!
        Thanks a lot;)

  85. Posted April 10, 2013 at 3:07 am | Permalink

    Hi Hansel,
    Your form is a nice one and good work, and I already implemented it on my blog. Thanks to you :)

    But here is some difficulties I’ve found.
    I did follow your tutorial step by step as above tutorial, but it ended up with some mistakes.

    1) the (*) sign were outside the box for Your Name and Captcha field.
    2) some of field cannot input by text. The fields are: Your Name, Subject and Captcha.

    For better understanding, please take a look on my contact page here –> http://www.enjoytravels.net/contact-us

    I’m very sure I have follow your step above. Please help me to get through this.
    Thank you :)

    • Posted April 13, 2013 at 4:57 pm | Permalink

      Looks like the style isn’t up at all anymore. If you put it back up let me know and I’ll take a look at it.

      Eric

  86. ryanb
    Posted April 10, 2013 at 10:33 am | Permalink

    Great tutorial, but how do you change the blue glow that appears when you click to input text?

  87. James Bishop
    Posted April 12, 2013 at 11:57 am | Permalink

    Hi,

    Nice styling option for the dowdy contact form 7 plugin. Thanks.

    I notice there never seems to be an answer to the very common question here relating to the use of alternative fields, such as dropdowns, checkboxes etc etc and their effect on the form’s styling. Is this never going to happen do you think?

    Its a bit of a shame for me persionally, and quite a few others it would seem, as its a bit of a deal breaker for using the styling; and i would really like to make use of it. Its perfect for simple fields, but if you try to do anything outside of those simply fields, it all falls over.

    I’ve spent most of the day with it, and read pretty much everything above! Your efforts are much appreciated, even if i dont hear anything back personally.

    Thanks

    James

    • Posted April 13, 2013 at 5:16 pm | Permalink

      Hi James,
      I’m glad you like the post. This post was meant to be simple and add a bit of style to the default look of the contact form. I think in most cases people are using it out of the box with very little customization. Styling checkboxes and dropdowns requires the use of javascript. If you’re already loading jQuery onto your site there are a couple plugins that will make styling these elements pretty easy. Check out jQuery Uniform or jQuery Select Box and give one of them a try.

      If I find some time in the future I’ll try to add another post to deal with these.

      Thanks for reading,
      Eric

  88. Posted April 15, 2013 at 4:11 pm | Permalink

    Thank you for the tutorial!
    The form is looking great, except that I cannot type in the first two boxes – Name and Email.
    I’m testing in Chrome and Firefox.
    Things appear to be working, though not perfectly in IE and I’ve not yet set up IE style sheets.

  89. Posted April 24, 2013 at 3:54 pm | Permalink

    Hi Erik, first thanks for the tutorial. Very easy to implement and very nice looking.

    I have the same problem with the “thanks message” It’s under the fields. I tried to apply this:

    div.wpcf7-mail-sent-ok {
    border: 2px solid #000 !important; }

    But nothing happens. I have to put this in the same css style sheet as the other code or?

    Thanks in advance for all!!

  90. Posted May 7, 2013 at 11:03 am | Permalink

    Thanks! This saved me some time for sure.

    I am having issues with the
    div.wpcf7-mail-sent-ok {
    border: 2px solid #000 !important; }

    I was wondering if you or anybody else has a solution.

  91. SomaJ
    Posted May 13, 2013 at 11:59 am | Permalink

    Hey Eric, Sent you a previous email on the issue of making the form responsive (in your response to Jajecko. What I noticed is that the contact form is displaying the Thank you Ajax response on the far right side of the form instead below.

    • Posted May 22, 2013 at 9:31 pm | Permalink

      Most likely you just need to clear the responce.


      div.wpcf7-response-output{
      clear:left;
      }

  92. River Tees
    Posted May 16, 2013 at 5:01 am | Permalink

    Morning we are trying to customise contact form 7 for a side bar widget, can this be done? i want a certain size aswell how is this done?. sorry i am a newb!

    Thank you for sharing info like this it helps guys like me loads!

  93. Heather
    Posted May 17, 2013 at 3:03 pm | Permalink

    Hi Erik!

    Great tutorial!

    How can I change the css of the validation errors? For example, I want to change the border colours / text / placement of the message confirmation once a message has been submitted. I’ve tried to copy and paste the css using firebug but it won’t implement into my site.

    Any ideas?

    Thanks again!

  94. Merom Harpaz
    Posted June 11, 2013 at 9:43 am | Permalink

    Hi Eric,

    I am trying to add colored background and a border to the contact form (using cf7).
    can you please advise?

    thanks
    Merom

  95. Pablo
    Posted June 20, 2013 at 12:17 pm | Permalink

    Hi Eric! First of all… thanks for this tuto. It’s amazing. Im developing a new website and I added Contact Form 7 with your style, and looks perfect now. The only problem I have is with some mobile devices, because the textareas are much bigger than the screen and do not fix! Any advice, please? Thanks a lot, and congrats again!

  96. Posted June 24, 2013 at 5:42 am | Permalink

    Hi Eric,

    Regarding my problem with IE10, when I added in “position: absolute” as suggested the whole label disappears.

    : (

    Azlan

  97. The Eclipse Project
    Posted June 24, 2013 at 2:27 pm | Permalink

    Thanks Eric! This is exactly what I was looking for. I wanted a nicer looking contact form that I didn’t have to spend a lot of time on customizing. This was the perfect solution, was really easy / clear to do, and cost me nothing…considering my projects bring in zero dollars per year :) Thank you for your efforts.

  98. Mariaweb
    Posted July 4, 2013 at 5:22 am | Permalink

    hi, loved this tutorial , been looking for something like this for awhile.
    but there is one thing i cant figure out… why cant i get rid of the dots in front. i know the appear because the list (li) so i put in the css, list-style:none; (in my custom contact) the id is right because the everything works but … but it didn’t work :,(

    but awesome tut Eric , simple to understand. :)

    • Mariaweb
      Posted July 4, 2013 at 10:40 am | Permalink

      sorry i figured it out :P
      what i did
      something
      …when it should have been like
      something

  99. Posted July 10, 2013 at 7:22 pm | Permalink

    Thank you so much for this. It worked only problem I had was the float in CSS, I had to take out and just left the left; there. With the float; left; it made them look like they were in a table. So the left; instead fixed it.

  100. Posted August 23, 2013 at 8:54 pm | Permalink

    Love the custom css, great work. I am have a couple issues though.

    1. I cannot make the contact page fit my mobile device. (my biggest issue)

    2. Is it possible to have “ghost text” already in the message box, and have it clear when the user clicks the box to type into?

  101. Posted September 16, 2013 at 3:24 pm | Permalink

    Hi, thanks for the nice form style.

    I can’t seem to remove the list style from the form I am seeing bullet points next to my input fields.

    http://www.boutiquehotellondon.com/contact/

    I have this css in place at the moment:

    #contact{
    list-style:none;
    margin:0px;
    }
    #contact li{
    float: left;
    height: 40px;
    margin:0 0 25px;
    position: relative;
    width: 100%;
    list-style-type: none;
    }

    Thanks

    Mark

  102. Posted October 6, 2013 at 11:44 am | Permalink

    Thank you for documenting the styling of Contact Form 7 so clearly. I have spent 4 days trying different things suggested by many other blogs but none gave me the understanding to control the results until I found this one. I only wanted to color the submit button green, so I did not copy the whole thing. My form is in a sidebar widget so I did wanted my labels to remain above the text boxes. My only trouble now is that I detect a slight light blue glow; and can’t see where it is coming from. But again, thank you so much.
    Eric

  103. Posted October 7, 2013 at 8:14 am | Permalink

    It certainly spruces the form up a ton. It is so boring out of the box (works well though).

  104. Jeremy
    Posted November 1, 2013 at 2:03 pm | Permalink

    Love the designed form! Thanks for sharing. not sure if this is addressed in all of the comments (too many to read through), but I had an issues with the notification box upon successful sent message. It needs a clearfix attribute as the notification box was not showing up under the sent button. I simply added (which my style.css already had an attribute for) and it solved my problem.

    • Jeremy
      Posted November 1, 2013 at 2:05 pm | Permalink

      Sorry, the contact form didn’t like me putting a code in there.. I simply added a (open div) = “clear” (close div)

  105. Giovanni
    Posted January 5, 2014 at 12:18 pm | Permalink

    Hi

    I modified the plugin as you indicated and it works great. I just have a problem with sending the confirmation message that appears at the top of the page, not too visible. What changes you can make to change the position of the message?

  106. J Browning
    Posted January 16, 2014 at 8:16 pm | Permalink

    I know this is old but I just found it. It worked great on my site and looks great. However, when I hit send during testing it throws the successfully sent box behind the forms. Like in this screen shot http://i.imgur.com/1MlVmjZ.png

    I’m on firefox, latest update, running latest wordpress install and the adams responsive theme if it matters. Thanks for the tutorial.

Post a Comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*
*