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:
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", "[email protected]");
SPAM-Protection???
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 ;)
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
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 –
https://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 [email protected] 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!
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
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? :)
Is there a way I can make some of the fields *Required ?
I have zero knowledge of .php and would like to integrate it.
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?
Never mind, fixed it myself. Thanks for the awesome code.
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).Good morning,
Silly question, but where do I add the email address for the submit button.
Kind regards
Open contactengine.php
Add your mail adres in one of the first lines of code:
$EmailFrom = “[email protected]”;
Did you get it to work in the end Gary? I have the same problem.
Whats the best way to send this email to multiple email addresses. The way i have it set up at the moment is
$EmailTo = “[email protected],[email protected],[email protected],[email protected]”;
Its sending to the first two emails fine, but im not receiving them in the last two emails. I checked spam. In the reply field however, you see all 4 email addresses displayed.
I’m not receiving any emails at all.
I uploaded everything and changed the $EmailFrom and $EmailTo fields but I still odn’t receiving anything at all, even in the Junk Folder.
Surely that’s all you have to do though isn’t it?
I know PHP is working on my server as I have used it successfully on other pages.
okay so i was having trouble getting this form to work even though i had php running on my site and had not changed any of the file references.
two things i discovered that made it work perfectly for me:
-changed the email address from a gmail account to a [email protected] account.
-fixed the order of the fields on all files (index and 2 phps) and made them all a consistent order on all files (the field says “city” but the other fields are filled out with “tel” and they are in a different order in a few places.
now all fields are reporting correct data as filled out and i get the email instantaneously. (i even have the [email protected] name forwarding to a gmail and it still works that way.