A Nice & Simple Contact Form (Downloadable)
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.
Check out the nice clean emails it generates:
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");
Loading ...
1
SPAM-Protection???
Comment by Tester — October 19, 2007 @ 6:36 am
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.
Comment by Chris Coyier — October 19, 2007 @ 7:36 am
3
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?
Comment by Dan — October 19, 2007 @ 11:12 am
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.
Comment by Chris Coyier — October 19, 2007 @ 11:35 am
5
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
Comment by Charlie — October 19, 2007 @ 2:48 pm
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.
Comment by Chris Coyier — October 19, 2007 @ 3:01 pm
7
But what happens with the contactengine.php?
How do we put recaptcha there?
Comment by gusma — October 26, 2007 @ 6:46 am
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 . “)”);
}
Comment by Chris Coyier — October 26, 2007 @ 10:38 am
9
Chris, Thanks heaps for your simple comment form mate.
Worked liked a charm.
Legendary stuff!!!
Comment by Ben — March 11, 2008 @ 8:28 pm
10
I meant simple Contact form not comment form. My apologies!!
Comment by Ben — March 11, 2008 @ 8:30 pm
11
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
Comment by SW — March 19, 2008 @ 5:49 am
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.
Comment by Chris Coyier — March 19, 2008 @ 10:08 am
13
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
Comment by Jason — April 8, 2008 @ 9:52 am
14
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.
Comment by Jason — April 8, 2008 @ 9:55 am
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.
Comment by Chris Coyier — April 8, 2008 @ 6:14 pm
16
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.
Comment by Tim — April 13, 2008 @ 11:19 am
17
Well, it took a while, but the e-mails did finally arrive…
Thanks. This is great.
Comment by Tim — April 13, 2008 @ 1:17 pm
18
Nice site would like to know more about CSS and comment script you have added on your site
Comment by Anil — April 21, 2008 @ 8:52 pm
19
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
Comment by Andrew — May 11, 2008 @ 7:24 am
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.
Comment by Chris Coyier — May 11, 2008 @ 7:29 am
21
Thank you for that Chris!
I’ll take a look a Wufoo as you suggest!
All the best
A
Comment by Andrew — May 12, 2008 @ 6:34 am