Grow your CSS skills. Land your dream job.

A Nice & Simple Contact Form (Downloadable)

Published by Chris Coyier

There are a million contact form examples out there, why this one?

  • It's SIMPLE
  • It's FREE
  • It WORKS
  • It's VALID
  • and it's styled with CSS

Take a look. Download it. Take it apart. Use it for whatever you'd like.

nicesimplecontactform.gif

Check out the nice clean emails it generates:

resultingemail.gif

View Demo   Download Files

PLEASE NOTE: I get a lot of support requests about this example. It still works perfectly fine, but of course that's pending on a whole bunch of things like 1) Are you using it in an actual server environment with PHP running? 2) Did you upload the files correctly and all files that reference each other are correct? 3) Are you file permissions normal? The list goes on...

I cannot help you get this working on your site. I'm sorry, I just don't have time.If you are interested in fighting through, learning PHP, and getting this working, try going to the forums for help.

If you just want to get a form up on your site without any hassle, use Wufoo.

Update:

Reader Toni writes in with this fix for Windows servers:

/* Modification by Toni for Windows servers */
ini_set("sendmail_from", "me@mydomain.co.uk");

Comments

  1. Tester
    Permalink to comment#

    SPAM-Protection???

    • Riya
      Permalink to comment#

      Thanks a million for this simple & easy to use contact form…even after researching for 2-3 on the internet i wasn’t able to even understand any other scripts,,,,But it just took a few minutes to understand and run this one…..thanks again it was very very helpful especially for beginners ..like me ;)

  2. I wanted to keep it simple, so this script has no built in spam protection.

    However, if you want to implement spam protection, it is fairly easy to use something like reCaptcha.

    Check out an example of this same form using reCaptcha.

    • Good morning Mister Coyier,
      Thank you for showing your easy and simple contact form.
      I am a complete novice to web design and am still using the Apple iWeb app. (I know you are laughing)
      Any way I am looking to learn how to us Dreamweaver CS4.

      Do you offer classes or any type of help for a guy like me?

      Thanks you and have a nice day

      Vincenzo

  3. Permalink to comment#

    I, for one, was a little disappointed to see a table used for the form layout. There are a lot of ways to use css for layout here, why a table?

    Also, I would go as far as saying it’s an accessibility crime to not use labels.

    What gives?

  4. Sorry about excluding the labels there, they have been included now, that was a gross oversite.

    You know what, I was gonna defend myself and say that this is a valid use for tables because of the easy vertical centering and whatnot, but I’m wrong. CSS is the way to go here. I have updated the example to use pure CSS styling. Thanks for calling me out, it’s much better this way.

  5. Charlie
    Permalink to comment#

    The “Download this Example” on the second (ReCaptcha) form is the same as the first (I compared the View Source and the “index.html” is identical in the two ZIP files).

    Specifically, at the example with ReCaptcha –

    http://css-tricks.com/examples/NiceSimpleContactForm2/

    ([ Download this example ])

    Otherwise, nice clean example of a form in CSS … thank you!

    C

  6. @Charlie: Thanks for pointing that out, I actually just removed the download link from that example. I didn’t intend for it to be downloadable, since it won’t work for any other page than that one anyway.

    The way reCaptcha works, you need a license key for a particular site to make it work. If you just go to their site, they have very good tutorials on how to install it in a variety of programming enviornements from PHP to simple WordPress plugins.

  7. gusma
    Permalink to comment#

    But what happens with the contactengine.php?
    How do we put recaptcha there?

  8. You should follow their instructions, but yeah, you will need to update the engine:

    require_once(‘recaptchalib.php’);
    $privatekey = “YOUR-PRIVATE-KEY-HERE”;
    $resp = recaptcha_check_answer ($privatekey,
    $_SERVER["REMOTE_ADDR"],
    $_POST["recaptcha_challenge_field"],
    $_POST["recaptcha_response_field"]);

    if (!$resp->is_valid) {
    die (“The reCAPTCHA wasn’t entered correctly. Go back and try it again.” .
    “(reCAPTCHA said: ” . $resp->error . “)”);
    }

  9. Ben
    Permalink to comment#

    Chris, Thanks heaps for your simple comment form mate.
    Worked liked a charm.

    Legendary stuff!!!

  10. Ben
    Permalink to comment#

    I meant simple Contact form not comment form. My apologies!!

  11. SW
    Permalink to comment#

    I’m trying to incorporate the recaptcha to the index.html but not sure how to do it and their site doesn’t mention how to add their code to a html page. Am I missing something? Is there any chance to get a recaptcha download version which all we need to do is change the public/private keys?

    thx,

    SW

  12. @SW: All I did to include the reCapcha to begin with was follow the instructions on their site. I’m sure they are there somewhere.

  13. Jason
    Permalink to comment#

    Chris,

    everything looks great however; it doesn’t seem to validate the fields (I can press submit without any text in the fields) and it doesn’t send the form to my e-mail address that i updated in the contactengin.php

    you can view the form here: http://www.pittandsecond.com/test/

    Any help would be awesome

    J

  14. Jason
    Permalink to comment#

    oops…I tested it again and it is sending the info to my e-mail(so that is fixed) however it is still not validating the fields.

  15. @Jason: It doesn’t do any validation at all. That’s basically the “simple” part. I’m sure you could build it in somehow though, I’ve even seen a pretty nice lightweight way to do that with jQuery lately, but I can’t remember exactly where. If you are worried about spam, check out the reCaptcha integrated version. I also might suggest just using Wufoo for forms, they have a free plan and it’s super easy to use and creates very very nice forms.

  16. Tim
    Permalink to comment#

    Thanks for making it available to us all.
    Can you comment on how to “install” it or add to our websites. Or is it just a matter of copying it to the root directory. Because I’ve done that but it’s not sending the e-mail…
    Thanks again.
    Tim.

  17. Tim
    Permalink to comment#

    Well, it took a while, but the e-mails did finally arrive…
    Thanks. This is great.

  18. Permalink to comment#

    Nice site would like to know more about CSS and comment script you have added on your site

  19. Andrew

    Chris, thank you for a very interesting example and for the updates.

    Alas I have just found that my hosting service does not support php at my level of subscription and they want to charge $$$’s to convert to a package that does, is there anyway I can achieve the same level of functionality without using php?

    Thanks for any info
    A

  20. @Andrew: Not really… that’s really pretty unusual for a host to not provide PHP in even the most basic package. Perhaps consider switching hosts. Or just use Wufoo.com. I love Wufoo, the forms are very easy to make and you should be able to just drop some iframe code onto your page and have a working form in no time.

  21. Andrew

    Thank you for that Chris!

    I’ll take a look a Wufoo as you suggest!

    All the best

    A

  22. brock

    hi im having trouble using. it keeps going to the error page, i changed the email to mine so i dont know whats the problem ..any help please?…

  23. Adam Dexter

    Hey, I’m trying to get a nicer looking submit action- instead of going to a new page, I want to activate some AJAX effects- now I was able to do this with

    But now it doesn’t activate the form send- is there anyway to trigger these effects from within the PHP file? So it does the above effect instead of generate a new page?

    I’m working on it here: http://dexmultimedia.com/working/adv/index.html

  24. Adam Dexter

    I can’t get the code to show correctly- you can look here:

    http://pastebin.com/f3ce7afc1

  25. Julia

    Thanks Chris! This is the ONLY truly simple form I have found anywhere and it worked great! Thanks for sharing!!

  26. whats up chris. love your site can you tell me is it necessary to have all messages routed through chriscoyer@gmail.com or can i change it??

    im only new to all this web design carry on! cheers

  27. @Jon: My email address is only there for example… PLEASE change it to your own email upon actually using this =).

  28. nice one. ive got that sorted now.

  29. Great form, perfect

    I have it up and running here: http://www.designbyok.com/contact.html

    one query though, in the message field (text area) when you type past the width of the field the text doesn’t wrap to the next line but continues and adds a scrollbar to the field which isn’t great. Any ideas how to make it wrap

    thanks!

  30. @Matt OK: Looks like it’s wrapping to me, make sure you are typing actual words and not just a string of letters with no spaces. Also, make sure it’s a textarea not an input (looks like it is)

  31. Hi. I cannot get this to work and I don’t know why! I have php support from my hosting company and I’ve entered my email address as the recipient.

    I’ve also tried to send it to different email addresses….

    Is there any chance you could have a look and offer some suggestions?

    I would be eternally grateful…

    Sam

  32. Permalink to comment#

    hi, just wanted to say a huge thank you for this tut

    i am a “learn as I go along/teach myself” blogger/website designer and I have found the answer for how to create a web contact form particularly hard to come by

    this is a perfect tutorial for what I wanted and while i’m here, a very very good blog!

    thank you!

    sam h

  33. Permalink to comment#

    How would I go about making it so certain fields are required?

  34. Permalink to comment#

    First thank you for sharing your code.

    I’ve tried your code many times on my website, I did a lot changes adding headers, but unfortunately php failed to send/show emails with symbols like € correctly etc.. and since I need my users to quote rates in € to publish it them automatically into a website, I really need those € to show (é è too..).

    I’m quite sure it has to have a $header somewhere but I failed to add it to your script.

    Can you help me out please.

  35. Permalink to comment#

    Ok.. that was a simple problem.. the html and the header I used were different. Problem solved now!

    What would you add to the php to make fields mandatory? showing a text (in the same html page) telling the user not to leave a blank field in the form?

    I would love to enhance your code like this.

  36. A. Scott
    Permalink to comment#

    Very nice! I’m going to use a modified version of this on a site I am currently working on. Thanks for all of the work you put into this site. Many of your tutorials/examples have helped me shake the rust off after several years away from web design/development.

  37. Permalink to comment#

    Just like “brock”, Im having trouble using this form. It keeps going to the error page. I’ve used it on one site already (http://www.phonesatlanta.com/contact-form.html) and it works perfectly.

    But on the 2nd site I used it on it just goes straight to the error page even though I duplicated the same code (http://www.montysmithbbq.com/contact.html)… HELP PLEASE!!!!!!

  38. kategra
    Permalink to comment#

    I dont receive the email .. any ideas?

  39. Permalink to comment#

    This worked perfectly, thanks yo.

  40. Dustin
    Permalink to comment#

    Hey Chris, I was wondering if this php can be applied to a more complex form?

  41. jamieyo
    Permalink to comment#

    Hi Chris,

    I’m new to scripting. I’m trying out your code. I wonder if you can show me where should I replace your email to my own email address.

    Please please help. Thanks!

  42. Permalink to comment#

    Chris,

    I like the form and I’ve been tinkering with it today. I may have broken it though. I’ve got everything working correctly except that it doesn’t send any of the info that is in the input box areas. Any ideas what happened?

    Thanks!

  43. Mark
    Permalink to comment#

    Great simple code, many thanks :-)

    I want to add 2 further options in the ‘cantactengine.php’ and main html areas if you help me?

    How can I add a working ‘add file’ box to it as well? So someone can add a text, word or photo file?

    Thanks for your help

  44. Permalink to comment#

    Hi Chris! I really like the contact form. It suits my site well. I got it working (of sort), but when I press the “submit” button, the contactthanks.php won’t show up, is there somewhere i should place this? :)

  45. Richard
    Permalink to comment#

    Is there a way I can make some of the fields *Required ?
    I have zero knowledge of .php and would like to integrate it.

  46. David
    Permalink to comment#

    Really nice form! One question: I’ve got radio buttons in my form. How do I add this to the contactengine.php so that when I receive the mail from the form I can see if a radiobutton is selected?

    It are multiple radiobuttons and they can be selected individually. So I tread every radio button as a individual. This means I want to see in my mail: option 1: selected. option 2: not selected… Something like that.

    Is this possible?

  47. Garance
    Permalink to comment#

    Wonderful :-) I had my own “nice and simple” PHP code for this, but in an old <table> layout I wanted to ditch (I’m trying to learn CSS). A few questions though:
    1. Why set the textarea rows to 20 in the html and then constrain the field’s height to 90px in the CSS? It’s not like setting a lower value for rows would limit the input or anything…
    2. What purpose does the lone <br/> after the Message label serve? I could understand using <br>‘s after each input and textarea field, instead of relying on the interaction of the widths in several places in the css (actually, I would find that nicer, even).

Leave a Comment

Current day month ye@r *

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