“Raw” Contact Forms (with CAPTCHA) from CSSKarma

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.