“Raw” Contact Forms (with CAPTCHA) from CSSKarma

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

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:


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


  • 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


  • 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


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



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.