The contact form I show you below uses five different pieces to accomplish it’s goal. There are a hundred other ways to do this but, I think making it with five pieces will demonstrate the process and the different technologies used a little better.
First thing is the HTML page. Make a new page and name it contact.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact Form</title>
<link rel=stylesheet href="style.css" type="text/css" /></head>
<script language="javascript" src="validateForm.js" type='text/javascript'>
</script>
</head>
<body>
<div id="contactbox">
<form name="form11" action="send.php?action=send" method="post"
onSubmit="return checkFields();">
<div><span>*</span> = required field</div>
<div><span>*</span> Name: <input name="name" type="text" /></div>
<div><span>*</span> Email: <input name="email" type="text" /></div>
<div>Website: <input name="website" type="text" /></div>
<div id="comments">
Comments<br />
<textarea name="comments" rows="6" cols="36" wrap="virtual"></textarea>
</div>
<input name="submit" type="submit" value="Send Email" />
</form>
</div>
</body>
</html>
Next we’ll need some style. Make a new file and name it style.css.
#contactbox {
font:bold 10px Arial, Helvetica, sans-serif;
text-align:right;
width:360px;
margin:0px;
padding:15px;
}
#contactbox div {
margin-bottom:15px;
}
#contactbox span {
color:#d4402b;
font-weight:bold;
}
#contactbox div input {
width:295px;
font-size:11px;
font-weight:normal;
vertical-align:text-bottom;
}
#contactbox textarea {
width:340px;
font-size:11px;
font-weight:normal;
margin-top:5px;
}
#comments {
text-align:left;
padding:10px 0px 20px 15px;
margin-top:20px;
border-top:1px solid #dfdede;
}
Now for some form validation with JavaScript. Make a new file and name it validateForm.js
function checkFields() {
missinginfo = "";
if (document.form11.name.value == "") {
missinginfo += "\n Your Name";
}
if ((document.form11.email.value == "") ||
(document.form11.email.value.indexOf('@') == -1) ||
(document.form11.email.value.indexOf('.') == -1)) {
missinginfo += "\n A Valid Email address";
}
if (missinginfo != "") {
missinginfo ="_____________________________\n" +
"Please enter:\n" +
missinginfo + "\n_____________________________" +
"\nPlease complete and submit again!";
alert(missinginfo);
return false;
}
else return true;
}
Next we need the PHP code that sends the email. Make a new file and name it send.php. Don’t forget to fill in your own e-mail address (on line 6) where it says “you@youremail.com”;
<?php
extract($HTTP_POST_VARS);
extract($HTTP_GET_VARS);
if ($action == "send") {
$to = "you@youremail.com"; // YOUR EMAIL ADDRESS
$subject = "MY CONTACT FORM RESULTS"; // THE SUBJECT LINE OF THE EMAIL
$from = $_POST['email'];
$name = $_POST['name'];
$email = $_POST['email'];
$website = $_POST['website'];
$comments = $_POST['comments'];
$headers = "From: $from\r\n".
"X-Mailer: php";
$message = "Name: $name\n".
"Email: $email\n".
"Website: $website\n".
"____________________________________________________________\n\n".
"Comments:\n".
"$comments\n";
$send = mail($to, $subject, $message ,$headers);
if ($send) {
$c_message1 = "Thank you!";
$c_message2 = "Your information has been submitted";
include("ty.php"); exit();
}
else
{
$c_message1 = "ERROR";
$c_message2 = "I'm sorry, I couldn't send the email! <a href='contact.html'>Try again</a>?";
include("ty.php"); exit();
}
}
?>
Now all we need is a “Thank You” page. Save this as ty.php.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Thatnk You</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <h2><?php echo $c_message1; ?></h2> <h4><?php echo $c_message2; ?></h4> </body> </html>
Done.
April 7th, 2009 at 5:30 pm
Hello and thx for sharing this Contact Form but I have a problem, right after we fill the form the send.php stays in blank and doesnt show the ty.php, what could be the problem??
thx
April 7th, 2009 at 7:59 pm
There’s no way for me know why your form isn’t working without seeing your code.
Nor am I sure what you mean when you say “send.php stays in blank”
It works perfectly for me. Double check your code, your email address, and be sure all four files are in the same directory.
April 16th, 2009 at 10:05 pm
There’s no way a simple script like this could effect your email program. I’m sure the problem is local.
April 16th, 2009 at 9:21 pm
hi, i tried this form and when i sent a mail to myself, using the address provided in line 6 of the send.php. it gave me the thankyou page and everything but now i cannot open my email…
April 17th, 2009 at 5:49 am
i can enter now, but i still have a problem, i put the contact.html code into a text/html module on my CMS, it all looks good but when i send the mail it just refreshes the page. it does not send any mail. and when i enter the /contact.html as a page it works perfectly.
April 17th, 2009 at 1:17 pm
This script wasn’t necessarily meant for CMS applications. It probably has something to do with how your CMS rewrites URLs.
Try using absolute paths to the send.php and to the ty.php…
http:⁄⁄www.url.com⁄send.php?action=send
http:⁄⁄www.url.com⁄ty.php
This may not work either depending on server/PHP settings.
If you are using WordPress I would recommend cforms. If it is some other CMS I would look for a plugin made specifically for that CMS.
April 18th, 2009 at 8:23 am
Thanks so much! It worked perfectly for me!
June 30th, 2009 at 6:20 pm
Works great! Thanks!!!
August 23rd, 2009 at 4:34 pm
i got following messages
ERROR
I’m sorry, I couldn’t send the email! Try again?
August 27th, 2009 at 2:47 am
Hi it is working 99% I think. I get this error:
Warning: mail() [function.mail]: SMTP server response: (nasty url) in D:\Hosting\4735899\html\send.php on line 23
my code is exact to what is above other than I put the correct email address in there. Any ideas. I would greatly appreciate it. thank you!
August 27th, 2009 at 1:30 pm
You are running this on a Windows server. You will need to access and edit the server’s php.ini file.
http://www.sitepoint.com/article/advanced-email-php/
You could try using ASP instead of PHP
October 18th, 2009 at 2:51 pm
Hi! I’m sorry for my lack of knowledge on this, but I can’t understand when you say “make a new file and save it as”whatevername.whateverextension)”" What kind of file? How should I create these new files? Just as I create a new page? Thank you for your help.
October 18th, 2009 at 3:42 pm
The tutorial gives you file names to use when saving them, contact.html is an html file, style.css is a css file (stylesheet), validateForm.js is a javascript file. It doesn’t really get more explicit than that.
You can create these files using and IDE like Dreamweaver or you could just use notepad and save the file as contact.html, style.css, validateForm.js, etc…
Keep in mind that this uses PHP scripting which has to live on a web server. If you don’t know how to create html and css files and FTP them to a web server you might be better off starting with something a little easier like how to build a website for beginners.
October 19th, 2009 at 12:12 am
Ok. I got that part now.. but how do I put all these files together for the form to work? after I save them separately should I open them individually in the same html page? In a form? Between what tags? How?
Also, can I use microsoft expression web for this? Thank you very much for your time.
October 19th, 2009 at 2:44 pm
Well, just have a look at the code.
contact.html is the actual contact page. This is the one you will open.
In the <*head > section you will see the link that attaches the stylesheet <*link rel=stylesheet href=”style.css” type=”text/css” />
as well as the link that attaches the JavaScript file <*script language=”javascript” src=”validateForm.js” type=’text/javascript’>
Further down you will see the form. <*form name=”form11″ action=”send.php?action=send” method=”post” onSubmit=”return checkFields();”>
In the form statement you will see that the action calls send.php and the onSubmit calls the checkFields function from validate.js the JavaScript file.
If you look at send.php you will see at the bottom that once the form is processed the user is sent to ty.php, the Thank You page.
So, the user opens contact.html, fills out the form, hits the submit button and is sent to the thank you page. The other files are called in to do their thing via tags and such.
Do a Google search on “html forms” to learn more about forms, “css” to learn more about stylesheets, “php” and “javascript” too. These are all VAST subjects and well beyond the scope of this blog.
Hope this helps
November 14th, 2009 at 4:13 pm
Thanks! Prior to reading this the web form I had opened up the user’s mail client (which was a real pain on both ends) and they had to send it manually. This makes it so much easier to get viewer feedback.
December 24th, 2009 at 10:14 am
Is there a way to add a drop down menu so that the comment can be directed to 2 or more recipients?
December 24th, 2009 at 10:45 pm
Use a select tag ( http://www.w3schools.com/TAGS/tag_Select.asp ) to define the $to variable. You can define multiple email recipients in the value”" field by separating them with a comma. This of course defeats one of the main purposes of using a form, it exposes the email addresses to public view.
February 4th, 2010 at 12:08 pm
Thank You very Great tutorial….