The best contact form plug-in out there is cForms by Delicious Days. I’ve used it on almost all of my projects and it’s saved countless hours of development time.
However, one thing that could use more work is the default styles. None of them feel quite right directly out of the box- so I wanted to share the css I used for my site’s contact form and encourage other designers to post theirs as well.
Basic Set Up Instructions:
-
Download the cForms Skin
- Unzip the files and add them to the “styling” folder inside the cForms plug-in directory.
- Select the “light-gradients.css” option from the cForms styling
- If you only use the forms on certain pages in your site, I would also suggest limiting the loading of the scripts and styles to those specific pages. To do this, click “Global Settings” in cForms and open the tab that says “include cforms header data only on specific pages”.
cForms Skin With Labels on Top
Here’s another cforms skin for download with labels on top.
Other Custom Skins to Download:
Visser Labs has posted a nice and basic cForms style with instructions for use.
Other Examples of cForms Styling:
Here’s some other cForms examples I’ve themed:
- Kingsley Consulting – Footer Form
- Getaway Adventures – “Sign Up” Form
- Cal Bankruptcy Attorney’s – Sidebar Form
11 Comments
A few minor fixes were just made for IE7 and IE6. If you notice any other bugs- let me know so I can make the updates.
Damn those field and button styles look super easy to use, going to use your styles on a future site for sure! :D
Hi!
Thank you for this skin. However, small problem: the calendar. Any idea on how to have it working properly?
GM
Thanks for catching that bug. I just rewrote this post with new instructions for how to load the cForms styles. I now suggest adding it to the cForms styling directory rather than having it in your own theme.
The reason for this is two-fold. One is that it’s easier to access all the images and additional stylesheets cforms includes. The other is that cforms now has the ability to apply the styling and scripts only to the specific pages that use them, which seems to be more efficient than always loading the stylesheet through an @import in your main stylesheet. However, you’ll now need to be careful when upgrading the plug-in so that you don’t overwrite your new styles.
I am a huge fan of cforms and I love the skin options , thanks for this!
Hi Devin,
I came upon your link from wp.org. I am facing a frustrating problem with cforms. I want to have (required) text on the right side of input fields just as in pic below.
http://i44.tinypic.com/5esndk.jpg
I am using minimal.css style that comes bundled with cforms. I tried asking in cforms forums, but no one answered.
I understand you might not like that I am asking you a question about other style than yours, but I would really appreciate if you can help me out about said problem. I am sure it’s only a few minutes of work in CSS style/properties.
Please advise.
I look forward to your reply.
Thanks
Hi,
I have been trying to build a footer form much like the one you built for Kingsley Consulting. I started using the minimal.css provided with cforms and have been customizing the stylesheet. In IE8 and Firefox it looks just how I want it. However, in IE 6 and 7 the spacing between the fields are different (i.e. between the name field and the email field). It’s been driving me nutty.
I actually looked at KIngsley Consulting in IE 6, 7, and 8 and you also have some differences in spacing (between fields). However, it looks like you’ve done it in a way where the spacing may not be the same across all IEs but it looks fine.
What’s the trick? Can you give me any guidance on what areas to change to get the best look across 6, 7, and 8. It’s been driving me batty as i’ve been doing a lot of trial and error.
Thanks.
IE6 definitely a pain to style for. If I can’t get it to play nice with the regular css, I generally use a body class to help me target the browser. For instance, in IE6 you could do .ie6 .cforms label {margin-bottom:10px;} vs .ie7 .cforms label {margin-bottom:5px;}. You can read this post I did about body classes if they aren’t already enabled on your theme.
Thanks. I appreciate your response.
I will keep track of your articles as I traverse the world of WP.
Hi Devin! Do you know a quick way to integrate this into a child theme’s folder?
I think i got it- i just copy it into my child folder…import it from my style.css and turn off CSS in cforms. not sure that is a better option however.