Grow your CSS skills. Land your dream job.

“Raw” Contact Forms (with CAPTCHA) from CSSKarma

Published by Chris Coyier

Tim Wright from CSSKarma has taken my Contact Form and done some cool stuff to it. For one thing, the design is way stripped down so if you are looking to "start from scratch" with your form design, you would probably be better off starting with Tim's examples than mine.

Here are some of the things Tim has done:

CSS:

  • Removed all the images
  • Added in styles for user feedback
  • Generally trimmed things down

PHP:

  • Made the form submit to itself, ($_SERVER['PHP_SELF'];) so you don't
    need the thank you, error or engine files. Me and Tim briefly discussed the fact that not having a separate error.html file might be an analytic problem if you are looking to watch for errors, but there may be a better way to watch for errors anyway...
  • Set reply-to in $headers (doesn't work in gmail, but fine in programs
    like Thunderbird, not sure why yet)
  • Replaced stripslashes with strip_tags for a few variables
  • Compacted $body a little

Javascript:

  • Edited jquery.validate to output a <div> rather than a label
  • Moved the embedded javascript into jquery.extend
  • Using fadeIn() for form submission/error feedback

HTML:

  • Using <button type="submit"> instead of <input type="image"/>
  • Added a legend
  • Removed all the divs

 

Downloads

The new files can be seen and downloaded over at the CSSKarma lab. Here is direct link to the regular form. Here is a direct link to the form with CAPTCHA.

Comments

  1. Permalink to comment#

    That is slick. I’m working on my own contact form and will incorporate some of the tips. Thanks — contact forms are important!
    – Eric

  2. Cool! That was awesome!

  3. wow nice work :)

    very useful

  4. Hi Chris,

    Very clean coding there, I like it a lot.

    I’m not sure whether this is still relevant, but I have always avoided using the button element because of the problems regarding mobile devices mentioned on this page: http://nickcowie.com/2007/time-to-stop-using-the-button-element/

    It seems the problems with using buttons instead of input type=”submit” or input type=”button” also extend to some IE JavaScript bugs too:
    http://www.peterbe.com/plog/button-tag-in-IE
    – again though, this is quite an old example so might not be relevant anymore… I’ve not really got time to research it.

  5. Great example, and great source for all those who need a form with CAPTCHA. Well done!

  6. smeggle
    Permalink to comment#

    Hi

    Nice form let me say. I was checking it out and noticed that it was validating as xhtml transitional. So I’ve fixed it up and moved it to xhtml strict. (This is your basic form).

    You can see it working at http://www.computek.ie/test4 and theres a link in the page if you want to download a copy. I’ve put some notes in on use and full attribution to yourself for the original code.

    Really nice stuff – may play with it more and do some style/s for the form….

  7. This exactly what I been looking for for the past week! Wonderful solution.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".