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");
SPAM-Protection???
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.
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?
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.
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
@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.
But what happens with the contactengine.php?
How do we put recaptcha there?
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 . “)”);
}
Chris, Thanks heaps for your simple comment form mate.
Worked liked a charm.
Legendary stuff!!!
I meant simple Contact form not comment form. My apologies!!
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
@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.
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
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.
@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.
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.
Well, it took a while, but the e-mails did finally arrive…
Thanks. This is great.
Nice site would like to know more about CSS and comment script you have added on your site
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
@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.
Thank you for that Chris!
I’ll take a look a Wufoo as you suggest!
All the best
A
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?…
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
Adam, Your contact form on http://dexmultimedia.com/working/adv/index.html is cool – any chance of sharing the code??
Paul
I can’t get the code to show correctly- you can look here:
http://pastebin.com/f3ce7afc1
Thanks Chris! This is the ONLY truly simple form I have found anywhere and it worked great! Thanks for sharing!!
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
@Jon: My email address is only there for example… PLEASE change it to your own email upon actually using this =).
nice one. ive got that sorted now.
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!
@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)
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
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
How would I go about making it so certain fields are required?
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.
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.
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.
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!!!!!!
I dont receive the email .. any ideas?
This worked perfectly, thanks yo.
Hey Chris, I was wondering if this php can be applied to a more complex form?
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!
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!